Twitter Bootstrap 导航栏：[左按钮-- 中心文本-- 右按钮]？二答案

【问题标题】：Twitter Bootstrap Navbar: [Left Button -— Center Text -— Right Button]? IITwitter Bootstrap 导航栏：[左按钮-- 中心文本-- 右按钮]？二
【发布时间】：2013-06-29 18:52:14
【问题描述】：

@twilight-pony-inc 的问题https://stackoverflow.com/questions/17375324/twitter-bootstrap-navbar-left-button-center-text-right-button 已关闭。

我认为问题应该是：我可以使用 Twitter 的 Bootstrap 构建一个看起来像原生应用程序的移动应用程序吗？或者更具体地说，如何构建一个带有标题和左右按钮的导航栏。

例子：

标题为“Temp”的蓝色标题（导航栏）以及“返回”和“主页”按钮应使用 Twitter 的 Bootstrap 构建。

【问题讨论】：

标签： mobile twitter-bootstrap responsive-design

【解决方案1】：

有趣的问题。 @twilight-pony-inc 的要求似乎微不足道，但事实并非如此。 Twitter 的 Bootstrap 是用“响应式”思维构建的。使用 TB 构建的布局将适用于显示它的设备。您提供的示例似乎是使用 jQuery Mobile 之类的移动框架构建的。移动框架可用于构建移动应用程序（仅限）。如今，移动框架变得更具响应性，即将推出的 Twitter 的 Bootstrap 版本使用移动优先的方法。 Twitter 的 Bootstrap 3 也将有一个移动网格。（另见http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html和http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/）

首先考虑是否需要移动框架而不是 Twitter 的 Bootstrap。其次考虑使用 Twitter 的 Bootstrap 3，因为它会让你的移动开发更容易。

当然，您也可以使用 twitter boostrap 构建这样的布局。首先阅读网格：http://twitter.github.io/bootstrap/scaffolding.html#gridSystem。从导航栏的行开始并将其拆分为列：

<div class="container navbar">
<div class="row">
<div class="span3 text-left"><button class="btn">back</button></div>
<div class="span6 text-center"><h3>Title (centered)</h3></div>
<div class="span3 text-right"><button class="btn">Home</button></div>
</div> 
</div>

这里还要考虑流体网格：http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem

这将为您提供一个带有两个按钮的导航栏。但是在小型/移动屏幕（低于 768 像素）上，您的布局会中断。低于 768 像素的列（spanX 类的 div）将堆叠（并获得 100% 的宽度）。您可以使用媒体查询来解决此问题：

@media (max-width:767px)
{
   .navbar div[class*="span"] { float: left;} /* float left */
   .navbar div.span3 { width:25%; } 
   .navbar div.span6 { width:50%; } 
   body {padding:0;}
}

这也会在小屏幕上创建一个包含三列的行。请参阅：http://www.bootply.com/66054 或下图：

CSS 使移动布局变得流畅，因为列宽是按百分比设置的（连续 100%）。

Twitter 的 Bootstrap 3 默认情况下，TB3 具有流畅的布局。 TB3 有两个网格，一个用于 768+ 像素宽度屏幕的大网格和一个小型移动网格。因为您可以使用移动网格，所以不需要媒体查询来获得上述 TB3 的布局。在 TB3 中，列的宽度由 col-span-{X} 类设置。同样对于小网格 col-small-span-{X} 用于设置宽度。

因此，您可以使用 Twitter 的 Bootstrap 3 构建您的导航栏：

<div class="container navbar">
<div class="row">
<div class="col-span-3 col-small-span-3 text-left"><button class="btn">back</button></div>
<div class="col-span-6 col-small-span-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-span-3 col-small-span-3 text-right"><button class="btn">Home</button></div>
</div> 
</div>

Twitter 的 Bootstrap 3 定义了三个网格：用于手机的小网格 (768px) 和用于 Destkops 的中大型网格 (>992px)。这些网格的行类前缀是“.col-”、“.col-sm-”和“.col-lg-”。中大型网格将堆叠在 992 像素以下的屏幕宽度之下。低于 768 像素的小网格也是如此，小网格永远不会堆叠。除了总是会堆叠元素的旧手机（移动优先设计）。

因此，您应该为您的移动应用使用“.col-”前缀：

<div class="container navbar">
<div class="row">
<div class="col-3 text-left"><button class="btn btn-default">back</button></div>
<div class="col-6 text-center"><h3>Title (centered)</h3></div>
<div class="col-3 text-right"><button class="btn  btn-default">Home</button></div>
</div> 
</div>

见：http://bootply.com/73382

【讨论】：