隐藏元素

Question

我正在使用Twitter上的bootstrap 2.0，并且不确定如何使其响应。

如何在移动/小屏幕模式下删除元素？
如何更换元素（即用较小的元素替换大图片）？
将<h2>更改为<h5>？等

Answer 1

隐藏元素

您可以隐藏元素：

display: none;
visibility: hidden;

希望你使用的是LESS或SASS，所以你可以指定：

@mixin hidden {
  display: none;
  visibility: hidden;
}

然后在必要时轻松混合：

footer {
  @include hidden;
}

只需将它们应用于相关媒体查询中的任何选择器即可。此外，了解媒体查询级联到较小的媒体查询。如果您在宽媒体查询（平板电脑大小）中隐藏元素，则该元素将在网站缩小时保持隐藏状态。

替换图像

当屏幕缩小时，Bootstrap不提供图像大小调整，但您可以在媒体查询中使用CSS手动更改图像的尺寸。

但我喜欢的特定解决方案来自此博文：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%;
}

现在，如果图像不超过其父容器，则它们只会以完整尺寸显示，但是当它们的父元素（如它们所在的<div>缩小）时，它们会流畅地缩小。

以下是演示：http://unstoppablerobotninja.com/demos/resize/

要实际替换图像，您可以使用CSS交换背景图像。如果.logo有background: url("logo.png");，那么您只需在.logo { background: url("small-logo.png");

的媒体查询中指定新的背景图片

将h2更改为h5

如果这是因为您想要更改标题的大小，请不要这样做。 H2具有语义价值：它不如H1重要，比H3更重要。

相反，只需在您的网站变小时为媒体查询中的h1-h6元素指定新尺寸。

@media (max-width: 480px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: 80%;
  }
}

Answer 2

过去几天我一直在玩Bootstrap的响应部分，看看/less/responsive.less，了解如何利用bootstrap的响应功能。

您基本上会查看浏览器的宽度/高度，以确定要应用于页面的css属性。因此，例如，如果您想在用户使用较小设备时更改h2，您可以执行以下操作：

@media (max-width: 480px) {
    h2 { font-size: 15px; }
}

当屏幕尺寸发生变化时，您可以使用任何想要影响的样式。

您可以使用css替换方法替换某些元素，然后让不同的样式影响不同宽度的内容。或者您可以使用jquery或者response.js来执行此操作。我还在玩这部分内容。

Answer 3

对于您可以拥有的响应式图像

.responsive-image { max-width:100%; height:auto; }

你可以用它作为

<img src="testimage.jpg" border="0" alt="blank image" class="responsive-image">

用于响应式导航

使用tinynav https://github.com/viljamis/TinyNav.js

这会将<ul>和<ol>导航转换为小屏幕的选择框。

Answer 4

关于你的第一个问题 - 我不确定你问这个时候是否可用，但Bootstrap有“隐藏电话”，“可见桌面”等类来处理隐藏不同大小屏幕上的元素。只需将.hidden-phone类添加到元素中，它就会在小于768px宽的屏幕上消失。

修改

在bootstrap 3发布后，2.3.2文档现在位于：

http://getbootstrap.com/2.3.2/scaffolding.html#responsive

新的3.x文档位于：

http://getbootstrap.com/css/#responsive-utilities

Answer 5

我认为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>

如何使用bootstrap 2.0的响应功能

5 个答案:

隐藏元素

替换图像

将h2更改为h5

用于响应式导航