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 werden in Abhängigkeit von der Bildschirmgröße neu zu ordnen: Auf einem großen Bildschirm mit dem in drei Spalten organisiert Inhalte besser aussehen könnte, aber auf einem kleinen Bildschirm wäre es besser, wenn die Inhaltselemente gestapelt wurden übereinander.
Tipp: Das Rasterspalten Denken Sie daran , sollten für eine Zeile zu zwölf addieren. Mehr als das, werden Spalten , egal die Stack - viewport .
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.
Tipp: Jede Klasse skaliert, so dass , wenn Sie die gleichen Breiten für einstellen wollen xs und sm , müssen Sie nur angeben xs .
Grid Regeln
Einige Bootstrap Rastersystem Regeln:
- Zeilen muss innerhalb eines platziert werden
.container( mit fester Breite) oder.container-fluid(volle Breite) für eine korrekte Ausrichtung und Polsterung - Verwenden Sie Zeilen horizontale Gruppen von Spalten erstellen
- Inhalte sollten in Spalten angeordnet werden, und nur die Spalten sein kann sofort Kinder von Reihen
- Vordefinierte Klassen wie
.rowund.col-sm-4sind für die schnelle Herstellung von Raster - Layouts zur Verfügung - Spalten schaffen Rinnen (Lücken zwischen Spalteninhalt) über Polsterung. Das Polster ist für das erste und letzte Spalte über negative Marge auf in Reihen versetzt
.rows - Grid-Spalten werden durch die Angabe der Anzahl der 12 verfügbaren Spalten erstellt, um Ihnen zu überbrücken wollen. Zum Beispiel würden drei gleiche Spalten verwenden drei
.col-sm-4
Grundstruktur eines Bootstrap Grid
Das Folgende ist eine Grundstruktur eines Bootstrap Raster:
<div class="container">
<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>
</div> So erstellen Sie das Layout Sie möchten, erstellen Sie einen Container ( <div class="container"> ). Als nächstes wird eine Zeile (create <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.
Rasteroptionen
Die folgende Tabelle gibt einen Überblick , wie die Bootstrap Systemraster über mehrere Geräte hinweg funktioniert:
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Beispiele
Die nächsten Kapitel zeigt Beispiele für Grid-Systeme für verschiedene Geräte: