Bootstrap Grid Beispiel: Kleingeräte
Angenommen, wir ein einfaches Layout mit zwei Spalten haben. Wir wollen , dass die Spalten aufgeteilt werden 25%/75% für kleine Geräte.
Tipp: Kleine Geräte sind definiert als eine Bildschirmbreite von 768 Pixel auf 991 Pixel.
Für kleine Geräte werden wir die Verwendung .col-sm-* Klassen.
Wir werden die folgenden Klassen in unseren zwei Spalten hinzufügen:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>Jetzt Bootstrap wird "bei der geringen Größe, suchen Sie nach Klassen mit zu sagen -sm- in ihnen und nutzen diese".
Im folgenden Beispiel wird in einer Folge von 25%/75% Aufteilung auf kleine (und mittlere und große) Geräte. Auf extra kleine Geräte, wird es automatisch (100%) stapeln:
Beispiel
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Versuch es selber " Hinweis: Achten Sie darauf , dass die Summe immer bis zu 12 hinzufügt.
Für eine 33,3% / 66,6% geteilt, würden Sie .col-sm-4 und .col-sm-8 :
Beispiel
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div> Versuch es selber " Das nächste Kapitel zeigt, wie eine andere Aufteilung Prozent für mittlere Geräte hinzuzufügen.