Gehen Sie folgendermaßen vor, um Bootstrap 5-Rasterlayouts zu verwenden:
1. Wählen Sie ein Rastersystem: Bootstrap 5 bietet zwei Grid-Systeme:ein traditionelles Grid-System und ein Flexbox-Grid-System. Das traditionelle Rastersystem verwendet Prozentsätze zur Größenbestimmung, während das Flexbox-Rastersystem Pixel verwendet. Sie können das Rastersystem wählen, das am besten zu Ihrem Projekt passt.
2. Containerklassen hinzufügen: Um ein Raster zu definieren, fügen Sie Containerklassen zu Ihrem HTML hinzu. Die Containerklasse kann entweder Container oder Container-Fluid sein. Die Container-Klasse legt eine feste Breite für das Raster fest, während die Container-Fluid-Klasse dafür sorgt, dass das Raster reagiert.
3. Zeilenklassen hinzufügen: Fügen Sie im Container Zeilenklassen hinzu, um Zeilen in Ihrem Raster zu erstellen.
4. Spaltenklassen hinzufügen: Fügen Sie in jeder Zeile Spaltenklassen hinzu, um Spalten in Ihrem Raster zu erstellen. Jede Spaltenklasse gibt eine Anzahl von Spalten an, die die Spalte umfassen soll. Beispielsweise umfasst die Klasse col-4 vier Spalten.
5. Inhalt zu Spalten hinzufügen: Fügen Sie den gewünschten Inhalt zu den Spalten hinzu.
Bootstrap 5 bietet außerdem verschiedene Dienstprogrammklassen, mit denen Sie Ihr Rasterlayout anpassen können, z. B. Offset- und Reihenfolgeklassen.
Nachfolgend finden Sie ein Beispiel dafür, wie Sie Bootstrap 5-Rasterlayouts verwenden können:
