Bootstrap 4 ist ein beliebtes Framework für die Entwicklung von Webanwendungen, das viele Möglichkeiten bietet, ein benutzerfreundliches und anpassungsfähiges Layout zu erstellen. Eine der Hauptfunktionen von Bootstrap 4 ist die Möglichkeit, ein flexibles Raster zu verwenden, mit dem Entwickler das Layout und die Größe der Seitenelemente je nach Bildschirmauflösung anpassen können.
Das Hauptelement des Rasters in Bootstrap 4 ist der Container, der den gesamten Seiteninhalt umschließt und seine Breite bestimmt. Der Container wird durch Reihen (row) ergänzt, die wiederum Spalten (col) enthalten. Die Spalten werden mit der Klasse col-*-* angegeben (z. B. col-sm-6), wobei der erste Wert die Anzahl der Spalten in einer Reihe auf verschiedenen Geräten angibt und der zweite Wert die Breite jeder Spalte angibt.
Beim Einrichten eines Rasters in Bootstrap 4 sollten einige grundlegende Prinzipien beachtet werden. Zuerst müssen Sie je nach Bildschirmauflösung und dem gewünschten Layout die optimale Anzahl von Spalten in einer Reihe auswählen. Je kleiner die Spalten sind, desto kompakter wird das Layout auf kleinen Bildschirmen, aber es kann notwendig sein, die Elemente detaillierter zu platzieren. Zweitens muss die Spaltenbreite so angepasst werden, dass die Gesamtbreite aller Spalten in einer Reihe maximal 12 Einheiten beträgt, da Bootstrap 4 ein Zwölf-Säulen-Raster verwendet.
Denken Sie daran, dass Sie beim Einrichten eines Rasters in Bootstrap 4 die Anpassungsfähigkeit des Layouts auf verschiedenen Geräten berücksichtigen müssen. Um die Vorteile des Rasters optimal zu nutzen, sollten Sie das Layout mit unterschiedlichen Bildschirmauflösungen überprüfen und testen und bei Bedarf Anpassungen vornehmen.
Abschließend ist das Einrichten eines Rasters in Bootstrap 4 eine der wichtigsten Aufgaben bei der Entwicklung adaptiver Webanwendungen, die es Ihnen ermöglichen, Elemente basierend auf der Bildschirmauflösung effektiv auf einer Seite zu platzieren. Bei der Auswahl der Anzahl der Spalten und der Breite jeder Spalte sollten Sie die Designanforderungen und die Benutzerfreundlichkeit der Anwendung auf verschiedenen Geräten berücksichtigen. Nach den Grundprinzipien der Rasteranpassung können Entwickler ein optimales Ergebnis erzielen und ein ansprechendes und übersichtliches Layout für die Benutzer erstellen.
Das Raster in Bootstrap 4 und seine Grundprinzipien
Das Grundprinzip des Bootstrap 4-Rasters besteht darin, ein 12-Säulen-System zu verwenden. Das Raster ist in 12 gleiche Spalten unterteilt, von denen jede eine bestimmte Anzahl von Spalten Platz einnehmen kann.
Um das Raster in Bootstrap 4 zu verwenden, müssen Sie Ihre Seite in Container, Zeilen und Spalten aufteilen.
Container sind Wrapper für den Inhalt Ihrer Seite. Sie ermöglichen es Ihnen, die Breite des Inhalts zu zentrieren und zu begrenzen. Bootstrap bietet zwei Arten von Containern: behälter (container) und Behälter mit flüssiger Breite (container-fluid).
Zeilen (rows) werden verwendet, um horizontale Spaltengruppierungen zu erstellen. Sie machen Container flexibel und anpassungsfähig. Innerhalb jeder Zeile können Spalten platziert werden.
Spalten (columns) werden verwendet, um den Inhalt zu hosten. Sie können alle Arten von Inhalten enthalten – Text, Bilder, Formen usw. Die Spalten können je nach Anzahl der Spalten, die sie belegen, auch unterschiedliche Größen haben.
Die Bootstrap 4-Rasterklassen werden zum Erstellen von Spalten verwendet. Um beispielsweise eine Spalte zu erstellen, die 6 Spalten Platz einnimmt, müssen Sie die Klasse "col-6" verwenden. Klassen können je nach Bildschirmgröße auch auf das Verhalten einer Spalte hinweisen – zum Beispiel bedeutet "col-sm-6", dass eine Spalte nur bei Geräten mit kleinem Bildschirm 6 Spalten Platz einnimmt.
Das Bootstrap 4-Raster unterstützt auch das Verschachteln. Sie können Spalten in anderen Spalten erstellen, um komplexe Layouts zu erstellen.
Die Verwendung eines Rasters in Bootstrap 4 ermöglicht es Ihnen, adaptive und flexible Webseiten zu erstellen, die auf verschiedenen Geräten gut aussehen. Wenn Sie die grundlegenden Prinzipien des Gitters kennen, können Sie effektive und ästhetisch ansprechende Layouts erstellen.
Grundlegende Konzepte und Gitterstruktur
Die wichtigsten Konzepte, die beim Arbeiten mit einem Raster wichtig sind, sind:
- Das Markup in Bootstrap 4 basiert auf Containern, die eine feste Breite haben oder die gesamte verfügbare Breite des Bildschirms einnehmen können. Mithilfe von Containern können Sie die Platzierung von Elementen auf einer Seite steuern und bestimmte Layouteigenschaften erstellen.
- Reihen sind Spaltenbehälter. Sie helfen dabei, Elemente auf der Seite horizontal auszurichten und sicherzustellen, dass die Spalten korrekt verteilt sind.
- Spalten sind die grundlegenden Bausteine eines Netzes. Ihre Breite kann für jeden markierten Auflösungspunkt (Breakpoint) angepasst werden, sodass Sie ansprechende Designs für verschiedene Geräte erstellen können.
Die Rasterstruktur in Bootstrap 4 sieht oft wie folgt aus:
In diesem Beispiel sehen wir einen Container mit einer Reihe, in der sich drei Spalten befinden. Wenn die Breite des Bildschirms verringert wird und einen bestimmten Auflösungspunkt erreicht, können die Spalten ihre Breite automatisch ändern oder zur besseren Anpassungsfähigkeit in eine Spalte eingeblendet werden.
Grid-System und Spalten in Bootstrap 4
Die Spalten in Bootstrap 4 haben 12 Einheiten Breite. Die Spaltengröße wird durch Modifizierungsklassen bestimmt, die im class-Attribut des Elements angegeben werden. Beispielsweise gibt die Klasse col-6 die Spaltenbreite auf 6 Einheiten an, was der Hälfte des Grid-Containers entspricht.
Verwenden Sie zum Erstellen von Zeilen ein div-Element mit der Row-Klasse. Alle Lautsprecher müssen sich innerhalb der Reihe befinden. Zum Erstellen von Spalten werden Div-Elemente mit Klassen verwendet, die die Spaltenbreite definieren.
Das einfachste Beispiel für die Verwendung eines Grid-Systems und einer Spalte in Bootstrap 4:
In diesem Beispiel erstellen wir eine Reihe, in der sich zwei Spalten mit gleicher Breite befinden. Die erste Spalte nimmt die Hälfte des Grid-Containers ein, und die zweite Spalte nimmt auch die Hälfte ein. Dadurch wird sichergestellt, dass die Seite gleichmäßig in zwei Spalten aufgeteilt wird.
Neben den Basisklassen-Modifikatoren wie col-6 bietet Bootstrap 4 weitere Klassenoptionen, mit denen Sie je nach Bildschirmgröße Spalten unterschiedlicher Breite erstellen können. Beispielsweise legt die Klasse col-sm-4 die Spaltenbreite auf Bildschirmen mit einer Breite zwischen 576px und 768px auf 4 Einheiten fest.
Dank der Flexibilität und Anpassungsfähigkeit des Grid-Systems in Bootstrap 4 können Entwickler komplexe und schöne Layouts erstellen, die auf verschiedenen Geräten und in verschiedenen Browsern gut angezeigt werden.
Rasterklassen und ihre Verwendung
Klassen werden verwendet, um die Breite der Blöcke im Raster zu bestimmen.col . Es gibt auch Klassen, um die Breite der Blöcke auf verschiedenen Bildschirmen zu bestimmen: .col-xl- für Extra-Large-Bildschirme, .col-lg- für große Bildschirme, .col-md- für mittlere Bildschirme und .col-sm- für kleine Bildschirme.
Die Breite des Blocks wird durch eine Zahl zwischen 1 und 12 bestimmt, wobei jede Zahl einer bestimmten Spaltenbreite im 12-Säulen-Raster entspricht. Zum Beispiel eine Klasse .col-6 legt den Block auf die Breite von 6 Spalten und die Klasse fest .col-md-4 legt die Breite von 4 Spalten auf mittleren Bildschirmen und darüber fest.
Darüber hinaus gibt es Klassen zum horizontalen Versetzen von Blöcken im Raster. Klassen .offset- Legt den Blockversatz um eine bestimmte Anzahl von Spalten fest. Zum Beispiel eine Klasse .offset-2 verschiebt den Block um 2 Spalten nach rechts.
Die Klassen .mr- und .ml- können verwendet werden, um horizontale Einrückungen zwischen den Blöcken im Raster zu erstellen. Die .mr-Klassen geben den rechten Einzug an, und die .ml-Klassen geben den linken Einzug an. Die Zahl nach der Klasse bestimmt die Einrückungsbreite in Pixeln.
Zusätzlich zu den Blockoperationen im Raster gibt es Klassen für die Arbeit mit Containern und Zeilen. Die Klasse.container gibt den Container an, in dem sich Zeilen und Blöcke befinden. Die Klasse.die Zeile wird der Zeile hinzugefügt, in der sich die Blöcke befinden.
Im Gegensatz zu Bootstrap 3 erfordern die meisten Rasterklassen in Bootstrap 4 keine zusätzlichen CSS-Regeln für die korrekte Anzeige. Dies macht die Verwendung des Gitters viel einfacher und bequemer.
