Bootstrap5-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 5 ist responsiv, und Spalten werden basierend auf der Bildschirmgröße automatisch neu angeordnet.
Bitte stellen Sie sicher, dass die Gesamtzahl der Spalten in jeder Zeile gleich oder kleiner als 12 ist.
⟦0⇥Grid-Klassen
Das Bootstrap 5 Grid-System hat die folgenden 6 Klassen:
- .col- für alle Geräte.
- .col-sm- Tablets - Bildschirmbreite gleich oder größer als 576px.
- .col-md- Desktop-Monitore - Bildschirmbreite gleich oder größer als 768px.
- .col-lg- Große Desktop-Monitore - Bildschirmbreite gleich oder größer als 992px.
- .col-xl- Extra große Desktop-Monitore - Bildschirmbreite gleich oder größer als 1200px.
- .col-xxl- Ultra-große Desktop-Monitore - Bildschirmbreite gleich oder größer als 1400px.
⟦0⇥Grid-System-Regeln
Bootstrap5 Grid-System-Regeln:
- Jede Grid-Zeile muss in einem Container mit der
.container(feste Breite) oder.container-fluid(full-width)-Klasse platziert werden, sodass einige Margins und Paddings automatisch gesetzt werden. - Verwenden Sie Zeilen, um horizontale Gruppen von Spalten zu erstellen.
- Inhalte sollten in Spalten platziert werden, und nur Spalten dürfen direkte Kinder von Zeilen sein.
- Vordefinierte Klassen wie.rowund.col-sm-4können verwendet werden, um schnell Raster-Layouts zu erstellen.
- Spalten erzeugen durch Padding Lücken zwischen Spalteninhalten. Diese Lücke wird durch.rowsnegative Margins auf der Klasse erreicht, die den Offset für die erste und letzte Spalte festlegt.
- 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.
- Bootstrap 5 und Bootstrap 4 verwenden Flexbox statt Floats. Ein großer Vorteil von Flexbox ist, dass Grid-Spalten ohne festgelegte Breite automatisch aufSpalten mit gleicher Breite und gleicher Höhegesetzt werden. Wenn Sie mehr über Flexbox erfahren möchten, können Sie unserCSS-Flexbox-Tutorial. 。
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 |
Ultra-großer Desktop-Monitor ≥1400px |
|
|---|---|---|---|---|---|---|
| Maximale Breite des Containers | Keine (automatisch) | 540px | 720px | 960px | 1140px | 1320px |
| Klassenpräfix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Anzahl der Spalten und | 12 | |||||
| Abstand zwischen Spalten | 1.5rem (.75rem auf jeder Seite einer Spalte) | |||||
| Verschachtelbar | Ja | |||||
| Spaltenreihenfolge | Ja | |||||
Wir kombinieren die oben genannten Klassen miteinander, um flexiblere Seitenlayouts zu erstellen.
Tipp:Jede Klasse skaliert proportional nach oben, wenn Sie also möchten, dass sm und md dieselbe Breite haben, müssen Sie nur sm angeben.
Grundstruktur des Bootstrap-5-Grids
Der folgende Code ist die Grundstruktur des Bootstrap-5-Grids:
Bootstrap5-Grid-Grundstruktur
Erstes Beispiel: Erstellen Sie eine Zeile (<div class="row">). Fügen Sie dann die Spalten hinzu, die Sie benötigen (.col-*-*in der Klasse festgelegt). Der erste Stern (*) gibt das responsive Gerät an: sm, md, lg oder xl, der zweite Stern (*) gibt eine Zahl an, und die Zahlen in derselben Zeile addieren sich zu 12.
Zweites Beispiel: Anstatt jedercolSpalte eine Zahl hinzuzufügen, lassen Sie Bootstrap das Layout automatisch verwalten; jede Spalte in derselben Zeile hat die gleiche Breite: zwei"col"Spalten haben jeweils 50% Breite. Drei"col"Spalten haben jeweils 33.33% Breite, vier"col"Spalten haben jeweils 25% Breite, und so weiter. Ebenso können Sie.col-sm|md|lg|xlverwenden, um die responsiven Regeln für Spalten festzulegen.
Als Nächstes können wir uns Beispiele ansehen.
Spalten mit gleicher Breite erstellen, Bootstrap Auto-Layout
Beispiel
Selbst ausprobieren »
Responsive Spalten mit gleicher Breite
Das folgende Beispiel zeigt, wie Sie gleich breite responsive Spalten auf Tablets und größeren Bildschirmen erstellen.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 auf Tablets und größeren Bildschirmen responsive Spalten mit ungleicher Breite erstellt.Auf mobilen Geräten, d. h., wenn die Bildschirmbreite weniger als 576px beträgt, werden die beiden Spalten vertikal gestapelt.:
Beispiel
Selbst ausprobieren »
Breite einer Spalte festlegen
Wenn Sie nur die Breite einer Spalte festlegen, teilen sich die anderen Spalten automatisch die verbleibende Breite gleichmäßig auf. Im folgenden Beispiel werden die Spaltenbreiten auf 25%, 50%, 25% festgelegt:
Beispiel
Selbst ausprobieren »
Tablet und Desktop
Das folgende Beispiel zeigt, dass auf Desktop-Displays zwei Spalten jeweils 50% der 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-Bildschirm, ultragroßer Desktop-Bildschirm
Das folgende Beispiel hat Breitenverhältnisse von 25%/75%, 50%/50%, 33.33%/66.67%, 16.67/83.33% auf Tablets, Desktops, großen Desktop-Bildschirmen bzw. extra großen Desktop-Bildschirmen; auf kleinen Geräten wie Mobiltelefonen werden sie vertikal gestapelt.
Beispiel
Selbst ausprobieren »
Verschachtelte Spalten
Das folgende Beispiel erstellt ein zweispaltiges Layout, bei dem eine Spalte zwei verschachtelte Spalten enthält:
Beispiel
Selbst ausprobieren »
Offset-Spalten
Offset-Spalten werden über dieoffset-*-*-Klasse festgelegt. Der erste Stern (*) kannsm、md、lg、xl, was den Bildschirmgerätetyp angibt; der zweite Stern (*) kann1bis11eine Zahl.
Um Offsets auf großen Bildschirmen zu verwenden, verwenden Sie die.offset-md-*-Klassen. Diese Klassen erhöhen den linken Außenabstand (margin) einer Spalte um*Spalten, wobei*der Bereich von1bis11。
Zum Beispiel: .offset-md-4 verschiebt .col-md-4 um vier Rasterspalten nach rechts.
Beispiel
Selbst ausprobieren »