Bootstrap 5-Grid-System

Gittersystem

Das Bootstrap-Gittersystem ist mit Flexbox aufgebaut und ermöglicht auf der Seite bis zu 12 Spalten.

Wenn Sie nicht alle 12 Spalten einzeln verwenden möchten, können Sie diese Spalten zusammenfassen, um breitere Spalten zu erstellen:

Das Gittersystem ist schnell reagierend und die Spalten werden automatisch neu angeordnet, je nach Bildschirmgröße.

Stellen Sie sicher, dass die Summe 12 oder weniger beträgt (es ist nicht erforderlich, alle 12 verfügbaren Spalten zu verwenden).

Gitterklasse

Das Bootstrap 5-Gittersystem bietet sechs Klassen:

  • .col- (Über-kleine Geräte - Bildschirmbreite kleiner als 576px)
  • .col-sm- (Kleine Geräte - Bildschirmbreite ist gleich oder größer als 576px)
  • .col-md- (Mittlere Geräte - Bildschirmbreite ist gleich oder größer als 768px)
  • .col-lg- (Große Geräte - Bildschirmbreite ist gleich oder größer als 992px)
  • .col-xl- (Über-große Geräte - Bildschirmbreite ist gleich oder größer als 1200px)
  • .col-xxl- (Extra-große Geräte - Bildschirmbreite ist gleich oder größer als 1400px)

Durch Kombination der obigen Klassen können Sie dynamischere und flexiblere Layouts erstellen.

Hinweis:Jede Klasse wird proportional vergrößert, daher müssen Sie nur sm angeben, um die gleiche Breite für sm und md zu setzen.

Die grundlegende Struktur des Bootstrap 5-Gitters

Hier ist die grundlegende Struktur des Bootstrap 5-Gitters:

<!-- Steuert die Spaltenbreite und deren Anzeige auf verschiedenen Geräten -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- oder lassen Sie Bootstrap die Layoutverarbeitung automatisch durchführen -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Versuchen Sie es selbst

Erster Beispiel: Ein Zeilen (<div class = "row">). Fügen Sie dann die erforderliche Anzahl der Spalten hinzu (mit .col-*-* Klassenbezeichner). Das erste Stern (*) stellt die Reaktionsschnelligkeit dar: sm, md, lg, xl oder xxl, und das zweite Stern ein Zahl, deren Summe in jeder Zeile 12 betragen sollte.

zweiter Beispiel: Nicht jedem col eine Zahl hinzufügen, um Bootstrap die Layoutverarbeitung zu überlassen und gleich breite Spalten zu erstellen: zwei "col" Element = 50% der Breite jeder Spalte, und drei Spalten = 33.33% der Breite jeder Spalte. Vier Spalten = 25% Breite usw. Sie können auch .col-sm|md|lg|xl|xxl Macht die Spalten reaktionsschnell.

Gitteroptionen

Nachstehend wird zusammengefasst, wie das Bootstrap 5 Gittersystem bei verschiedenen Bildschirmgrößen funktioniert:

Extra klein (<576px) Klein (>=576px) Mittel (>=768px) Groß (>=992px) Über groß (>=1200px) Extra groß (>=1400px)
Klassenpräfix .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Gitterverhalten Immer horizontal Faltenbeginn, horizontal über der Schwellenwerte Faltenbeginn, horizontal über der Schwellenwerte Faltenbeginn, horizontal über der Schwellenwerte Faltenbeginn, horizontal über der Schwellenwerte Faltenbeginn, horizontal über der Schwellenwerte
Containerbreite Keine (auto) 540px 720px 960px 1140px 1320px
Verwendbar für Handy im Hochformat Handy im Querformat Tablet Laptop Laptop und Desktop Laptop und Desktop
Spaltennummer 12 12 12 12 12 12
Gitterbreite 1.5rem (jenseits jeder Spalte 0.75rem) 1.5rem (jenseits jeder Spalte 0.75rem) 1.5rem (jenseits jeder Spalte 0.75rem) 1.5rem (jenseits jeder Spalte 0.75rem) 1.5rem (jenseits jeder Spalte 0.75rem) 1.5rem (jenseits jeder Spalte 0.75rem)
Einbettbar Ja Ja Ja Ja Ja Ja
Verschiebung Ja Ja Ja Ja Ja Ja
Spaltensortierung Ja Ja Ja Ja Ja Ja