Bootstrap -Grid-System
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 neu angeordnet: Auf einem großen Bildschirm sieht es vielleicht besser aus, wenn der Inhalt in drei Spalten organisiert ist, aber auf einem kleinen Bildschirm wäre es besser, wenn die Inhaltselemente gestapelt wären übereinander.
Tipp: Denken Sie daran, dass die Summe der Rasterspalten zwölf für eine Zeile ergeben sollte. Darüber hinaus werden Spalten unabhängig vom Ansichtsfenster gestapelt.
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.
Tipp: Jede Klasse wird hochskaliert. Wenn Sie also für xs und sm die gleichen Breiten festlegen möchten, müssen Sie nur xs angeben.
Grid-Systemregeln
Einige Bootstrap-Rastersystemregeln:
- Zeilen müssen innerhalb von
.container(fester Breite) oder.container-fluid(voller Breite) platziert werden, um eine ordnungsgemäße Ausrichtung und Auffüllung zu gewährleisten - Verwenden Sie Zeilen, um horizontale Gruppen von Spalten zu erstellen
- Inhalt sollte in Spalten platziert werden, und nur Spalten können unmittelbar untergeordnete Elemente von Zeilen sein
- Vordefinierte Klassen wie
.rowund.col-sm-4stehen zum schnellen Erstellen von Rasterlayouts zur Verfügung - Spalten erzeugen durch Auffüllen Zwischenräume (Lücken zwischen Spalteninhalten). Das Padding wird zeilenweise für die erste und letzte Spalte über negativen Rand ein versetzt
.rows - Rasterspalten werden erstellt, indem Sie die Anzahl der 12 verfügbaren Spalten angeben, die Sie überspannen möchten. Beispielsweise würden drei gleiche Spalten drei verwenden
.col-sm-4 - Spaltenbreiten werden in Prozent angegeben, sodass sie immer fließend und relativ zu ihrem übergeordneten Element bemessen sind
Grundstruktur eines Bootstrap-Grids
Das Folgende ist eine grundlegende Struktur eines Bootstrap-Rasters:
<div class="container">
<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>
</div>
Um also das gewünschte Layout zu erstellen, erstellen Sie einen Container ( <div
class="container">). Erstellen Sie als Nächstes 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.
Rasteroptionen
Die folgende Tabelle fasst zusammen, wie das Bootstrap-Grid-System auf mehreren Geräten funktioniert:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| 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 |
| # 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 zeigen Beispiele von Grid-Systemen für verschiedene Geräte: