Bootstrap - dies ist das beliebteste CSS-Framework, das Entwicklern praktische Tools zum Erstellen stilvoller und reaktionsfähiger Weboberflächen bietet. Eine der häufigsten Aufgaben besteht darin, Inhalte in der Mitte einer Seite zu platzieren. In diesem Artikel werden wir über verschiedene Methoden sprechen, mit denen Sie Folgendes tun können div zentriert mit Bootstrap.
Der erste Weg ist die Verwendung einer Klasse text-center. Mit dieser Klasse können Sie den Inhalt horizontal innerhalb des Containers ausrichten. Fügen Sie einfach diese Klasse zu Ihrer hinzu div und sein Inhalt wird zentriert.
Die zweite Methode ist die Verwendung einer Klasse mx-auto. Diese Klasse wird hinzugefügt div, die zentriert sein muss. Diese Klasse legt das Blockelement automatisch links und rechts auf den automatisch generierten Wert ein, wodurch es horizontal zentriert wird.
Die dritte Möglichkeit besteht darin, ein flexibles Bootstrap-Raster zu verwenden. Wenn Sie das Bootstrap-Raster verwenden, können Sie gleichmäßig verteilte Spalten erstellen und sie mithilfe von Klassen zentriert ausrichten justify-content-center und d-flex. Fügen Sie diese Klassen dem übergeordneten Container hinzu, und seine untergeordneten Elemente werden horizontal zentriert.
Bootstrap installieren und konfigurieren
Zuerst müssen Sie die neueste Version von Bootstrap von der offiziellen Website herunterladen. Entpacken Sie nach dem Download das Archiv und kopieren Sie die CSS- und JavaScript-Dateien in die entsprechenden Ordner Ihres Projekts.
Fügen Sie im HTML-Dokument Verweise auf die Bootstrap-CSS- und JavaScript-Dateien hinzu. Fügen Sie dazu den folgenden Code in das Tag ein
Wenn Sie separate Bootstrap-Komponenten verwenden möchten, geben Sie den Pfad zu den entsprechenden CSS- und JavaScript-Dateien an. Wenn Sie beispielsweise nur die Bootstrap-Schaltfläche benötigen, fügen Sie den folgenden Code ein:
Sie können auch das Content Delivery Network (CDN) verwenden, um Bootstrap zu laden. Kopieren Sie einfach den folgenden Code in das Tag
Nachdem Sie Bootstrap angeschlossen haben, können Sie mit der Verwendung seiner Stilklassen und -komponenten in Ihrem Projekt beginnen. Bitte beachten Sie die Bootstrap-Dokumentation für weitere Details zu seinen Funktionen und Verwendungen.
| Datei | Die Beschreibung |
|---|---|
| bootstrap.min.css | Bootstrap-Hauptstildatei |
| bootstrap.min.js | Bootstrap-JavaScript-Hauptdatei |
| bootstrap-button.min.css | Stildatei für Bootstrap-Schaltflächen |
| bootstrap-button.min.js | JavaScript-Datei für Bootstrap-Schaltflächen |
Bootstrap herunterladen und installieren
Um Bootstrap auf Ihrer Website zu verwenden, müssen Sie es herunterladen und installieren.
Es gibt zwei grundlegende Möglichkeiten, Bootstrap zu laden:
| 1. | Laden Sie Bootstrap von der offiziellen Website herunter. |
| 2. | Verwenden Sie Bootstrap über das Content Delivery Network (CDN). |
Wenn Sie Bootstrap von der offiziellen Website herunterladen möchten, gehen Sie zu der Seite https://getbootstrap.com / und klicken Sie auf "Download". Dadurch wird ein ZIP-Archiv mit Bootstrap-Dateien heruntergeladen.
Wenn Sie Bootstrap über CDN verwenden möchten, fügen Sie den folgenden Code in das Tag ein
Möglicherweise müssen Sie auch vor der Bootstrap-Datei einen Verweis auf jQuery hinzufügen.js, wenn es nicht bereits auf Ihrer Website verbunden ist.
Bootstrap mit einem Projekt verbinden
Der erste Schritt zur Verwendung von Bootstrap in Ihrem Projekt besteht darin, seine CSS- und JS-Dateien zu verbinden.
Es gibt mehrere Möglichkeiten, Bootstrap zu verbinden:
- Laden Sie die Dateien von der offiziellen Bootstrap-Website herunter https://getbootstrap.com /.
- Verwenden Sie Verweise auf das CDN (Content Delivery Network) der Bootstrap-Version. Zum Beispiel:
Sobald die Dateien verbunden sind, können Sie Bootstrap-Klassen und -Komponenten in Ihrem Projekt verwenden, um schnell und einfach ansprechende Webseiten zu erstellen.
Div erstellen und zentriert ausrichten
Bootstrap bietet eine einfache Möglichkeit, ein Div-Element in der Mitte zu erstellen und auszurichten. Dazu können Sie die Klassen "mx-auto" und "text-center" verwenden.
Die Klasse "mx-auto" hilft dabei, das Div horizontal auszurichten. Es setzt automatisch die inneren Einrückungen links und rechts auf "auto", wodurch das Element zentriert wird.
Die Text-Center-Klasse fügt eine vertikale zentrierte Ausrichtung hinzu. Es richtet Text und Blockelemente in einem Div-Container horizontal aus.
Um also ein div zu erstellen und es zentriert auszurichten, genügt es, den folgenden Code zu verwenden:
Hier statt." " sie müssen den Inhalt des div-Elements platzieren. Dies kann Text, ein Bild oder andere HTML-Elemente sein.
