Twitter Bootstrap导航栏:[左按钮---中心文本-右按钮]? II [英] Twitter Bootstrap Navbar: [Left Button -— Center Text -— Right Button]? II

问题描述

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

我认为问题应该是:我可以使用Twitter的Bootstrap构建看起来像本地应用程序的移动应用程序吗?或更具体地讲，如何构建带有标题和左右按钮的导航栏.

I think the question should be: Can i build a mobile app with Twitter's Bootstrap which looks like a native app. Or more specific how to build a navbar with a tittle and buttons on the right and left.

示例:

标题为"Temp"，按钮"back"和"home"的蓝色标题(navbar)应使用Twitter的Bootstrap构建.

The blue header (navbar) with title "Temp" and buttons "back" and "home" should be build with Twitter's Bootstrap.

推荐答案

有趣的问题. @ 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 和

Interesting question. What @twilight-pony-inc is asking seems trivial but is not. Twitter's Bootstrap is build with a 'responsive' mind. The layout build with TB will adopt to the device which shows it. The example you give seems to build with a mobile frame work like jQuery Mobile. Mobile frameworks can be use to build mobile apps (only). Nowadays mobile frameworks become more responisve and the coming version of Twitter's Bootstrap uses a mobile first approach. Twitter's Bootstrap 3 will have a mobile grid also. (see also http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html and http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/)

请先考虑是否需要移动框架来代替Twitter的Bootstrap.其次，考虑使用Twitter的Bootstrap 3，因为它将使您的移动开发更加轻松.

Consider if you need a mobile framework in stead of Twitter's Bootstrap first. Second consider to use Twitter's Bootstrap 3 cause it will make your mobile development easier.

当然，您也可以使用twitter boostrap建立这样的布局.首先了解网格: http://twitter.github.io/bootstrap/scaffolding. html#gridSystem .从导航栏的行开始，然后将其分为几列:

Offcourse you can build such a layout with twitter boostrap too. Read about the grid first: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem. Start with row for your navbar and split it in columns:

<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

Also consider the fluid grid here: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem

这将为您提供一个带有两个按钮的导航栏.但是在小型/移动屏幕(768像素以下)上，您的版式中断了.小于768像素的列(具有spanX类的div)将堆叠(并获得100％的宽度).您可以使用媒体查询来解决此问题:

This will give you a navbar with two button. But on a small / mobile screen (below 768 px) your layout breaks. Below 768 px yor columns (divs with class spanX) will stack (and get a 100% width). You can use media queries to fix this:

@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 或以下图片:

This will create a row with three columns on small screens too. See: http://www.bootply.com/66054 or the image below:

CSS使移动布局变得流畅，导致列的宽度按百分比设置(连续100％).

The CSS make the mobile layout fluid cause the colums width is set by percentage (100% in a row).

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

Twitter's Bootstrap 3 TB3 has a fluid layout by default. TB3 has two grid the big grid for 768+ pixels width screens and a small mobile grid. Cause you can use the mobile grid, you don't need media queries to get a layout as above with TB3. In TB3 the width of columns is set by the col-span-{X} classes. Likewise for the small grid col-small-span-{X} are used to set the width.

因此，使用Twitter的Bootstrap 3，您可以使用以下命令构建导航栏:

So with Twitter's Bootstrap 3 you can build your navbar with:

<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)，平板电脑的小网格(> 768px)和Destkops的中大网格(> 992px).这些网格的行类前缀为".col-"，.col-sm-"和".col-lg-".中型网格将堆叠在992像素以下的屏幕宽度.小于768像素的小网格也不会堆叠.旧手机除外，它总是会堆叠元素(移动优先设计).

Twitter’s Bootstrap 3 defines three grids: Tiny grid for Phones (<768px), Small grid for Tablets (>768px) and the Medium-Large grid for Destkops (>992px). The row class prefixes for these grid are ".col-", ".col-sm-" and ".col-lg-". The Medium-large grid will stack below 992 pixels screen width. So does the Small grid below 768 pixels and the tiny grid never stacks. Except for old phones which always will stack the elements (mobile first design).

因此，您应该为移动应用程序使用".col-"前缀:

For this reason you should use the ".col-" prefixes for your mobile app:

<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

这篇关于Twitter Bootstrap导航栏:[左按钮---中心文本-右按钮]? II的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！