html - twitter bootstrap 屏幕大小逻辑和最佳实践

Question

我正在使用 Bootstrap 3 构建响应式站点。

这是桌面版本（仅包含标题）：

下面是手机版：

使用 Bootstrap 3 实现这样的布局更改的概念是什么，是使用网格类还是媒体查询？

我真的很感激简短的例子。

谢谢

Answer 1

您可以使用响应式实用程序“hidden-lg”（隐藏在桌面上）和“hidden-sm”（隐藏在平板电脑/手机上）CSS 类，如下所示。

<div class="navbar navbar-inverse hidden-sm">
      <div class="container">
        .. menu here
    </div>
</div>
<div class="hidden-lg text-center">
  <!--custom select menu here-->
  <select><option>Contact Us</option><option>About</option><option>Link</option</select>
</div>

演示： http: //www.bootply.com/70810

但是，更典型的 Bootstrap “要做的事情”是使用nav-collapse折叠较小设备上的菜单：

http://www.bootply.com/cskelly/70636