Bootstrap -Raster
Bootstrap-Grid-System
Das Rastersystem von Bootstrap erlaubt bis zu 12 Spalten auf der Seite.
Wenn Sie nicht alle 12 Spalten einzeln verwenden möchten, können Sie die Spalten zu breiteren Spalten zusammenfassen:
| 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 | |||||||||||
Das Rastersystem von Bootstrap reagiert, und die Spalten werden je nach Bildschirmgröße automatisch neu angeordnet.
Grid-Klassen
Das Bootstrap-Grid-System hat vier Klassen:
xs(für Telefone - Bildschirme mit einer Breite von weniger als 768 Pixel)sm(für Tablets – Bildschirme mit einer Breite von mindestens 768 Pixel)md(für kleine Laptops – Bildschirme mit einer Breite von mindestens 992 Pixel)lg(für Laptops und Desktops – Bildschirme mit einer Breite von mindestens 1200 Pixel)
Die oben genannten Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.
Grundstruktur eines Bootstrap-Grids
Das Folgende ist eine grundlegende Struktur eines Bootstrap-Rasters:
<div class="row">
<div class="col-*-*"></div>
<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 von Spalten (Tags mit entsprechenden
.col-*-*Klassen) hinzu. Beachten Sie, dass die Zahlen in .col-*-*jeder Zeile immer 12 ergeben sollten.
Nachfolgend haben wir einige Beispiele für grundlegende Bootstrap-Grid-Layouts zusammengestellt.
Drei gleiche Spalten
Das folgende Beispiel zeigt, wie Sie drei Spalten gleicher Breite erhalten, beginnend bei Tablets und bis hin zu großen Desktops skalieren. Auf Mobiltelefonen oder Bildschirmen, die weniger als 768 Pixel breit sind, werden die Spalten automatisch gestapelt:
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>
Zwei ungleiche Spalten
Das folgende Beispiel zeigt, wie Sie zwei unterschiedlich breite Spalten beginnend bei Tablets erhalten und auf große Desktops skalieren:
Beispiel
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Tipp: Später in diesem Tutorial erfahren Sie mehr über Bootstrap-Raster.