Twitter Bootstrap Navbar: [Links-Taste -- Text Zentrieren -- Rechts-Taste]? II

Interessante Frage. Was @twilight-pony-inc ist Frage scheint trivial, aber ist nicht. Twitter 's Bootstrap ist bauen mit einem "responsive " Geist". Das layout erstellen mit TB verabschieden, um das Gerät, das zeigt es. Das Beispiel, das Sie geben, scheint das bauen mit einem mobilen Rahmen wie jQuery Mobile. Mobile frameworks können zur Erstellung von mobilen apps (nur).
Heutzutage mobile frameworks werden mehr responisve und die kommende version von Twitter Bootstrap verwendet eine mobile-first-Ansatz. Twitter ' s Bootstrap 3 haben eine mobile-Netz auch. (siehe auch http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/grids/rwd-basics.html und http://bassjobsen.weblogs.fm/twitter-bootstrap-3-breakpoints-and-grid/)

Überlegen, ob Sie eine mobile-framework anstelle von Twitter ' s Bootstrap-ersten. Zweitens betrachten Sie die Verwendung von Twitter Bootstrap 3 Ursache es wird Ihr mobile-Entwicklung zu erleichtern.

Offcourse können Sie bauen so ein layout mit twitter boostrap zu. Lesen Sie mehr über die grid-erste: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem. Beginne mit der Reihe für Ihre Navigationsleiste und teilen Sie es in den Spalten:

<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>

Beachten Sie auch das fluid grid hier: http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem

Dadurch erhalten Sie eine Navigationsleiste mit zwei button. Aber auf eine kleine /Handy-Bildschirm (unten 768 px) Ihr layout bricht. Unterhalb 768 px Y-Spalten (divs mit der Klasse spanX) stapeln (und erhalten eine 100% Breite). Mithilfe von Medienabfragen können Sie dieses Problem zu beheben:

@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;}
}  

Dadurch wird eine Zeile mit drei Spalten auf kleinen Bildschirmen zu. Siehe: http://www.bootply.com/66054 oder das Bild unten:

CSS machen das mobile layout fluid verursachen, die Spalten Breite wird eingestellt, indem der Anteil (100% in einer Reihe).

Twitter ' s Bootstrap 3
TB3 ist mit einem fluid-layout standardmäßig. TB3 hat zwei Gitter die große raster für 768+ Pixel Breite Bildschirme und eine kleine mobile Netz. Ursache Sie verwenden das mobile Netz, Sie brauchen nicht zu media queries um ein layout wie oben, nur mit TB3. In TB3 die Breite der Spalten wird durch die col-span-{X} - Klassen. Ebenfalls für die kleinen grid col-kleine-span-{X} verwendet werden, um die Breite gesetzt.

<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 ' s Bootstrap 3 definiert drei Netze: Kleine Netz für Handys (<768px), Kleines Netz für Tablets (>768px) und das Mittlere Gitter für die Destkops (>992px). Die Zeile class-Präfixe für diese Gitter werden “.col-", ".col-sm-" und ".col-lg-". Das Mittlere große Gitter-Stapel unten 992 Pixel Bildschirmbreite. So hat das Kleine raster unten 768 Pixel und dem kleinen Gitter niemals stapeln. Außer für alte Handys, die immer stack-Elementen (mobile-first-design).

Aus diesem Grund sollten Sie die “.col-" Präfixe für Ihre 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>

Finden Sie unter: http://bootply.com/73382