Lernen Sie das Bootstrap 4 Grid System in 10 Minuten

Das Bootstrap 4 Grid-System wird für reaktionsschnelle Layouts verwendet.

Ein ansprechendes Layout gibt an, wie Elemente auf der Seite mit unterschiedlichen Auflösungen ausgerichtet werden. Es ist wichtig, dass Sie wissen, wie Sie das Raster verwenden, bevor Sie sich mit einer anderen Bootstrap 4-Komponente vertraut machen. Unabhängig davon, welches Element Sie verwenden, müssen Sie es irgendwo auf dem Bildschirm platzieren.

Lass uns anfangen!

Inhaltsverzeichnis

  • Bootstrap 4-Container
  • Bootstrap 4 Zeilen
  • Bootstrap 4 Spalten
  • Weiterführende Literatur

Das Bootstrap 4-Raster besteht aus Containern, Zeilen und Spalten. Wir werden sie einzeln nehmen und erklären.

Bootstrap 4-Container

Ein Bootstrap 4-Container ist ein Element der Klasse .container. Der Container ist die Wurzel des Bootstrap 4-Rastersystems und wird zur Steuerung der Breite des Layouts verwendet.

Der Bootstrap 4-Container enthält alle Elemente einer Seite. Dies bedeutet, dass Ihre Seite die folgende Struktur haben sollte: Zuerst den Hauptteil der HTML-Seite, darin sollten Sie den Container und alle anderen Elemente im Container hinzufügen.

 ... 

Die einfache .containerKlasse legt die Breite des Layouts abhängig von der Breite des Bildschirms fest. Der Inhalt wird in der Mitte der Seite platziert und horizontal ausgerichtet. Zwischen dem Bootstrap 4-Container und dem linken und rechten Rand der Seite ist der gleiche Abstand.

Die .containerBreite wird verkleinert, wenn sich die Bildschirmbreite verringert und auf Mobilgeräten die volle Breite erreicht. Die Breite des Containers wird in der Bootstrap 4-Bibliothek für jede Bildschirmgröße definiert. Die genauen Größen sehen Sie hier.

Ein Container mit voller Breite nimmt unabhängig von der Bildschirmbreite 100% der Bildschirmgröße ein. Um es zu verwenden, müssen Sie die Klasse hinzufügen. container-fluid.

 Hello! I am in a simple container. Hello! I am in a full-width container. 

Sie können den CodePen hier anzeigen.

Um die Unterschiede zwischen den beiden Containertypen zu erkennen, können Sie den Stift in Ihrer Konsole öffnen und zwischen den Bildschirmgrößen wechseln.

Bootstrap 4 Zeilen

Bootstrap 4-Zeilen sind horizontale Bereiche des Bildschirms. Sie werden nur als Wrapper für Spalten verwendet. Um sie zu verwenden, benötigen Sie die .rowKlasse.

 ... 

Hier sind die wichtigsten Dinge, die Sie bei Bootstrap 4-Zeilen beachten müssen:

  • Sie werden nur zum Enthalten von Spalten verwendet. Wenn Sie andere Elemente zusammen mit Spalten in die Zeile einfügen, erhalten Sie nicht das erwartete Ergebnis.
  • Sie müssen in Behälter gegeben werden. Wenn Sie dies nicht tun, erhalten Sie einen horizontalen Bildlauf auf Ihrer Seite. Dies liegt daran, dass Zeilen einen negativen linken und rechten Rand von 15 haben. Der Container hat 15px-Auffüllungen, sodass er den Rändern entgegenwirkt.
  • Die Spalten müssen untergeordnete Elemente der Zeile sein. Andernfalls werden sie nicht ausgerichtet. Die Zeilen und Spalten werden erstellt, um in dieser strengen Hierarchie zusammenzuarbeiten.

Bootstrap 4 Spalten

Wir können jetzt zum schönen Teil dieses Tutorials kommen, den Bootstrap 4-Spalten. Spalten sind großartig! Sie helfen Ihnen, den Bildschirm horizontal zu teilen.

Wenn Sie eine einzelne Spalte in Ihre Zeile einfügen, nimmt diese die gesamte Breite ein. Wenn Sie zwei Spalten hinzufügen, nehmen diese jeweils die Hälfte der Breite ein. Und so gilt es für eine beliebige Anzahl von Spalten.

 ... ... ... ... ... ... ... ... 

Sie können den Code live auf CodePen sehen.

Randnotiz: Spalten sind nicht farbig. Ich habe gerade Farben für eine visuell ansprechendere Beschreibung hinzugefügt, damit sie hübsch aussehen.

Festlegen von Größen für Spalten

Durch die Verwendung der .colKlasse wird die Breite für die Spalte dynamisch festgelegt. Das bedeutet, dass abhängig von der Anzahl der Spalten in einer Zeile die Breite einer Spalte die Breite des Containers geteilt durch die Anzahl der Spalten ist.

Es gibt aber auch eine andere Möglichkeit, Spalten zu definieren. Sie können Klassen für Spalten verwenden und deren Größe definieren.

Standardmäßig besteht das Bootstrap 4-Raster aus 12 Spalten. Sie können für Ihre Spalte eine beliebige Größe von 1 bis 12 auswählen. Wenn Sie 3 gleiche Spalten möchten, können Sie .col-4für jede eine verwenden (da jeweils 3 * 4 Spalten = 12 sind). Oder Sie können verschiedene Größen für sie einstellen. Hier sind einige Beispiele:

 ... ... ... ... ... ... ... ... 

Sie können den Code live auf CodePen sehen.

Wenn die Summe der Spalten in Ihrer Zeile nicht 12 erreicht, füllen sie nicht die gesamte Zeile aus. Wenn die Summe der Spalten 12 überschreitet, wird zur nächsten Zeile übergegangen. In der ersten Zeile werden nur die ersten Elemente angezeigt, die 12 oder weniger ergeben.

Festlegen von Haltepunkten für Spalten

Wenn Sie das obige Beispiel verwenden und es auf Mobilgeräten anzeigen möchten, können Probleme auftreten. Durch das Anzeigen von fünf Spalten auf Mobilgeräten wird der Inhalt unlesbar.

Hier kommt eine der leistungsstärksten Bootstrap 4-Komponenten ins Spiel. Um unterschiedliche Layouts auf unterschiedlichen Bildschirmen zu haben, müssen Sie keine Medienabfragen schreiben, sondern können die Spaltenunterbrechungspunkte verwenden.

Ein Haltepunkt ist eine Bootstrap 4-Variable, die für eine Bildschirmauflösung steht. Wenn Sie einen Haltepunkt für eine Klasse angeben, weisen Sie die Klasse an, nur für Auflösungen aktiv zu sein, die mindestens so groß sind wie die Zahl, die der Haltepunkt enthält.

Die einfachste Klasse, die wir lernen werden, ist die .col-[breakpoint]Klasse. Wenn Sie diese Klasse verwenden, definieren Sie das Verhalten für die Spalten nur, wenn sie auf Geräten angezeigt werden, deren Auflösung mindestens dem definierten Haltepunkt entspricht. Bis zum angegebenen Haltepunkt werden Ihre Spalten standardmäßig vertikal ausgerichtet. Und nach Ihrem Haltepunkt werden sie aufgrund der Klasse horizontal ausgerichtet.

Bootstrap hat 4 Haltepunkte, die Sie verwenden können:

  • .col-sm für größere Mobiltelefone (Geräte mit Auflösungen ≥ 576px);
  • .col-md für Tabletten (≥768px);
  • .col-lg für Laptops (≥992px);
  • .col-xl für Desktops (≥1200px)

Angenommen, Sie möchten zwei Spalten nacheinander vertikal auf kleinen Bildschirmen und auf größeren Bildschirmen in derselben Zeile anzeigen. Sie müssen den Haltepunkt angeben, an dem sich die Spalten in derselben Zeile befinden.

In unserem Beispiel verwenden wir den .col-lgHaltepunkt und sehen, wie die Spalten auf verschiedenen Bildschirmen aussehen. Bei Auflösungen, die unter dem angegebenen Haltepunkt (<992px) liegen, werden die Spalten vertikal angezeigt. Dies bedeutet, dass auf Mobilgeräten und Tablets die Spalten folgendermaßen aussehen:

Bei Geräten mit einer Auflösung, die höher oder gleich dem Haltepunkt (≥992px) ist, werden die Spalten in derselben Zeile angezeigt. Dies bedeutet, dass Sie auf Laptops und Desktops das folgende Ergebnis erhalten:

 ... ... 

Sie können den Code live auf CodePen sehen.Wenn Sie den Codepen in einem anderen Fenster öffnen und die Seite mit unterschiedlichen Auflösungen sehen, ändern die Spalten ihre Position.

Wenn Sie möchten .col-sm, dass die beiden Spalten in derselben Zeile .col-mdangezeigt werden, beginnend mit größeren Mobiltelefonen, die Sie verwenden würden , für Tablets und für besonders große Bildschirme .col-xl.

Festlegen von Größen und Haltepunkten für Spalten

Sie können die Größen und Haltepunkte kombinieren und eine einzelne Klasse mit dem Format verwenden .col-[breakpoint]-[size].

Wenn Sie beispielsweise möchten, dass drei Spalten unterschiedlicher Größe ab der Laptop-Auflösung in einer Zeile ausgerichtet werden, müssen Sie Folgendes tun:

 ... ... ... 

Sie erhalten dieses Ergebnis bei Auflösungen <992px:

Und für Bildschirme mit ≥992px:

Auch hier können Sie den Code live auf CodePen sehen.

Was aber, wenn Sie eine Spalte pro Zeile bei kleinen mobilen Auflösungen, zwei Spalten pro Zeile bei Tablets und vier bei Laptops oder Geräten mit höheren Auflösungen anzeigen möchten?

Anschließend fügen Sie mehrere Klassen für eine einzelne Spalte hinzu, um das Verhalten für jede Auflösung zu beschreiben. Wenn Sie mehrere Klassen verwenden, geben Sie an, dass der Inhalt sechs Steckplätze auf Tablets und drei auf Laptops belegt.

 ... ... ... ... 

Das Ergebnis wird auf Tablets folgendermaßen angezeigt:

Und so auf Laptops und höheren Auflösungen:

Dieses Beispiel ist auch live auf CodePen.

Als Übung können Sie versuchen, Zeilen mit unterschiedlicher Anzahl von Spalten je nach Bildschirmgröße zu erstellen und das Verhalten in Ihrer Browserkonsole zu überprüfen.

Spalten versetzen

Wenn Sie nicht möchten, dass Ihre Spalten nebeneinander stehen, können Sie die Klasse .offset-[breakpoint]-[size]zusammen mit dem verwenden .col-[breakpoint]-[size].

Die Verwendung dieser Klasse entspricht dem Hinzufügen einer leeren Spalte vor Ihrer Spalte. Hier ist ein einfaches Beispiel:

 ... ... 

Sie können den Code live auf CodePen sehen.

Sie können die Klasse für jede Spalte in der Zeile verwenden. Hier sind einige weitere Beispiele:

 ... ... ... ... ... 

Verschachtelungssäulen

Dies mag überraschen, aber Sie können eine Zeile in eine Spalte einfügen!

Die betreffende Zeile (die die Breite der übergeordneten Spalte hat) wird dann in 12 (kleinere) Spalten unterteilt, auf die Sie in den .col-* Klassen verweisen können .

Schauen wir uns an, was passiert, wenn wir eine neue Zeile in eine Spalte einfügen:

 ... ... ... ... 

Sie können den Code live auf CodePen sehen.

Wenn Sie dies wissen, können Sie viele Ebenen tief gehen, um Ihre Informationen zu organisieren. Die Spalten bieten eine einfache Möglichkeit, Ihren Speicherplatz zu verwalten.

Damit sind die Grundkenntnisse zum Bootstrap 4-Responsive-Grid-System zusammengefasst. Wenn Sie Fragen haben, lassen Sie es mich bitte in den Kommentaren wissen, ich werde gerne antworten.

Weiterführende Literatur

Wenn Sie mehr Zeit haben, finden Sie hier einige nützliche Ressourcen:

  • Offizielle Grid-Dokumentation von GetBootstrap
  • Video-Tutorial von Scrimba

Dieser Artikel wurde ursprünglich im BootstrapBay-Blog veröffentlicht. Es ist Teil einer größeren Reihe von Bootstrap 4-Tutorials mit dem Namen 14 Days of Bootstrap 4. Wenn Sie weitere Informationen zu den Bootstrap 4-Komponenten erhalten möchten, sind diese Artikel ein guter Ausgangspunkt.

Wenn Sie Ihre Entwicklung mit einer Bootstrap-Vorlage beschleunigen möchten, können Sie unseren Marktplatz besuchen.

Aber bevor Sie tiefer eintauchen, nehmen Sie sich einen Moment Zeit, um Ihre neu erworbenen Fähigkeiten zu feiern!?