Bootstrap Grid ist ein leistungsfähiges und flexibles Tool zum Erstellen von responsiven Websites. Es basiert auf einem 12-Spalten-Raster, das es ermöglicht, Inhalte auf einer Seite in praktischen Blöcken zu platzieren, die für verschiedene Geräte und Bildschirmauflösungen optimiert sind.
Die Grundidee hinter dem Bootstrap-Raster ist, dass jede "Spalte" einen bestimmten Bruchteil der Breite des Containers einnimmt. Wenn beispielsweise ein Container 1000 Pixel breit ist und wir zwei Spalten haben, die jeweils 6 Einheiten breit sind, nimmt jede Spalte 500 Pixel ein.
Das Bootstrap-Raster hilft Ihnen, ein responsives Design zu erstellen, mit dem Sie sich automatisch an verschiedene Geräte und Bildschirme anpassen können. Dies wird durch die Verwendung verschiedener Klassen erreicht, mit denen Sie bestimmte Blöcke je nach Bildschirmgröße oder Gerät ausblenden oder anzeigen können.
Es ist wichtig zu beachten, dass das Bootstrap-Raster nicht nur auf Spalten beschränkt ist. Es bietet auch viele andere Klassen und Komponenten, mit denen Sie komplexe Layouts erstellen können, einschließlich Trennzeichen, Navigation, Schaltflächen und vieles mehr.
Zweck und Merkmale
Das Bootstrap-Framework basiert auf HTML, CSS und JavaScript und bietet eigene Klassen, Stile und Komponenten, mit denen Entwickler mit minimalem Aufwand moderne und responsable Websites erstellen können.
Bootstrap verwendet ein Raster, das auf einem Spaltensystem aufgebaut ist, mit dem Sie die Anordnung der Elemente auf der Seite basierend auf der Bildschirmgröße leicht anpassen können. Auf diese Weise können Sie ansprechende Designs erstellen, die auf allen Geräten gut aussehen - vom Desktop bis zum Mobiltelefon.
Eines der größten Merkmale von Bootstrap ist seine Modularität. Das Framework ist in viele Module unterteilt, mit denen Entwickler nur die benötigten Komponenten auswählen und verwenden können. Dies macht das Framework sehr flexibel und ermöglicht es Ihnen, einzigartige Designs mit integrierten Tools und Funktionen zu erstellen.
Bootstrap bietet auch eine große Anzahl vorgefertigter Komponenten wie Schaltflächen, Formulare, Navigationsleisten, modale Fenster, Schieberegler und vieles mehr. Alle diese Komponenten haben flexible Einstellungen und sind gut dokumentiert, wodurch sie einfach zu bedienen sind.
Darüber hinaus unterstützt Bootstrap viele wichtige Funktionen wie respektable Bilder und Videos, Symbole, Hintergründe, Typografie und vieles mehr. Dies ermöglicht es Entwicklern, attraktive und funktionale Websites zu erstellen, ohne dass sie komplexen und zeitaufwendigen Code von Grund auf neu schreiben müssen.
Gitterstruktur
Das Raster in Bootstrap ist ein flexibles System, das auf 12 Spalten basiert. Es ermöglicht Ihnen, leicht zu definieren, wie Elemente auf einer Seite platziert und adaptive Layouts erstellt werden. Das Raster besteht aus Zeilen (row) und Spalten (column).
Eine Zeile ist ein Container, in dem die Spalten platziert werden. Es hilft Ihnen, die Ausrichtung des Inhalts zu steuern und Raum zwischen den Spalten zu schaffen. Jede Zeile ist in 12 gleiche Spalten unterteilt.
Eine Spalte ist ein Block, der eine bestimmte Anzahl von Spalten in einer Zeile belegen kann. Spalten im Raster haben Klassen, die angeben, wie viele Spalten sie belegen sollen. Zum Beispiel bedeutet col-6, dass die Spalte die Hälfte der Breite des übergeordneten Containers einnehmen muss.
Wenn Sie etwa zwei Spalten erstellen möchten, die die Hälfte der Bildschirmbreite einnehmen, können Sie die folgende Struktur verwenden:
Die erste Spalte belegt somit die linke Hälfte der Breite und die zweite Spalte die rechte Hälfte der Bildschirmbreite.
Mit Bootstrap-Rasterklassen können Sie eine Vielzahl von Strukturen erstellen, einschließlich der Platzierung von Elementen in einer einzelnen Zeile, der Erstellung von Spalten unterschiedlicher Breite oder der Anordnung von Inhalten in mehreren Zeilen. Das Bootstrap-Raster bietet Komfort und Flexibilität beim Erstellen von Webseiten-Layouts.
Behälter und Reihen
Das Rasterlayout in Bootstrap basiert auf der Verwendung von Containern und Reihen. Container sind ein Wrapper für den Seiteninhalt und definieren die maximale Breite, die der Inhalt einnehmen kann. Die Reihen werden verwendet, um die Spalten innerhalb des Containers zu platzieren.
Container in Bootstrap haben eine Klasse .container und es kann zwei Arten geben: einen Container mit fester Breite und einen Container, der die gesamte verfügbare Breite einnimmt. Ein Container mit fester Breite wird auf der Seite zentriert und hat eine maximale Breite, die von der Bildschirmgröße abhängt. Ein Container, der die gesamte Breite einnimmt, hat eine Klasse .container-fluid und erstreckt sich über die gesamte Breite des verfügbaren Platzes.
Die Reihen werden verwendet, um die Spalten innerhalb des Containers zu platzieren. Die Reihe hat auch eine Klasse .row gibt an, dass eine Reihe Spalten enthält. Eine oder mehrere Spalten können in einer Reihe platziert werden, die Anzahl ist unbegrenzt. Die Spalten in einer Reihe sind horizontal angeordnet und belegen den gesamten verfügbaren Platz in der Reihe.
Verwenden Sie Klassen, um Spalten in Bootstrap zu erstellen .col-* wobei ein Sternchen durch eine Zahl zwischen 1 und 12 ersetzt werden kann und die Anzahl der Spalten angibt, die die entsprechenden Elemente einnehmen müssen. Zum Beispiel eine Klasse .col-6 legt die Spalte fest, die die Hälfte des verfügbaren Platzes innerhalb der Reihe belegt.
Container und Reihen in Bootstrap sind sehr flexible und praktische Werkzeuge, um ein adaptives und mobiles Layout zu erstellen. Sie ermöglichen die einfache Erstellung von Gittern mit unterschiedlichen Spaltenpositionen und -anzahl und passen sich automatisch an unterschiedliche Bildschirmgrößen an.
Spalten und Spalten
In Bootstrap ist das Raster ein Spalten- und Spaltensystem, mit dem Sie den Inhalt einer Seite auf verschiedenen Geräten und Bildschirmen organisieren können.
Das Raster basiert auf dem Konzept, einen horizontalen Raum gleichmäßig in 12 Spalten zu unterteilen. Jeder Container in Bootstrap kann bis zu 12 Spalten enthalten, die Anzahl kann je nach Designanforderungen variieren.
Zum Erstellen von Spalten und Spalten verwendet Bootstrap Klassen mit dem Präfix "col-", um die Spaltenbreite abhängig von der gewünschten Bildschirmauflösung festzulegen. Beispielsweise gibt die Klasse "col-sm-6" an, dass die Spalte die Hälfte der Breite des übergeordneten Containers auf Geräten mit einer Auflösung von 576px oder höher einnehmen muss.
Neben den Klassen zur Angabe der Spaltenbreite bietet Bootstrap auch Klassen zum vertikalen Ausrichten von Inhalten. Mit der Klasse "align-items-center" können Sie beispielsweise Inhalte vertikal zentriert ausrichten.
Bootstrap verwendet auch die entsprechenden Klassen, um Zeilen und Container zu erstellen. Container helfen dabei, die Breite des Inhalts zu begrenzen und Grenzen für Reihen und Spalten festzulegen. Reihen werden verwendet, um Spalten innerhalb eines Containers zu gruppieren und ihr Aussehen anzupassen.
Mit dem Bootstrap-Raster können Sie verschiedene Komponenten einer Seite erstellen, z. B. einen Hut, ein Navigationsmenü, Inhalte, eine Seitenleiste und vieles mehr. Spalten und Spalten ermöglichen die Flexibilität und Anpassungsfähigkeit einer Webseite, sodass sie auf verschiedenen Geräten und Bildschirmen korrekt angezeigt werden kann.
Beispiel für die Verwendung von Spalten und Spalten in Bootstrap:
In diesem Beispiel wird ein Container mit zwei Spalten erstellt, von denen jede die Hälfte der Breite des übergeordneten Containers auf Geräten mit einer Auflösung von 576px oder höher einnimmt.
Wenn Sie ein Bootstrap-Raster verwenden, müssen Sie berücksichtigen, wie sich das Raster auf das Layout und das Erscheinungsbild der Seite auswirkt. Das Layout und die Größe des Inhalts müssen sorgfältig geplant werden, um je nach Gerät und Bildschirm das gewünschte Ergebnis zu erzielen.
Anpassungsfähigkeit des Gitters
Das Bootstrap-Raster bietet einen praktischen Ansatz zum Erstellen adaptiver Webseiten. Die Anpassungsfähigkeit des Rasters ermöglicht es Ihnen, die Anzeige von Inhalten auf verschiedenen Geräten wie Computern, Tablets und Smartphones zu optimieren.
Einer der Hauptvorteile von Bootstrap ist die Verwendung eines adaptiven Gitters. Sie können verschiedene Layoutversionen für verschiedene Bildschirme erstellen, indem Sie unterschiedliche Stile und Positionen von Elementen anwenden.
Das Bootstrap-Raster basiert auf einem 12-Säulen-System, das die Verteilung von Elementen auf einer Seite erleichtert. Spalten können einfach kombiniert werden, um komplexe Layouts zu erstellen. Dadurch passt sich das Raster automatisch an die Größe des Bildschirms an.
Um die Anpassungsfähigkeit des Gitters zu nutzen, genügt es, die Bootstrap-Spaltenklassen auf die gewünschten HTML-Markupelemente anzuwenden. Beispielsweise legt die Klasse "col-6" die Spaltenbreite auf 50% fest, und die Klasse "col-12" dehnt die Spalte um die gesamte Breite des übergeordneten Elements.
Bootstrap bietet auch Klassen an, um die Anzeige von Elementen auf verschiedenen Bildschirmen zu steuern. Beispielsweise blendet die Klasse "d-none" ein Element auf allen Geräten aus, während die Klasse "d-lg-block" das Element nur auf Geräten mit einer Bildschirmbreite größer als 992px anzeigt.
Mit dem Bootstrap-Raster können Sie ganz einfach ein responsives Design erstellen, das auf verschiedenen Geräten gut aussieht. Auf diese Weise können Sie die Website benutzerfreundlicher gestalten und ihre Interaktion mit Inhalten verbessern.
Netzkomponenten
Container werden verwendet, um den Inhalt zu umhüllen und seine Breite abhängig vom Gerätetyp zu bestimmen, auf dem die Seite angezeigt wird. Es gibt zwei Arten von Containern: .container und .container-fluid . Der erste Typ erstellt einen Container mit fester Breite und der zweite Typ erstellt einen Container, der sich über die gesamte verfügbare Breite des Bildschirms erstreckt.
Zeilen werden verwendet, um Spalten innerhalb eines Containers zu gruppieren. Jede Zeile enthält eine oder mehrere Spalten, die einen bestimmten Bruchteil der Breite des Containers einnehmen. Die Zeichenfolge muss in ein Tag gewickelt sein .
Spalten werden mithilfe von Klassen definiert .col- und .col-X ist , wobei X eine Zahl zwischen 1 und 12 ist, die die Spaltenbreite in Bruchteilen von 12 angibt. Zum Beispiel,.col-6 bedeutet eine Spalte, die die Hälfte der Breite des Containers einnimmt.
Im Bootstrap-Raster werden auch zusätzliche Klassen verwendet, mit denen Sie die Einrückung verwalten können ( .offset- ), Ausrichten von Elementen ( .justify-content- ) und anderen Parametern. Zum Beispiel eine Klasse .offset-3 fügt der Spalte einen Einzug von 3 Einheiten vom Anfang der Zeile hinzu.
Wenn Sie alle diese Komponenten zusammen verwenden, können Sie benutzerfreundliche und adaptive Layouts basierend auf dem Bootstrap-Raster erstellen.
Beispiel für die Verwendung eines Bootstrap-Rasters
Betrachten Sie ein einfaches Beispiel für die Verwendung eines Bootstrap-Rasters zum Erstellen einer Gummiseite mit drei Spalten:
Содержимое первой колонки
Содержимое второй колонки
Содержимое третьей колонки
In diesem Beispiel haben wir die Klasse "container" verwendet, um einen Container zu erstellen, der die Seitenbreite begrenzt. Dann haben wir eine Reihe "row" erstellt, die drei Spalten "col-sm-4" enthält. Die Klasse "col-sm-4" gibt an, dass jede Spalte 4 der 12 verfügbaren Spalten oder 1/3 der Containerbreite belegen muss.
Wenn Sie eine Seite auf verschiedenen Geräten anzeigen, belegen die Lautsprecher automatisch den verfügbaren Platz und passen sich an die Bildschirmgröße an. Beispielsweise können sich die Spalten auf einem großen Bildschirm umeinander wickeln, und auf einem schmalen Bildschirm werden sie vertikal eine Spalte pro Zeile ausrichten.
