Bootstrap 5 Spalten und Gittersystem | Erklärt

Bootstrap 5 ist die neueste Version des Bootstrap -Frameworks, mit der seine Benutzer erstaunliche Websites mit schnellen CSS -Stylesheets und verbesserten Reaktionsfähigkeit erstellen können. Bootstrap erstellt ein Gittersystem, das eine Webseite in verschiedene Zeilen und Spalten unterteilt, die in einem Container eingewickelt sind. In diesem Beitrag werden das Netzsystem in Bootstrap 5 zusammen mit seinen verschiedenen Komponenten detailliert erörtert.

Netzsystem in Bootstrap 5

Ein Netzsystem in Bootstrap 5 unterteilt eine Seite in Zeilen und Spalten, wobei jede Zeile 12 Spalten aufweist. Sie können entweder alle 12 Spalten verwenden, wenn Sie dies wünschen. Wenn nicht, können Sie Spalten kombinieren, um breitere Spalten zu erstellen. Sie müssen Spalten so verwenden, dass die Summe bis zu 12 oder weniger als 12 erhöht. Zum Beispiel können Sie alle 12 Spalten mit einer Breite von 1 oder 2 Spalten mit einer Breite von 6 verwenden. Was auch immer die Kombination ist, die Gesamtsumme sollte 12 oder weniger betragen.

Dieses Netzsystem besteht aus Flexbox. Hier ist eine visuelle Darstellung eines Netzsystems.

Netzklassen in Bootstrap 5

Zum Zwecke der Verwendung des Netzsystems stehen mehrere Klassen zur Verfügung, die wir unten diskutiert haben. Alle diese Klassen können zusammengefasst werden, um flexiblere und reaktionsschnelle Strukturen zu gestalten.

1. -XS- Klasse

Diese Klasse wird verwendet, um ein Gittersystem für extra kleine Geräte mit einer Bildschirmbreite zu erstellen <576px.

2. -SM- Klasse

Diese Klasse wird verwendet, um ein Netzlayout für kleine Geräte mit einer Bildschirmbreite> = 576px zu erstellen.

3. -MD-Klasse

Diese Klasse wird verwendet, um ein Gittersystem für mittlere Geräte mit einer Bildschirmbreite> = 768px zu erstellen.

4. -LG-Klasse

Diese Klasse wird verwendet, um ein Gittersystem für große Geräte mit einer Bildschirmbreite> = 992px zu erstellen.

5. -XL- Klasse

Diese Klasse wird verwendet, um ein Gittersystem für extra große Geräte mit einer Bildschirmbreite> = 1200px zu erstellen.

6. -xxl- Klasse

Diese Klasse wird verwendet, um ein Gittersystem für extra große Geräte mit einer Bildschirmbreite> = 1400px zu erstellen.

Notiz: Die oben genannten Klassen haben die Fähigkeit, die Breite zu erhöhen. Wenn Sie daher beispielsweise die gleiche Breite für mittlere und große Klassen verwenden möchten, müssen Sie die Breite nur für mittlere Klasse angeben.

Komponenten eines Gittersystems

Ein Netzsystem arbeitet mit drei Komponenten zusammen, die in diesem Abschnitt erörtert werden.

1. Behälter

Ein Container ist ein grundlegendes Element eines Gittersystems, ohne das das System nicht funktioniert. Diese wickeln alle Inhalte einer Website in sich ein. Container wickeln Inhalte so ein, dass diese Zeilenelemente und Zeilenelemente Spaltenelemente halten.

2. Reihen

Zeilen in einem Gittersystem werden als horizontale Gruppe von Spalten bezeichnet. Diese Zeilen können mit dem generiert werden .Reihe Klasse und werden in einem Behälter entweder mit dem eingewickelt .Container, oder .Containerfluid Klasse.

3. Säulen

Ein Gittersystem besteht aus 12 Spalten, die in Zeilen eingewickelt sind. Um diese Spalten zu erstellen .col Die Klasse wird zusammen mit der Kombination eines der im vorherigen Abschnitt genannten Klassen verwendet. Wenn Sie beispielsweise ein Layout für extra kleine Geräte erstellen, verwenden Sie beispielsweise .col-xs Klasse.

Erstellen eines grundlegenden Netzsystems in Bootstrap 5

Hier zeigen wir, wie Sie in zwei verschiedenen Szenarien ein grundlegendes Gittersystem erstellen können.

Szenario 1

Wenn Sie die Breite der Spalten steuern und das Layout für verschiedene Arten von Geräten angeben möchten, die sie anzeigen.

Auf diese Weise können Sie eine grundlegende Struktur eines Gittersystems erstellen, wenn Sie selbst die Spaltenbreiten für verschiedene Gerätetypen angeben möchten. Der .Reihe Die Klasse wird verwendet, um Zeilen zu generieren, zum Beispiel erstellt das obige zwei Zeilen. Die erste Zeile gruppiert drei Spalten, während die zweite Zeile zwei Spalten hat.

Verwenden Sie beim Erzeugen von Spalten die .col Klasse zusammen mit Angabe des Gerätetyps und einer Zahl, die für jede Zeile insgesamt 12 addieren sollte.

Szenario 2

Wenn Sie möchten, dass Bootstrap die Breite der Spalten automatisch verarbeitet.

Wenn Sie nun die Größe des Geräts nicht angeben, und keine Zahl, die sich zu insgesamt 12 ergibt.

Einige Beispiele

Jetzt werden wir einige Beispiele untersuchen, um ein Netzsystem und Spalten in Bootstrap 5 besser zu verstehen.

Beispiel 1

Hier erzeugen wir vier Spalten gleicher Breite.

Html

Im obigen Code zum Erstellen von vier Spalten gleicher Breite verwenden wir die .Containerfluid Klasse, um einen Container mit voller Breite zu erhalten, der über die gesamte Ansichtsfensterbreite verfügt. Dann erzeugen wir eine Zeile und wickeln vier Spalten mit gleicher Breite in dieser Reihe ein. Jede Spalte wurde eine bestimmte Polsterung mit dem gegeben .P-4 Padding und Versorgungsklasse, außerdem hat jede Spalte eine Hintergrundfarbe und Textfarbe erhalten.

Ausgang

Spalten mit gleichen Breiten wurden erfolgreich erstellt.

Beispiel 2

Im obigen Beispiel haben wir gesehen, wie wir vier Spalten gleichermaßen gleichermaßen erstellen können. Lassen Sie uns diese Spalten nun reagieren.

Html

Wir machen die Spalten mit dem reagieren .Col-MD-3 Klasse, die angibt, dass die Spalten aufeinander stapeln werden, wenn die Bildschirmbreite weniger als 768px ist.

Ausgang

Wenn die Bildschirmbreite gleich und größer als 768px ist.

Wenn die Bildschirmbreite weniger als 768px beträgt.

Es wurden reaktionsschnelle Spalten erzeugt.

Beispiel 3

Die oben reagierenden Spalten waren gleich in der Breite. Generieren wir nun reaktionsschnelle Spalten mit ungleicher Breite.

Html

Der .Col-MD-4, Und .Col-MD-8 Klassen erstellen zwei reaktionsschnelle Spalten mit ungleicher Breite für mittlere Geräte.

Ausgang

Wenn die Bildschirmbreite> = 768px ist.

Wenn die Bildschirmbreite ist <768px.

Es wurden zwei reaktionsschnelle Spalten mit ungleicher Breite erzeugt.

Abschluss

Ein Netzsystem in Bootstrap 5 funktioniert mit drei Komponenten, bei denen es sich um einen Container, Zeilen und Spalten handelt. Es unterteilt eine Seite im Grunde in Zeilen und Spalten, wobei jede Zeile 12 Spalten aufweist. Die Säulen eines Gittersystems werden so verwendet, dass die Summe bis zu 12 oder weniger als 12 erhöht. Darüber hinaus werden einige Klassen verwendet, um ansprechende Layouts für verschiedene Gerätetypen zu erstellen. In diesem Beitrag werden das Netzsystem und die Spalten ausführlich mit Hilfe geeigneter Beispiele erörtert.