Interest Ask. What @ twilight-pony-inc asks seems trivial, but it is not. Twitter Bootstrap is built with a responsive mind. The layout design with TB will take on a device that displays it. The example you give seems to be created by working with a mobile frame, such as jQuery Mobile. Mobile frameworks can be used to create mobile applications (only). Currently, mobile frameworks are becoming more receptive, and the upcoming version of Twitter Bootstrap uses a mobile approach. Twitter Bootstrap 3 will also have a mobile grid. (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 / )
Consider if you first need a mobile infrastructure instead of Twitter Bootstrap. Secondly, we recommend using Twitter Bootstrap 3 because it will simplify your mobile development.
You can build such a layout using twitter boostrap. Read about the grid first: http://twitter.imtqy.com/bootstrap/scaffolding.html#gridSystem . Start with a row for your navigation bar and divide it into 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>
Also consider the current grid: http://twitter.imtqy.com/bootstrap/scaffolding.html#fluidGridSystem
This will give you a navigation bar with two buttons. But on a small / mobile screen (below 768 pixels) your layout breaks. Below 768 px yor columns (divs with class spanX) will stack (and get 100% width). You can use media queries to fix this:
@media (max-width:767px) { .navbar div[class*="span"] { float: left;} .navbar div.span3 { width:25%; } .navbar div.span6 { width:50%; } body {padding:0;} }
This will create a row with three columns on small screens. See: http://www.bootply.com/66054 or the image below:
CSS makes moving fluid for the layout, as the width of the columns is set as a percentage (100% per line).
Twitter Bootstrap 3 By default, TB3 has a fluid layout. TB3 has two grids, a large grid for screens with a width of 768 pixels and a small mobile grid. You can use a mobile grid, you do not need media queries to get the layout, as described above, with TB3. In TB3, column widths are defined by col-span- {X} classes. Similarly, for a small grid, col-small-span- {X} are used to set the width.
So, with Twitter Bootstrap 3, you can create your navigator 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>
Strike>
Twitters Bootstrap 3 defines three grids: a tiny grid for phones (<768px), a small grid for tablets (> 768px) and a Medium-Large grid for Destkops (> 992px). The string class prefixes for this grid are ".col-", ".col-sm-" and ".col-lg-". The middle grid will be below the screen width of 992 pixels. Also, a small grid below 768 pixels, and a tiny grid never folds. Except for older phones that will always stack items (mobile first design).
For this reason, you should use the ".col-" prefixes for your mobile application:
<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>
See: http://bootply.com/73382