Bootstrap - Gittersystem
Bootstrap's Grid - System ermöglicht über die Seite bis zu 12 Spalten auf.
Wenn Sie möchten, einzeln nicht verwenden alle 12 Spalte können Sie gruppieren die Spalten breiter Spalten zu erstellen:
| Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 | Spannweite 1 |
| Spanne 4 | Spanne 4 | Spanne 4 | |||||||||
| Spanne 4 | Spannweite 8 | ||||||||||
| Spannweite 6 | Spannweite 6 | ||||||||||
| Spannweite 12 | |||||||||||
Bootstrap's Grid - System reagiert, und die Spalten automatisch neu zu ordnen , wird in Abhängigkeit von der Bildschirmgröße.
Grid-Klassen
Das Bootstrap Grid - System verfügt über vier Klassen:
- xs (für Handys)
- sm (für Tabletten)
- md (für Desktops)
- lg (für größere Desktops)
Die Klassen können oben kombiniert werden dynamischer und flexibler Layouts zu erstellen.
Grundstruktur eines Bootstrap Grid
Das Folgende ist eine Grundstruktur eines Bootstrap Raster:
<div
class="row">
<div class="col-*-*"></div>
</div>
<div
class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div
class="row">
...
</div> Zuerst; erstellen Sie eine Zeile ( <div class="row"> ). Fügen Sie dann die gewünschte Anzahl der Spalten (Tags mit entsprechenden .col-*-* Klassen). Beachten Sie, dass die Zahlen in .col-*-* immer für jede Zeile bis 12 sollten addiert.
Im Folgenden haben wir einige Beispiele für Grund gesammelt Bootstrap Rasterlayouts.
Drei gleiche Spalten
Das folgende Beispiel zeigt, wie ein drei gleich breite Spalten bei Tabletten beginnen und zu großen Desktops Skalierung zu erhalten. Bei den Mobiltelefonen, wird automatisch stapeln die Spalten:
Beispiel
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-4">.col-sm-4</div>
</div> Versuch es selber " Zwei Ungleiche Spalten
Das folgende Beispiel zeigt, wie zwei Start verschiedenen Breiten Säulen bei Tabletten zu erhalten und die Skalierung auf große Desktops:
Beispiel
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Versuch es selber " Tipp: Sie erfahren mehr über Bootstrap Gitter später in diesem Tutorial.