TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie verwende ich Bootstrap 5-Grid-Layouts?

446

Bootstrap 5 bietet ein leistungsstarkes Raster-Layout-System, mit dem Sie auf einfache Weise mobilfreundliche Layouts erstellen können. Es gibt sechs responsive Breakpoints für verschiedene Gerätegrößen im Bootstrap Grid-Layout-System. Es gibt 12 Spalten in jeder und durch Mischen und Anpassen können Sie verschiedene Layouts erstellen, die Sie wünschen. Das Rastersystem basiert auf einer Flexbox und ist voll responsive.

Bootstrap 5 Grid-Layout-Tutorial

Dieses Tutorial enthält die folgenden Themen:

  1. Grundlagen des Rasterlayouts
  2. Tier-5-Gittersystem
  3. Einfaches Raster mit gleicher Breite
  4. Eine Spaltenbreite und Größe anderer Spalten ändern
  5. Inhalt variabler Breite
  6. Raster mit mehreren Reihen gleicher Breite
  7. Gestapeltes horizontales Gitter
  8. Vertikale Ausrichtung
  9. Horizontale Ausrichtung
  10. Gitter ohne Dachrinnen
  11. Umgebrochenes Spaltenraster
  12. Neuordnung des Spalteninhalts innerhalb des Rasters
  13. Spaltenversatz
  14. Verschachtelung innerhalb des Rasters

1 Grundlagen des Bootstrap Grid-Systems

Das Grid-System verwendet drei CSS-Hauptklassen, um das erforderliche Layout zu erstellen – .container, .row und .col. Der Container umfasst das komplette Layout und dann die Zeilen und dann die Spalten.

  • Verwenden Sie die .container-Klasse zum Zentrieren des Inhalts mit fester Breite und .container-fluid für ein ansprechendes Layout in voller Breite.
  • Sie können die Klasse .row verwenden, um alle horizontalen Spalten einzuschließen, die in 12 gleiche Breiten unterteilt sind.
  • Platzieren Sie den tatsächlichen Inhalt innerhalb der Spalten mithilfe der Klassen .col oder .col-*. Eine Zeile kann beispielsweise zwei Spalten wie .col-8 + .col-4 enthalten. Die Spalte sollte das unmittelbare untergeordnete Element der Zeilenklasse sein.
  • Alle Spalten verwenden Flexbox, was bedeutet, dass die einfache Verwendung der .col-Klasse die Zeile in gleich breite Spalten unterteilt. Wenn Sie beispielsweise zwei .col-Klassen in einer Zeile verwenden, wird sie automatisch in zwei 50%-Bereiche aufgeteilt.
  • Sie können die Spaltenbreite wie .col-sm-8 explizit definieren, die 3/4 (75%) der Zeilenbreite einnimmt.
  • Standardmäßig haben Spalten und Zeilen Abstand und Rand für eine bessere Sichtbarkeit. Sie können den Rand und die Auffüllung entfernen, indem Sie eine zusätzliche Klasse „.noglutter” mit „.row” hinzufügen.
  • Bootstrap 5 bietet sechs Breakpoints – extra klein (xs), klein (sm), mittel (md), groß (lg), extra groß (xl) und extra extra groß (xxl).
  • Alle Ebenen von Breakpoints verwenden standardmäßig die .col-Klasse. Alle anderen verwendeten Klassen werden auf alle Geräte höherer Ebene angewendet. Beispielsweise wird .col-sm-4 (klein) auf kleine, mittlere, große und extragroße Geräte angewendet.

2-Tier-6-Gittersystem

Die folgende Tabelle zeigt die sechs Stufen von Breakpoints, die in Bootstrap 5 angeboten werden:

Netz Extra klein Klein Mittel Groß Extra groß Extra Extra Large
Haltepunkt <576px 576px 768px 992px 1200px 1400px
CSS-Klasse .mit dem- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Max. Containerbreite Keine (automatisch) 540px 720px 960px 1140px 1320 Pixel
  • Spalten – Jede Zeile ist in 12 gleich breite Spalten unterteilt.
  • Bundstegbreite – 15 Pixel auf jeder Seite der Spalte, insgesamt 30 Pixel.
  • Verschachtelung – Ja, Spalten können in andere Spalten verschachtelt werden.
  • Spaltenreihenfolge – Ja, der Inhalt einer beliebigen Spalte innerhalb einer Zeile kann neu angeordnet werden.

Lassen Sie uns verschiedene Beispiele zeigen, um die Gitter besser zu verstehen:

3 Einfaches Raster mit gleicher Breite

Erstellen Sie ein einfaches Raster mit gleichen Spalten, indem Sie einfach ".col" -Klassen verwenden. Bei Verwendung von „.col”-Klassen wird die Zeile automatisch in gleich breite Spalten unterteilt. Wenn Sie beispielsweise zwei „.col”-Klassen verwenden, wird die Zeile in zwei 1/2+1/2-Spalten unterteilt. Unten finden Sie Beispielcodes zum Erstellen von 1/2+1/2- und 1/3+1/3+1/3-Spalten mit einfachen „.col”-Klassen.

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

Die gleichen Spalten werden im Browser wie folgt angezeigt:

Wie verwende ich Bootstrap 5-Grid-Layouts?

4 Breite einer Spalte und Größe anderer Spalten ändern

Mit dem Bootstrap-Rastersystem können Sie die Breite für eine Spalte definieren und die verbleibenden Spalten innerhalb derselben Zeile werden automatisch angepasst. Wenn Sie beispielsweise "col + col-6 + col" in einer Zeile definieren, wird diese automatisch wie "1/3+1/6+1/3"-Spalten unterteilt. Unten sind zwei Beispiele für die Definition einer Spalte und dann werden die verbleibenden zwei anderen Spalten entsprechend angepasst.

Wie verwende ich Bootstrap 5-Grid-Layouts?

Unten ist der Code zum Anpassen von Spalten, die die Spalte mit der definierten Breite umgeben:

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> </div> </div>

5 Inhalt mit variabler Breite

Die Breite der Spalten kann mit der Klasse „.col-{breakpoint}-auto” auf den eigentlichen Inhalt beschränkt werden, zum Beispiel „.col-md-auto”.

Wie verwende ich Bootstrap 5-Grid-Layouts?

Die mittleren Spalten im obigen Beispiel werden automatisch an die Breite des Inhalts angepasst. Unten ist der Code für das obige Rasterlayout:

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

6 Raster mit mehreren Reihen gleicher Breite

Erstellen Sie einfach ein Layout mit mehreren Spalten innerhalb einer Zeile, indem Sie kontinuierlich „.col”-Klassen verwenden. Sie müssen nur die Klasse ".w-100" einfügen, wo ein Haltepunkt erforderlich ist.

Wie verwende ich Bootstrap 5-Grid-Layouts?

Unten ist der Code zum Erstellen mehrerer Zeilen mit gleicher Breite unter Verwendung einer einzelnen "Zeilen" -Klasse.

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> </div>

7 gestapeltes horizontales Gitter

Sie können ein gestapeltes Rasterlayout mit ".col-sm-"-Klassen erstellen, die auf dem Desktop zu einem horizontalen Raster erweitert werden .

Wie verwende ich Bootstrap 5-Grid-Layouts?

Unten ist der Code zum Erstellen eines gestapelten horizontalen Rasterlayouts wie oben gezeigt.

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

8 Vertikale Ausrichtung

Die vertikale Ausrichtung des Inhalts innerhalb einer Spalte kann angepasst werden, indem eine der folgenden drei Klassen mit der Klasse „.row” wie unten beschrieben hinzugefügt wird:

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 Horizontale Ausrichtung

Ähnlich wie bei der vertikalen Ausrichtung können Sie auch die horizontale Ausrichtung der Spalten wie folgt anpassen:

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

Dies führt im Browser zu folgendem Ergebnis:

Wie verwende ich Bootstrap 5-Grid-Layouts?

10 Gitter ohne Dachrinnen

Standardmäßig haben die Spalten einen horizontalen Abstand und die Zeilen haben negative horizontale Ränder zur besseren Ausrichtung. Sie können diese Ränder und Abstände entfernen, indem Sie die Klasse „no-gotters” mit „row” verwenden, wie unten gezeigt.

<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>

Es wird das folgende Ergebnis erzeugen:

Wie verwende ich Bootstrap 5-Grid-Layouts?

11 umbrochenes Spaltenraster

Wenn Sie mehr als 12 Spalten in einer Zeile haben, werden die Spalten automatisch in die nächste Zeile umgebrochen. Zum Beispiel passen die ersten beiden Spalten unten in die erste Zeile (9+2=11), während die dritte und vierte Spalte in eine neue Zeile umgebrochen werden.

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

Die umbrochenen Spalten sehen wie folgt aus:

Wie verwende ich Bootstrap 5-Grid-Layouts?

Neuordnung des 12-Spalten-Inhalts innerhalb des Rasters

Bootstrap ermöglicht es Ihnen, den Inhalt einer Spalte unabhängig von der Position in einer Zeile neu anzuordnen. Im folgenden Rasterlayout werden beispielsweise drei Spalten verwendet.

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

Das Ergebnis sieht wie folgt aus, wobei keine geordnete Spalte Vorrang vor allen anderen geordneten Spalten hat und in der ersten Spalte angezeigt wird. Inhalte innerhalb der Spalte, die die Klasse „order-12″ verwenden, werden an die letzte Position verschoben. Und der Inhalt innerhalb der Spalte mit "order-1" wird an die mittlere (erste) Position verschoben.

Wie verwende ich Bootstrap 5-Grid-Layouts?

13 Spaltenversatz

In Bootstrap 4 wurde die Funktion zum Spaltenversatz aufgrund der Verwendung des Flexbox-Rasterlayouts entfernt. Sie können die Spalten jedoch weiterhin mit Margin-Dienstprogrammklassen wie "ml-auto", "mr-auto" usw.

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div>

Unten sehen Sie das Ergebnis des Spaltenversatzes mit Margin-Klassen:

Wie verwende ich Bootstrap 5-Grid-Layouts?

14 Verschachtelung im Raster

Sie können die Spalten auch in andere Spalten verschachteln, wie unten gezeigt:

<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div>

Es wird das folgende Ergebnis erzeugen:

Wie verwende ich Bootstrap 5-Grid-Layouts?

Abschluss

Wie Sie sehen, gibt es viele Standard-Layouts, die Sie mit dem Bootstrap 5-Raster-Layout-System erstellen können. Es ist auch möglich, benutzerdefiniertes CSS zu erstellen, um benutzerdefinierte Layouts zu erstellen oder eines der Standardlayouts zu ändern. Das solide Flexbox-Rasterlayout und die wiederverwendbaren Komponenten machen Bootstrap 5 stärker als die Vorgängerversion.


Bootstrap 5 lernen (Index )


Aufnahmequelle: www.webnots.com

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen