Bootstrap Grid - Kleine Geräte
Bootstrap-Grid-Beispiel: Kleine Geräte
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| Class prefix | .col-xs |
.col-sm |
.col-md |
.col-lg |
| Screen width | <768px | >=768px | >=992px | >=1200px |
Angenommen, wir haben ein einfaches Layout mit zwei Spalten. Wir möchten, dass die Spalten für kleine Geräte zu 25 %/75 % aufgeteilt werden.
Tipp: Als kleine Geräte gelten Geräte mit einer Bildschirmbreite von 768 Pixel bis 991 Pixel .
Für kleine Geräte werden wir die .col-sm-*Klassen verwenden.
Wir werden die folgenden Klassen zu unseren beiden Spalten hinzufügen:
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
Jetzt sagt Bootstrap: "Suchen Sie bei der kleinen Größe nach Klassen mit -sm- und verwenden Sie diese".
Das folgende Beispiel führt zu einer Aufteilung von 25 %/75 % auf kleinen (und mittleren und großen) Geräten. Auf extra kleinen Geräten wird automatisch gestapelt (100 %):
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>
Hinweis: Achten Sie darauf, dass die Summe immer 12 ergibt.
Für eine Aufteilung von 33,3 %/66,6 % würden Sie .col-sm-4and verwenden .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>
Das nächste Kapitel zeigt, wie Sie für mittelgroße Geräte einen anderen Teilungsprozentsatz hinzufügen.