Html 如何使用 bootstrap 2.0 的响应式特性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9143345/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use responsive features of bootstrap 2.0
提问by raklos
I'm using bootstrap 2.0 from twitter and unsure how to make it responsive.
我正在使用来自 twitter 的 bootstrap 2.0，但不确定如何使其响应。
- How can I remove elements when in mobile/small screen mode?
- How can I replace elements (i.e replace a big picture with a smaller one)?
- Change a
<h2>to be<h5>? etc.
- 在移动/小屏幕模式下如何删除元素？
- 如何替换元素（即用小图片替换大图片）？
- 将 a
<h2>改为<h5>? 等等。
回答by danneu
Hiding Elements
隐藏元素
You can hide elements with:
您可以使用以下方法隐藏元素：
display: none;
visibility: hidden;
Hopefully you're using LESS or SASS so you can just specify:
希望您使用的是 LESS 或 SASS，以便您可以指定：
@mixin hidden {
display: none;
visibility: hidden;
}
And then easily mix it in when necessary:
然后在必要时轻松混合：
footer {
@include hidden;
}
Just apply them to any selector in the relevant media query. Also, understand that media queries cascade onto smaller media queries. If you hide an element in a wide media query (tablet sized), then the element will remain hidden as the website shrinks.
只需将它们应用于相关媒体查询中的任何选择器。此外，了解媒体查询级联到较小的媒体查询上。如果您在宽媒体查询（平板电脑大小）中隐藏元素，则该元素将在网站缩小时保持隐藏状态。
Replacing Images
替换图像
Bootstrap doesn't offer image resizing as the screen shrinks, but you can manually change the dimensions of images with CSS in media queries.
Bootstrap 不会在屏幕缩小时调整图像大小，但您可以在媒体查询中使用 CSS 手动更改图像的尺寸。
But a particular solution I like is from this blog post: http://unstoppablerobotninja.com/entry/fluid-images/
但我喜欢的一个特定解决方案来自这篇博文：http: //unstoppablerobotninja.com/entry/fluid-images/
/* You could instead use ".flexible" and give class="flexible" only to
images you want to have this property */
img {
max-width: 100%;
}
Now images will only appear in their full dimensions if they don't exceed their parent container, but they'll shrink fluidly as their parent element (like the <div>they're in) shrinks.
现在，如果图像不超过其父容器，它们只会以完整尺寸显示，但它们会随着其父元素（如<div>它们所在的元素）的缩小而流畅地缩小。
Here's a demo: http://unstoppablerobotninja.com/demos/resize/
这是一个演示：http: //unstoppablerobotninja.com/demos/resize/
To actually replace images, you could swap the background image with CSS. If .logohas background: url("logo.png");, then you can just specify a new background image in a media query with .logo { background: url("small-logo.png");
要实际替换图像，您可以使用 CSS 交换背景图像。如果.logo有background: url("logo.png");，那么您可以在媒体查询中指定一个新的背景图像.logo { background: url("small-logo.png");
Change h2 to h5
将 h2 更改为 h5
If this is because you want to change the size of the heading, don't do this. H2 has semantic value: It's not as important as H1 and more important than H3.
如果这是因为您想更改标题的大小，请不要这样做。H2 具有语义价值：它不如 H1 重要，但比 H3 重要。
Instead, just specify new sizes for your h1-h6 elements in media queries as your website gets smaller.
相反，随着您的网站变小，只需为媒体查询中的 h1-h6 元素指定新的大小。
@media (max-width: 480px) {
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 80%;
}
}
回答by notzach
I've been playing with the responsive parts of bootstrap for the last few days, take a look at /less/responsive.lessto get an idea of how you can utilize the responsive features of bootstrap.
过去几天我一直在研究 bootstrap 的响应式部分，查看/less/responsive.less以了解如何利用 bootstrap 的响应式功能。
You basically look at the browser's width/height to determine which css properties to apply to the page. So, for example if you want to change h2 when the user is using a smaller device, you would do something like this:
您基本上会查看浏览器的宽度/高度来确定要应用于页面的 css 属性。因此，例如，如果您想在用户使用较小设备时更改 h2，您可以执行以下操作：
@media (max-width: 480px) {
h2 { font-size: 15px; }
}
You can do this with any style you want to affect when the size of the screen changes.
当屏幕大小发生变化时，您可以使用您想要影响的任何样式来执行此操作。
You can replace some elements by utilizing css replacement methods and then just have different styles affect things at different widths. Or you could use jquery or maybe response.js to do it. I'm still playing with this part of it.
您可以使用 css 替换方法替换一些元素，然后让不同的样式影响不同宽度的事物。或者你可以使用 jquery 或者 response.js 来做到这一点。我还在玩这部分。
回答by Gandalf
For responsive images you could have
对于响应式图像，您可以拥有
.responsive-image { max-width:100%; height:auto; }
and you could use this as
你可以用它作为
<img src="testimage.jpg" border="0" alt="blank image" class="responsive-image">
For responsive navigation
用于响应式导航
Use tinynav https://github.com/viljamis/TinyNav.js
使用 tinynav https://github.com/viljamis/TinyNav.js
This converts <ul>and <ol>navigation to a select box for small screens.
这将转换<ul>和<ol>导航到小屏幕的选择框。
回答by Carl
As to your first question - I'm not sure if this was available when you asked, but Bootstrap has classes "hidden-phone", "visible-desktop" etc to handle hiding of elements on different sized screens. Just add the .hidden-phone class to an element and it will disappear on screens smaller than 768px wide.
关于您的第一个问题 - 我不确定当您询问时这是否可用，但 Bootstrap 具有“隐藏电话”、“可见桌面”等类来处理不同尺寸屏幕上元素的隐藏。只需将 .hidden-phone 类添加到元素中，它就会在小于 768px 宽的屏幕上消失。
EDIT
编辑
After the release of bootstrap 3, the 2.3.2 documentation is now at:
bootstrap 3 发布后，2.3.2 文档现在位于：
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
http://getbootstrap.com/2.3.2/scaffolding.html#responsive
The new 3.x documentation is at:
新的 3.x 文档位于：
回答by yegor256
I think bootstrap has built-in features for this (in responsive-utilities.less):
我认为 bootstrap 具有用于此的内置功能（在responsive-utilities.less）：
<a href="#">
<span class="visible-desktop">Click here to get more information</span>
<span class="visible-tablet">More information</span>
<span class="visible-phone">Info</span>
</a>
