Bootstrap 5 Grid System | Erklärt

Das Gittersystem von Bootstrap wird mit der Flexbox erstellt. Es wandelt die Webseite in 12 Spalten um. Ein Netzsystem ist ein zweidimensionales Layout, das bedeutet, dass es gleichzeitig mit Zeilen und Spalten funktionieren kann. Ein Benutzer kann Spalten zusammenführen, um die erforderlichen Ergebnisse oder ein bestimmtes Layout zu erhalten.

Netzsystem

Das Gittersystem von Bootstrap unterteilt die Seite in 12 Spalten. Wie im folgenden Beispiel .Die COL -Klasse wird verwendet, um Spalten zu erstellen, und das gesamte Netzsystem hängt davon ab .Col -Klasse. Dieses Netzsystem ist der beste Ansatz, um den Inhalt horizontal zu stapeln und die Seitenauslastung maximal zu ermöglichen.

Code

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col

Um unterschiedliche Layouts zu machen, verwenden wir .Reihe Und .col Klasse.

Col -Klasse ohne Größe

Wenn Sie die Größe der Spalten nicht angegeben haben, .col Die Klasse teilt die Zeile automatisch gleich nach der Anzahl der Divs mit .col Klassen darin.

Code

.col
.col
.col

In diesem Beispiel füge ich nur drei Divs mit dem hinzu .col Klasse, ohne die Anzahl der Spalten anzugeben, aber die .col Die Klasse gibt automatisch die Verschmelzung von 4 Spalten zu jedem Div an und deckt 12 Spalten gemeinsam ab.

COL -Klasse mit Größe

Wenn die Spaltengrößen angegeben sind, dann .Die COL-Klasse teilt die Zeile nach der angegebenen Größe von 0-12.

Code

.col-4
.col-6
.col-2

In diesem Beispiel füge ich drei Divs mit hinzu mit .col Klasse und geben Sie die Anzahl der Spalten als 4, 6 und 2 an. Jetzt decken diese drei Spalten noch 12 Spalten Platz ab, jetzt jedoch mit unterschiedlichen Größen. Dies hilft einem Benutzer, den Inhalt auf einer Seite zu verwalten und ihn maximal zu nutzen.

Beispiel 2

Dieses Beispiel ist das Problem, in dem die Größe der Divs 12 übersteigt.

Code

.col-4
.col-6
.col-5

In diesem Beispiel decken die ersten 2 Divs bereits 10 Spalten in einer Reihe ab und lassen den Raum für zwei weitere Spalten und das dritte Div enthält die Spalten Größe 5, was dazu führt 2 Spalten Platz in der ersten Reihe leer. Um diese Art von Problem zu vermeiden, stellen Sie immer sicher.

COL -Klasse mit Haltepunkten

.col Die Klasse wird auch mit verschiedenen Haltepunkten verwendet, um die Inhaltsansicht auf verschiedenen Bildschirmen zu steuern.

• .col-xxl
• .col-xl
• .col-lg
• .col-md
• .col-sm

Code

.col-md
.col-md
.col-md

In obigem Beispiel werden drei Divs mit Verwendung erstellt .col-md Klasse ist genau wie möglich wie möglich .col Klasse aber der Unterschied zwischen einfach .col Klasse und .col-md Klasse ist das .col Klasse verteilen Spalten gleichermaßen auf jedes DIV und handeln dann bei jeder Bildschirmgröße, aber gleichermaßen .col-md Die Klasse verteilen auch Spalten gleichermaßen unter jedem Div xxl, xl, lg Und md Bildschirmgrößen, aber sobald es unter mittlerer Bildschirmgröße geht, decken alle Divs alle 12 Spalten ab, was dazu führt, dass drei Zeilen erstellt und sie vertikal gestapelt werden.

COL -Klasse mit Haltepunkten und Größen

.col Die Klasse wird auch mit verschiedenen Haltepunkten verwendet, um die Inhaltsansicht auf verschiedenen Bildschirmen zu steuern, aber um diese Klassen in Aktion zu sehen, müssen auch ihre Größen festlegen.

• .col-*
• .col-xxl-*
• .col-xl-*
• .col-lg-*
• .col-md-*
• .col-sm-*

Ersetzen Sie * durch die Nummer von 0-12.

Code

.Col-MD-4
.Col-MD-6
.Col-MD-2

Im obigen Beispiel bewerbe ich mich .col-md-* Klasse auf drei Divs mit der Größe 4,6,2, wie gezeigt wurde, dass diese Klasse auf doppeltes extra großer (xxl), extra großer (xl), großer (lg) und mittlerer Bildschirm (MD) anwendbar ist, sobald die Bildschirmgröße Geht unter dem Bildschirm mit dem mittleren (MD) alle Divs die Größe des Selbst und decken jeweils 12 Spalten ab, was zu 3 Zeilen führt, und jede Zeile ist vertikal gestapelt. So werden dynamische und flexible Layouts erstellt.

Abschluss

Um in einem Bootstrap -Raster zu arbeiten, verwenden Sie .Reihe Klasse und wickeln Sie es um .col Klasse Wenn Sie jedem DIV gleiche Spalten zuweisen möchten, aber wenn Sie jedem Div eine unterschiedliche Anzahl von Spalten zuweisen möchten, verwenden .col- Größe (0-12) zu Divs als Ihre Anforderung. Wenn Sie jedoch flexiblere und dynamische Layout verwenden möchten .col Klasse mit Breakpoints (xxl/xl/lg/md/sm), Plus geben ihre Größen an (0-12) zu .Col- Breakpoint-Größe.