Bootstrap 5-Gitter

Bootstrap 5-Grid-System

Das Bootstrap-Rastersystem ist mit Flexbox aufgebaut und ermöglicht auf der Seite maximal 12 Spalten.

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

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

Das Rastersystem 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 (wenn nicht alle 12 verfügbaren Spalten verwendet werden müssen).

Rasterklassen

Das Bootstrap 5 Rastersystem hat sechs Klassen:

  • .col- (Überkleine 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 768 Pixel)
  • .col-lg- (Große Geräte - Bildschirmbreite ist gleich oder größer als 992 Pixel)
  • .col-xl- (XL-Geräte - Bildschirmbreite ist gleich oder größer als 1200px)
  • .col-xxl- (XXL-Geräte - Bildschirmbreite ist gleich oder größer als 1400px)

Sie können die obigen Klassen kombinieren, um dynamischere und flexiblere Layouts zu erstellen.

Tipp:Jede Klasse wird proportional vergrößert, daher können Sie diese Klassen kombinieren, um dynamischere und flexiblere Layouts zu erstellen. sm und md Um gleiche Breiten zu setzen, müssen Sie nur angeben sm。

Die grundlegende Struktur des Bootstrap 5 Rasters

Hier ist die grundlegende Struktur des Bootstrap 5 Rasters:

<!-- Kontrollieren Sie die Breite der Spalten und ihre 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 Anordnung automatisch bearbeiten -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Erster Beispiel: Erstellen Sie eine Reihe (<div class="row">). Fügen Sie dann die erforderliche Anzahl der Spalten hinzu (mit den geeigneten .col-*-* Klassetags). Das erste Stern (*) steht für die Reaktivität: sm, md, lg, xl oder xxl, und das zweite Stern steht für die Zahl, deren Summe in jeder Zeile 12 betragen sollte.

Zweiter Beispiel: Nicht jedem col Eine Zahl hinzufügen, stattdessen Bootstrap die Anordnung bearbeiten lässt, um gleich breite Spalten zu erstellen: zwei "col" Element = jede col hat eine Breite von 50%, während drei cols eine Breite von 33.33% haben. Vier Spalten = 25% Breite usw. Sie können auch .col-sm|md|lg|xl|xxl Spalten machen responsive.

Nachfolgend haben wir einige grundlegende Beispiele für Bootstrap 5 Gitterlayout zusammengefasst.

Drei gleiche Spalten

Das folgende Beispiel zeigt, wie man auf allen Geräten und Bildschirmbreiten drei gleich breite Spalten erstellt:

Beispiel

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

Probieren Sie es selbst aus

Responsive Spalten

Der folgende Beispiel zeigt, wie man von einem Tablet aus vier gleich breite Spalten erstellt und diese auf einen großen Desktop erweitert.Bei Breiten unter 576px werden die Spalten auf einem Telefon oder Bildschirm automatisch übereinander gestapelt:

Beispiel

<div class="row">
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
  <div class="col-sm-3">.col-sm-3</div>
</div>

Probieren Sie es selbst aus

Zwei ungleiche responsive Spalten

Der folgende Beispiel zeigt, wie man auf einem Tablet zwei Spalten mit verschiedenen Breiten erhält und diese auf einen großen Desktop erweitert:

Beispiel

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Probieren Sie es selbst aus

Tipp:Sie werden im letzten Teil dieses Tutorials lernen, was darüber hinaus zu beachten ist Gitter-System Weitere Inhalte.