html – 如何使用bootstrap 2.0的响应功能

我使用bootstrap 2.0从twitter和不确定如何使其响应。

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

隐藏的元素

您可以隐藏元素:

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%;
  }
}
http://stackoverflow.com/questions/9143345/how-to-use-responsive-features-of-bootstrap-2-0

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – 如何使用bootstrap 2.0的响应功能