Bootstrap-4 -Grid-System

Bootstrap-4-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:

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.

Grid-Klassen

Das Bootstrap 4 Grid-System hat fünf Klassen:

• .col-(extra kleine Geräte - Bildschirmbreite kleiner als 576px)
• .col-sm-(kleine Geräte – Bildschirmbreite gleich oder größer als 576 Pixel)
• .col-md-(mittlere Geräte – Bildschirmbreite gleich oder größer als 768 Pixel)
• .col-lg-(große Geräte – Bildschirmbreite gleich oder größer als 992 Pixel)
• .col-xl-(xlarge-Geräte – Bildschirmbreite gleich oder größer als 1200 Pixel)

Die oben genannten Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.

Tipp:sm Jede Klasse wird hochskaliert, wenn Sie also die gleichen Breiten für und festlegen möchten md, müssen Sie nur angeben sm.

Grid-Systemregeln

Einige Bootstrap 4 Grid-Systemregeln:

• 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 .row und .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
• Der größte Unterschied zwischen Bootstrap 3 und Bootstrap 4 besteht darin, dass Bootstrap 4 jetzt Flexbox anstelle von Floats verwendet. Ein großer Vorteil von Flexbox ist, dass Rasterspalten ohne eine bestimmte Breite automatisch als "Spalten gleicher Breite" (und gleicher Höhe) angeordnet werden. Beispiel: Drei Elemente mit .col-smjeweils automatisch 33,33 % breit ab dem kleinen Haltepunkt und darüber. Tipp: Wenn Sie mehr über Flexbox erfahren möchten, können Sie unser CSS Flexbox Tutorial lesen .

Grundstruktur eines Bootstrap 4 Grids

Das Folgende ist eine grundlegende Struktur eines Bootstrap 4-Rasters:

Erstes Beispiel: Erstellen Sie eine Zeile ( <div class="row">). Fügen Sie dann die gewünschte Anzahl von Spalten (Tags mit entsprechenden .col-*-*Klassen) hinzu. Der erste Stern (*) steht für die Reaktionsfähigkeit: sm, md, lg oder xl, während der zweite Stern eine Zahl darstellt, die in jeder Zeile immer 12 ergeben sollte.

Zweites Beispiel: Anstatt jedem eine Zahl hinzuzufügen col, überlassen Sie Bootstrap das Layout, um Spalten mit gleicher Breite zu erstellen: zwei "col"Elemente = 50 % Breite für jede Spalte. drei Spalten = 33,33 % Breite zu jeder Spalte. vier Spalten = 25 % Breite usw. Sie können auch verwenden .col-sm|md|lg|xl, um die Spalten responsive zu machen.

Rasteroptionen

Die folgende Tabelle fasst zusammen, wie das Bootstrap 4-Rastersystem bei verschiedenen Bildschirmgrößen funktioniert:

Beispiele

Die nächsten Kapitel zeigen Beispiele für Rastersysteme für verschiedene Geräte und Bildschirmbreiten:

• Horizontal gestapelt
• Extra kleines Layout
• Kleine Geräte
• Mittlere Geräte
• Große Geräte
• Extragroße Geräte
• Weitere Rasterbeispiele