Grid-System Bootstrap 4

Grid-Systeme ermöglichen uns, Website-Inhalte richtig zu organisieren. Die Aufteilung des Bildschirms in mehrere Zeilen und Spalten ist der beste Weg, um eine Vielzahl von Layouts für jede Art von Website zu erstellen.

Bootstrap's Grid-System hat eine Aufteilung von Spalten - bis zu 12 in jeder Zeile. Jede Spaltenbreite hängt von der Größe des Bildschirms ab.

Bootstrap ermöglicht es Benutzern, eine große Anzahl von Zeilen zu erstellen, abhängig vom Design der Website. In Bootstrap 4 arbeiten wir in Bezug auf Rem- und Em-Einheiten anstelle von Pixeln. Obwohl ein Teil des Klassennamens noch vorhanden ist, wurde eine neue Stufe "-sm" hinzugefügt, um mobile Geräte besser zu targetieren.

Das Grid System (Gitter System) ist eine der wichtigsten Definition im Bootstrap, es zeigt, wie Sie die Einheiten in die Interface aufgliedern können. Und wie Ihre Webseite mit den verschiedenen Bildschirmsgeräte kompatibel ist .

Das Gittersystem (Grid System) vom Bootstrap kann unendlich viele Zeilen haben aber nur 12 feste Spalten.

Zum Beispiel : eine Fläche, die in viele Zellen geteilt wird.

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

CSS-Klassen

Css Class Prefix Die Bezeichnung
.col- Für die besonders kleinen Geräte (Extra Small), mit der Breite von kleiner als 576px
.col-sm- Für die kleinen Geräte (Small), mit der Breite von kleiner als oder so gleich wie 567px.
.col-md- Für die durchschnittlichen Geräte (Medium), mit der Breite von größer als oder so gleich wie 768px
.col-lg- Für die größen Geräte (Large), mit der Breite von größer als oder so gleich wie  992px
.col-xl- Für die besonders größen Geräte (Extra Large), mit der Breite von größer als oder so gleich wie 1200px.

Grid-Sytem Regeln

Grundstruktur eines Bootstrap 4 Grid

Das Folgende ist eine grundlegende Struktur eines Bootstrap 4-Gitters

 <!-- Kontrollieren Sie die Spaltenbreite und wie sie auf verschiedenen Geräten erscheinen sollen -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Oder lassen Sie Bootstrap automatisch mit dem Layout umgehen -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div> 

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

Zweites Beispiel: Anstatt eine Zahl zu jedem col hinzuzufügen, lassen Sie bootstrap das Layout behandeln, um Spalten gleicher Breite zu erzeugen: zwei "col" Elemente = 50% Breite zu jedem col. drei Spalten = 33,33% Breite zu jeder Spalte. vier Spalten = 25% Breite usw. Sie können auch .col-sm | md | lg | xl verwenden, um die Spalten ansprechbar zu machen.

Grid-System Optionen

Die folgende Tabelle fasst zusammen, wie das Bootstrap 4-Grid-System über verschiedene Bildschirmgrößen hinweg funktioniert:

  Extra klein (<576px) Klein (>=576px) Medium (>=768px) Groß (>=992px) Extra groß (>=1200px)
Klassenpräfix .col- .col-sm- .col-md- .col-lg- .col-xl-
Rasterverhalten Immer horizontal Collapsed to start, horizontal über Breakpoints Collapsed to start, horizontal über Breakpoints Collapsed to start, horizontal über Breakpoints Collapsed to start, horizontal über Breakpoints
Container Weite None (auto) 540px 720px 960px 1140px
Passend für Portrait(hoch) Phones Landscape(quer) Phones Tablets Laptops Laptops and Desktops
Anzahl Spalten 12 12 12 12 12
Gitter Weite 30px (15px auf jeder Seite einer Spalte) 30px (15px auf jeder Seite einer Spalte) 30px (15px auf jeder Seite einer Spalte) 30px (15px auf jeder Seite einer Spalte) 30px (15px auf jeder Seite einer Spalte)

Auto Layout Spalten

In Bootstrap 4 gibt es eine einfache Möglichkeit, Spalten mit gleicher Breite für alle Geräte zu erstellen: Entfernen Sie einfach die Zahl aus .col-size- * und verwenden Sie nur die Klasse .col-size für eine bestimmte Anzahl von Spaltenelementen. Bootstrap erkennt, wie viele Spalten es gibt, und jede Spalte erhält die gleiche Breite. Die Größenklassen sm | md | lg | xl bestimmen, wann die Spalten reagieren sollen:

 <!-- Zwei Spalten: 50% Breite auf allen Bildschirmen, außer fÃŒr besonders kleine (100% Breite)-->
<div class="row">
  <div class="col-sm">1 von 2</div>
  <div class="col-sm">2 von 2</div>
</div>

<!-- Vier Spalten: 25% Breite auf allen Bildschirmen, außer für besonders kleine (100% Breite)-->
<div class="row">
  <div class="col-sm">1 von 4</div>
  <div class="col-sm">2 von 4</div>
  <div class="col-sm">3 von 4</div>
  <div class="col-sm">4 von 4</div>
</div>

<!-- Drei Spalten: 33% Breite auf allen Bildschirmen, außer für besonders kleine (100% Breite)-->
<div class="row">
  <div class="col-sm">1 von 3</div>
  <div class="col-sm">2 von 3</div>
  <div class="col-sm">3 von 3</div>
</div>
1 von 2
2 von 2
1 von 4
2 von 4
3 von 4
4 von 4
1 von 3
2 von 3
3 von 3