Bootstrap4 Grid-System
Bootstrap bietet ein responsives, auf Mobilgeräte ausgerichtetes, flexibles Rastersystem. Wenn die Bildschirm- oder Ansichtsfenstergröße zunimmt, wird das System automatisch in bis zu 12 Spalten unterteilt.
Wir können die Anzahl der Spalten auch nach unseren Anforderungen festlegen:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Das Grid-System von Bootstrap 4 ist responsiv, und Spalten werden je nach Bildschirmgröße automatisch neu angeordnet.
⟦0⇥Grid-Klassen
⟦0⇥Das Grid-System von Bootstrap 4 verfügt über die folgenden 5 Klassen:
- ⟦0⇥.col- für alle Geräte
- ⟦0⇥.col-sm- Tablets – Bildschirmbreite größer oder gleich 576px
- ⟦0⇥.col-md- Desktop-Monitore – Bildschirmbreite größer oder gleich 768px)
- ⟦0⇥.col-lg- große Desktop-Monitore – Bildschirmbreite größer oder gleich 992px)
- ⟦0⇥.col-xl- sehr große Desktop-Monitore – Bildschirmbreite größer oder gleich 1200px)
⟦0⇥Grid-System-Regeln
⟦0⇥Bootstrap4 Grid-System-Regeln:
- Jede Zeile des Rasters muss in einem Container platziert werden, der die
.container(feste Breite) oder.container-fluid(Vollbildschirmbreite)-Klasse, sodass einige Außen- und Innenabstände automatisch festgelegt werden können. - Verwenden Sie Zeilen, um horizontale Spaltengruppen zu erstellen.
- Inhalte müssen in Spalten platziert werden, und nur Spalten können direkte untergeordnete Elemente von Zeilen sein.
- Vordefinierte Klassen wie.rowund.col-sm-4können verwendet werden, um schnell Raster-Layouts zu erstellen.
- Spalten erzeugen Abstände zwischen Spalteninhalten durch Padding. Dieser Abstand wird durch den negativen Margin der Klasse.rowsversetzt, um den Offset der ersten und letzten Spalten festzulegen.
- Rasterspalten werden erstellt, indem die angegebenen 12 Spalten überspannt werden. Um beispielsweise drei gleich große Spalten festzulegen, müssen Sie drei.col-sm-4verwenden.
- Der größte Unterschied zwischen Bootstrap 3 und Bootstrap 4 besteht darin, dass Bootstrap 4 jetzt Flexbox (flexible Box) anstelle von Floats verwendet. Ein großer Vorteil von Flexbox ist, dass Rasterspalten ohne angegebene Breite automatisch aufSpalten mit gleicher Breite und Höhe gesetzt werden. Wenn Sie mehr über Flexbox erfahren möchten, können Sie unserCSS Flexbox Tutorial lesen 。
Die folgende Tabelle fasst zusammen, wie das Bootstrap-Rastersystem auf verschiedenen Geräten funktioniert:
| Extra kleine Geräte <576px |
Tablet ≥576px |
Desktop-Monitor ≥768px |
Großer Desktop-Monitor ≥992px |
Extra großer Desktop-Monitor ≥1200px |
|
|---|---|---|---|---|---|
| Maximale Breite des Containers | Keine (automatisch) | 540px | 720px | 960px | 1140px |
| Klassenpräfix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
| Anzahl der Spalten und | 12 | ||||
| Abstandsbreite | 30px (15px auf jeder Seite einer Spalte) | ||||
| Verschachtelbar | Ja | ||||
| Spaltenreihenfolge | Ja | ||||
Die folgenden Klassen können zusammen verwendet werden, um flexiblere Seitenlayouts zu erstellen.
Grundstruktur des Bootstrap 4 Grid
Der folgende Code ist die Grundstruktur des Bootstrap 4 Grid:
Bootstrap4 Grid Grundstruktur
Erstes Beispiel: Erstellen Sie eine Zeile (<div class="row">). Fügen Sie dann die erforderlichen Spalten hinzu (.col-*-*im Klassenattribut festgelegt). Der erste Stern (*) steht für das responsive Gerät: sm, md, lg oder xl, der zweite Stern (*) steht für eine Zahl, und die Zahlen in derselben Zeile ergeben zusammen 12.
Zweites Beispiel: Anstatt zu jedemcolZahlen hinzuzufügen, lassen Sie Bootstrap das Layout automatisch übernehmen; jede Spalte in derselben Zeile hat die gleiche Breite: zwei"col", jede wäre 50% breit. Drei"col"jede wäre 33.33% breit, vier"col"jede wäre 25% breit, und so weiter. Ähnlich können Sie.col-sm|md|lg|xlverwenden, um responsive Regeln für Spalten festzulegen.
Als Nächstes können wir uns Beispiele ansehen.
Erstellen Sie gleich breite Spalten, Bootstrap-Auto-Layout
Beispiel
Selbst ausprobieren »
Responsive Spalten mit gleicher Breite
Das folgende Beispiel zeigt, wie man responsive Spalten mit gleicher Breite auf Tablets und größeren Bildschirmen erstellt.Auf mobilen Geräten, d. h. wenn die Bildschirmbreite weniger als 576px beträgt, werden die vier Spalten vertikal gestapelt.:
Beispiel
Selbst ausprobieren »
Responsive Spalten mit ungleicher Breite
Das folgende Beispiel zeigt, wie man responsive Spalten mit ungleicher Breite auf Tablets und größeren Bildschirmen erstellt.Auf mobilen Geräten, d. h. wenn die Bildschirmbreite weniger als 576px beträgt, werden die zwei Spalten vertikal gestapelt.:
Beispiel
Selbst ausprobieren »
Tablet und Desktop
Das folgende Beispiel zeigt, dass auf Desktop-Monitoren die beiden Spalten jeweils 50% Breite einnehmen; auf Tablets ist die linke Spalte 25% und die rechte Spalte 75% breit; auf kleinen Geräten wie Mobiltelefonen werden sie vertikal gestapelt.
Beispiel
Selbst ausprobieren »
Tablet, Desktop, großer Desktop-Monitor, extragroßer Desktop-Monitor
Das folgende Beispiel zeigt Breitenverhältnisse von 25%/75%, 50%/50%, 33.33%/66.67% und 16.67%/83.33% auf Tablets, Desktops, großen Desktop-Monitoren bzw. extragroßen Desktop-Monitoren. Auf kleinen Geräten wie Mobiltelefonen werden sie vertikal gestapelt.
Beispiel
Selbst ausprobieren »
Offset-Spalten
Offset-Spalten werden überoffset-*-*-Klassen festgelegt. Der erste Stern (*) kannsm、md、lg、xlsein und gibt den Bildschirmgerätetyp an, und der zweite Stern (*) kann1bis11Zahlen.
Um Offsets auf großen Bildschirmen zu verwenden, verwenden Sie die.offset-md-*-Klassen. Diese Klassen erhöhen den linken Rand (margin) einer Spalte um*Spalten, wobei*der Bereich von1bis11。
Zum Beispiel: .offset-md-4 verschiebt .col-md-4 um vier Spaltenraster nach rechts.
Beispiel
Selbst ausprobieren »