Bootstrap - dies ist das beliebteste Framework für die Entwicklung adaptiver Websites. Es bietet einfache und flexible Werkzeuge, um eine leistungsstarke und stilvolle Benutzeroberfläche zu erstellen.
Eine der nützlichsten und gefragtesten Funktionen von Bootstrap ist sein flexibles Gittersystem. Es ermöglicht Entwicklern, eine ansprechende Webseite zu erstellen, die auf allen Geräten, von Mobiltelefonen bis hin zu Desktops, gut aussieht.
Das Bootstrap-Raster basiert auf dem Konzept von Spalten und Reihen. Die gesamte Webseite ist in 12 Spalten unterteilt, und der Entwickler kann diese Spalten in Reihen gruppieren. Dabei kann jede Spalte (oder mehrere Spalten) die gleiche oder unterschiedliche Anzahl von Spalten in einer Reihe belegen.
Der Vorteil des Bootstrap-Rasters besteht darin, dass es einfach ist, verschiedene Layoutoptionen zu erstellen, ohne dass komplexer CSS-Code geschrieben werden muss. Der Entwickler verwendet einfach die Bootstrap-Klassen, um die Anzahl der Spalten zu bestimmen, die diese Elemente auf verschiedenen Geräten einnehmen müssen.
Grundprinzipien der Arbeit
Container definieren den Raum, in dem der gesamte Inhalt gehostet wird. Sie begrenzen die Breite des Inhalts und fügen Einrückungen an den Seiten hinzu. Es gibt zwei Arten von Containern in Bootstrap: Container mit fester Breite und Container mit freier Breite, die sich über die gesamte Breite des Bildschirms erstrecken.
Reihen werden verwendet, um Spalten horizontal in einem Container zu platzieren. Sie sind in 12 Spalten unterteilt, die je nach Designanforderungen gleichmäßig verteilt oder unterschiedlich breit sein können. Durch die Aufteilung in Spalten können Sie ein flexibles und adaptives Markup erstellen, das auf verschiedenen Geräten gut aussieht.
Spalten sind die Hauptbausteine des Gitters. Sie werden innerhalb der Reihen platziert und bestimmen die Breite des Blocks. Sie können verschiedene Bootstrap-Klassen auf Spalten anwenden, um die gewünschte Breite festzulegen, die Reihenfolge und Position der Blöcke auf verschiedenen Geräten zu ändern.
Das Bootstrap-Raster unterstützt auch die Möglichkeit der Verschachtelung. Dies bedeutet, dass ein neues Raster aus Reihen und Spalten in einer Spalte platziert werden kann. Dadurch können Sie komplexere Layouts und Webseitenstrukturen erstellen.
Alle Elemente des Bootstrap-Rasters sind einfach zu bedienen und gut dokumentiert. Sie bieten eine breite Palette von Klassen und Optionen, mit denen Sie ein ansprechendes und schönes Webseitendesign erstellen können. Mit dem Bootstrap-Raster können Sie ganz einfach eine Seitenstruktur erstellen, Blöcke zentriert ausrichten, ihre Größe und Reihenfolge ändern und viele andere nützliche Dinge tun.
Grid-System
Das Grid-System basiert auf 12 Spalten und ermöglicht eine einfache Verwaltung der Platzierung von Inhalten auf einer Seite. Zeilen werden verwendet, um horizontale Seitenabschnitte zu erstellen, und Spalten definieren die Anzahl und Breite der Spalten innerhalb einer Reihe.
Um ein Grid-System zu verwenden, müssen Sie den Seiteninhalt innerhalb eines Containers (container oder container-fluid) platzieren, der den Bereich definiert, in dem das Grid-System ausgeführt werden soll.
Die Spalten innerhalb einer Reihe sollten in Div-Elemente mit Klassen eingeschlossen sein, die die Breite der Spalten in den Spalten angeben. Wenn wir beispielsweise zwei Spalten erstellen möchten, müssen Sie für jede Spalte die Klasse "col-6" angeben (6 sind 12 Boootstrap-Spalten, die in zwei gleiche Teile geteilt sind).
Das Grid-System bietet auch die Möglichkeit, ein adaptives Raster zu erstellen, das sich an verschiedene Bildschirmgrößen anpasst. Dazu können Sie je nach Bildschirmgröße verschiedene Spaltenklassen verwenden: col-lg-*, col-md-*, col-sm-*.
Mit dem Bootstrap-Grid-System können Sie schnell und bequem adaptive und moderne Webseiten erstellen und die Platzierung von Inhalten auf der Seite effektiv verwalten.
Verwendung von Containern und Reihen
Bootstrap bietet spezielle Klassen zum Erstellen von Containern und Reihen, mit denen Sie Elemente auf einer Seite mithilfe eines Rasters organisieren können.
Container werden verwendet, um die Breite des Inhalts auf einer Seite zu begrenzen und ihn horizontal zu zentrieren. Es gibt mehrere Containerklassen in Bootstrap: .container für feste Breite, .container-fluid für die volle Breite des Bildschirms sowie .my-size und .my-size-auto, um die eigene Breite des Containers zu bestimmen.
Zeilen werden verwendet, um den Inhalt in Spalten aufzuteilen. Sie sollten in einen Behälter eingewickelt werden. Eine Reihe wird mit einer Klasse erstellt .row . Es kann eine oder mehrere Spalten innerhalb einer Reihe geben, die mit Klassen beschrieben werden .col .
Klassen .cols haben unterschiedliche Optionen, abhängig von der Spaltenbreite, zum Beispiel: .col-size , .col-size-number , .col-size-number-offset . Wo size kann xs , sm , md , lg oder xl sowie sein number und offset - zahlen von 1 bis 12.
Der folgende Code erstellt beispielsweise eine Reihe mit zwei Spalten, wobei die erste die Hälfte der Breite der Reihe einnimmt und die zweite die zweite Hälfte einnimmt:
Первый столбец
Второй столбец
Mit diesem Raster können Sie das Markup und die Erstellung eines ansprechenden Designs vereinfachen und die Breite und Position der Spalten auf verschiedenen Geräten leicht ändern.
Anpassungsfähigkeit und Responsive Design
Eines der wichtigsten Merkmale von Bootstrap ist sein Raster, mit dem Sie ein flexibles Layout erstellen können, das sich automatisch an verschiedene Bildschirmgrößen anpasst. Das Raster basiert auf einem System von Spalten und Reihen. Spalten können flexibel oder fest sein und das Layout kann in 12 Spalten unterteilt werden.
Bootstrap verwendet Klassen mit Präfixen, die angeben, wie sich die Spalten auf verschiedenen Bildschirmgrößen befinden sollen, um ein responsives Design zu erstellen. Beispielsweise gibt die Klasse 'col-md-6' an, dass die Spalte auf Geräten mittlerer Größe die Hälfte der Containerbreite einnehmen muss.
Darüber hinaus bietet Bootstrap auch viele Klassen zum Ausblenden und Anzeigen von Inhalten auf verschiedenen Bildschirmgrößen. Beispielsweise blendet die Klasse 'hidden-xs' ein Element auf Geräten mit kleinen Bildschirmen aus, während die Klasse 'visible-lg' es nur auf großen Bildschirmen sichtbar macht.
Das Design in Bootstrap zu überprüfen bedeutet auch, Medienabfragen zu verwenden, mit denen Sie bestimmte Stile für verschiedene Geräte festlegen können. Sie können beispielsweise bestimmte Stile für mobile Geräte oder Tablets festlegen, um eine bessere Lesbarkeit und Benutzerfreundlichkeit zu gewährleisten.
Mit dem Bootstrap-Raster können Sie ein responsives und responsives Design verwenden, um Webseiten und Anwendungen zu erstellen, die auf verschiedenen Geräten gut aussehen und optimal funktionieren. Dies erhöht die Benutzerfreundlichkeit und verbessert die Benutzerfreundlichkeit, was in der heutigen Welt mobiler Geräte und verschiedener Bildschirme von großer Bedeutung ist.
Medienanfragen
Mithilfe von Medienabfragen können wir die Stile der Elemente je nach Bildschirmbreite ändern. Auf diese Weise können wir verschiedene Stile für mobile Geräte, Tablets und Desktops erstellen.
Um Medienabfragen in Bootstrap zu erstellen, verwenden wir Klassen, die auf dem Prinzip "mobile Geräte vorwärts" basieren. Das heißt, wenn wir Stile für mobile Geräte anwenden möchten, fügen wir zuerst Klassen für mobile Geräte hinzu und erweitern sie dann für Tablets und Desktops. Dieser Ansatz ermöglicht es uns, ein responsives Design zu erstellen, das auf verschiedenen Geräten gut aussieht.
Es gibt mehrere Klassen in Bootstrap, mit denen wir Medienabfragen erstellen können. Zum Beispiel werden "col-" -Klassen verwendet, um Medienabfragen für verschiedene Bildschirmbreiten zu erstellen. Wir können angeben, wie viele Spalten ein Element bei verschiedenen Bildschirmgrößen einnehmen soll, z. B. "col-xs-" für mobile Geräte, "col-md-" für Tablets und "col-lg-" für Desktops.
Außerdem bietet Bootstrap Klassen zum Ausblenden und Anzeigen von Elementen auf verschiedenen Geräten. Mit den Klassen "hidden-xs", "hidden-sm" und "visible-md" können wir beispielsweise Elemente basierend auf der Bildschirmgröße ausblenden und anzeigen.
Medienabfragen in Bootstrap machen das Erstellen eines ansprechenden Designs sehr einfach und bequem. Sie ermöglichen es uns, Webseiten zu erstellen, die gut aussehen und auf verschiedenen Geräten funktionieren, ohne dass für jedes Gerät unterschiedliche Versionen erstellt werden müssen.
Klassen für Anpassungsfähigkeit
Bootstrap verwendet verschiedene Klassen, die auf Container, Zeilen und Spalten angewendet werden können, um adaptive Rasterelemente zu erstellen. Mit all diesen Klassen können Sie flexible und ansprechende Layouts erstellen:
- .container - Erstellt einen Container, der sich automatisch an die Bildschirmgröße anpasst.
- .container-fluid - erstellt einen Container, der die gesamte verfügbare Breite des Bildschirms einnimmt.
- .row - Erstellt eine Zeile, die Spalten enthält.
- .col-- - legt die Spaltenbreite abhängig von der Bildschirmgröße fest. Hier kann einer der folgenden Werte sein: xs (extra small), sm (small), md (medium), lg (large) und xl (extra large).
Zusammen ermöglichen diese Klassen Ihnen, komplexe adaptive Layouts zu erstellen, die auf verschiedenen Geräten und Bildschirmen gut aussehen. Sie ermöglichen es Ihnen, schnell und einfach ansprechende Webseiten zu erstellen, ohne zusätzlichen CSS-Code schreiben zu müssen.
Klassen für Anpassungsfähigkeit sind einer der mächtigsten und nützlichsten Teile von Bootstrap. Sie helfen dabei, schöne und funktionale Websites zu erstellen, die auf allen Geräten und Bildschirmen gut funktionieren.
Beispiele für die Verwendung des Bootstrap-Rasters
Das Bootstrap-Raster bietet praktische Tools zum Erstellen eines adaptiven Layouts von Webseiten. Im Folgenden sind Beispiele für die Verwendung des Bootstrap-Rasters aufgeführt:
Beispiel 1:
Angenommen, wir haben einen Abschnitt einer Website, der auf großen Bildschirmen in drei Spalten und auf kleinen Bildschirmen in eine Spalte unterteilt werden muss. Wir können dies leicht mit dem Bootstrap-Raster wie folgt implementieren:
Колонка 1
Колонка 2
Колонка 3
Im obigen Code verwenden wir die Klassen col-lg-4 und col-sm-12, um die Breite jeder Spalte in verschiedenen Bildschirmgrößen zu bestimmen. Auf großen Bildschirmen belegt jede Spalte 4 von 12 Spalten und auf kleinen Bildschirmen werden alle 12 Spalten belegt.
Beispiel 2:
Nehmen wir an, wir müssen eine einfache Tabelle mit Daten erstellen, die anpassungsfähig ist. Wir können das Bootstrap-Raster dafür wie folgt verwenden:
ID Имя Возраст 1 Иван 25 2 Елена 30 3 Алексей 35
In diesem Beispiel verwenden wir die Klassen table-responsive und table, um eine adaptive Tabelle zu erstellen. Die table-responsive-Klasse ermöglicht bei Bedarf einen horizontalen Bildlauf, und die table-Klasse legt die Tabellenformatierung fest.
Dies sind nur zwei Beispiele für die Verwendung des Bootstrap-Rasters. Das Bootstrap-Raster bietet viele andere Möglichkeiten zum Erstellen adaptiver Webseiten-Layouts. Lesen Sie die Bootstrap-Dokumentation, um mehr darüber zu erfahren, wie Sie das Raster in Ihren Projekten verwenden.
