Beispiele für Bootstrap-Raster
Grundlegende Grid-Layouts, um Sie mit dem Bauen innerhalb des Bootstrap-Grid-Systems vertraut zu machen.
In diesen Beispielen wird die .themed-grid-col
Klasse zu den Spalten hinzugefügt, um ein gewisses Thema hinzuzufügen. Dies ist keine Klasse, die standardmäßig in Bootstrap verfügbar ist.
Fünf Gitterebenen
Das Bootstrap-Grid-System hat fünf Ebenen, eine für jede Reihe von Geräten, die wir unterstützen. Jede Ebene beginnt mit einer minimalen Darstellungsbereichsgröße und gilt automatisch für die größeren Geräte, sofern sie nicht überschrieben wird.
Drei gleiche Spalten
Erhalten Sie drei Spalten gleicher Breite, beginnend bei Desktops und Skalierung auf große Desktops . Auf Mobilgeräten, Tablets und darunter werden die Spalten automatisch gestapelt.
Alternativ drei gleiche Spalten
Durch die Verwendung der .row-cols-*
Klassen können Sie ganz einfach ein Raster mit gleichen Spalten erstellen.
.col
Kind von
.row-cols-md-3
.col
Kind von
.row-cols-md-3
.col
Kind von
.row-cols-md-3
Drei ungleiche Spalten
Holen Sie sich drei Spalten, beginnend bei Desktops und Skalierung auf große Desktops unterschiedlicher Breite. Denken Sie daran, dass sich die Rasterspalten für einen einzelnen horizontalen Block auf zwölf summieren sollten. Darüber hinaus beginnen die Spalten unabhängig vom Ansichtsfenster zu stapeln.
Zwei Spalten
Holen Sie sich zwei Spalten, beginnend bei Desktops und Skalierung auf große Desktops .
Volle Breite, einspaltig
Für Elemente mit voller Breite sind keine Rasterklassen erforderlich.
Zwei Spalten mit zwei verschachtelten Spalten
Laut Dokumentation ist das Verschachteln einfach – fügen Sie einfach eine Reihe von Spalten in eine vorhandene Spalte ein. Dadurch erhalten Sie zwei Spalten , die bei Desktops beginnen und zu großen Desktops skalieren , mit zwei weiteren (gleichen Breiten) innerhalb der größeren Spalte.
Bei Mobilgeräten, Tablets und darunter, werden diese Spalten und ihre verschachtelten Spalten gestapelt.
Gemischt: Mobil und Desktop
Das Grid-System von Bootstrap v4 hat fünf Stufen von Klassen: xs (extra klein, dieser Klassen-Infix wird nicht verwendet), sm (klein), md (mittel), lg (groß) und xl (extra groß). Sie können nahezu jede Kombination dieser Klassen verwenden, um dynamischere und flexiblere Layouts zu erstellen.
Jede Klasse von Klassen wird hochskaliert, d. h. wenn Sie vorhaben, die gleichen Breiten für md, lg und xl festzulegen, müssen Sie nur md angeben.
Gemischt: Handy, Tablet und Desktop
Dachrinnen
Mit .gx-*
Klassen können die horizontalen Dachrinnen angepasst werden.
.col
mit
.gx-4
Dachrinnen
.col
mit
.gx-4
Dachrinnen
.col
mit
.gx-4
Dachrinnen
.col
mit
.gx-4
Dachrinnen
.col
mit
.gx-4
Dachrinnen
.col
mit
.gx-4
Dachrinnen
Verwenden Sie die .gy-*
Klassen, um die vertikalen Dachrinnen zu steuern.
.col
mit
.gy-4
Dachrinnen
.col
mit
.gy-4
Dachrinnen
.col
mit
.gy-4
Dachrinnen
.col
mit
.gy-4
Dachrinnen
.col
mit
.gy-4
Dachrinnen
.col
mit
.gy-4
Dachrinnen
Mit .g-*
Klassen lassen sich die Dachrinnen in beide Richtungen verstellen.
.col
mit
.g-3
Dachrinnen
.col
mit
.g-3
Dachrinnen
.col
mit
.g-3
Dachrinnen
.col
mit
.g-3
Dachrinnen
.col
mit
.g-3
Dachrinnen
.col
mit
.g-3
Dachrinnen
Behälter
Zusätzliche Klassen, die in Bootstrap v4.4 hinzugefügt wurden, erlauben Container, die bis zu einem bestimmten Haltepunkt 100 % breit sind. v5 fügt einen neuen xxl
Haltepunkt hinzu.