如何使用bootstrap 2.0的响应功能

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来执行此操作.我还在玩这部分.