Rastersystem

12-Spalten-Layout

Das Rastersystem von Bootstrap teilt die Seite in 12 Spalten, was eine flexible und responsive Layoutstruktur bietet. Dies ermöglicht es Entwicklern, optisch ansprechende und gut strukturierte Designs zu erstellen, die sich nahtlos an verschiedene Bildschirmgrößen und Geräte anpassen.

Rasterklassen

• container: Die container-Klasse umschließt und zentriert den Inhalt innerhalb eines Containers mit fester Breite. Sie bietet Polsterung, Rand und sorgt für die richtige Ausrichtung des Inhalts;
• row: Die row-Klasse erstellt eine horizontale Gruppe von Spalten. Sie dient als Container für Spalten und sorgt für die richtige Ausrichtung und den Abstand zwischen ihnen;
• col: Spalten innerhalb einer Zeile werden mit der col-Klasse definiert. Entwickler geben die Breite der Spalten mit col-Klassen wie col-6, col-md-4 oder col-lg-3 an.

Responsives Design

Das Rastersystem von Bootstrap ist so konzipiert, dass es responsiv ist und es dem Inhalt ermöglicht, sich dynamisch basierend auf der Ansichtsgröße und dem Gerätetyp anzupassen. Entwickler können responsive Rasterklassen wie col-md-6 oder col-lg-4 verwenden, um Spaltenbreiten für verschiedene Bildschirmgrößen wie mittlere oder große Geräte anzugeben.

Hinweis

In Bootstrap repräsentieren die Klassen sm, md, lg und xl verschiedene Bildschirmgrößen

Beispiele

Beispiel 1: Grundlegendes Rasterlayout

In diesem Beispiel haben wir einen Container mit einer einzigen Zeile, die drei gleich breite Spalten enthält. Jede Spalte nimmt einen gleichen Anteil der Breite der Zeile ein, was zu einem horizontalen Layout mit drei Spalten führt.

Beispiel 2: Responsives Rasterlayout

In diesem Beispiel hat ein Container eine Zeile mit drei Spalten. Die ersten beiden Spalten (col-md-6) sind so eingestellt, dass sie die Hälfte der Zeilenbreite auf mittelgroßen Bildschirmen und darüber einnehmen. Die dritte Spalte (col-md-12) ist so eingestellt, dass sie die gesamte Zeilenbreite auf mittelgroßen Bildschirmen und darüber einnimmt. Dies stellt sicher, dass die dritte Spalte die gesamte Zeilenbreite einnimmt.

Ergebnis des Verhaltens des responsiven Rasters