Bootstrap - es ist eines der beliebtesten Frameworks für die Entwicklung von Websites. Es bietet eine Vielzahl von vorgefertigten Komponenten, einschließlich navbar, das ist ein wichtiger Teil jeder Website. Aber manchmal ist es notwendig, die Navbar in der Mitte der Seite zu platzieren, und Bootstrap bietet dies standardmäßig nicht an. In diesem Artikel werden wir uns einige Methoden ansehen, mit denen Sie dieses Problem lösen können.
Die erste Methode, die wir betrachten werden, ist die Verwendung einer Klasse justify-content-center von Bootstrap. Mit dieser Klasse können Sie Elemente horizontal in der Mitte ausrichten. Um diese Klasse auf die navbar anzuwenden, müssen Sie sie zum übergeordneten Element der navbar hinzufügen, z. B. div mit der Klasse "container" oder "container-fluid". Dadurch können wir die Navbar in der Mitte der Seite ausrichten.
Die zweite Methode, die wir betrachten werden, ist die Verwendung benutzerdefinierter CSS-Stile. Sie können eine neue Klasse erstellen und CSS-Eigenschaften darauf anwenden, damit Sie die Navbar zentriert ausrichten können. Zum Beispiel können Sie die Eigenschaft verwenden display: flex;, um ein flexibles Containermodell und eine Eigenschaft zu erstellen justify-content: center;, um Elemente horizontal in der Mitte auszurichten. Dann fügen Sie diese Klasse einfach dem übergeordneten Element der navbar hinzu.
Was ist Bootstrap?
Bootstrap basiert auf HTML, CSS und JavaScript und bietet vorgefertigte Komponenten wie Schaltflächen, Formulare, Navigationsleisten, modale Fenster und vieles mehr, die leicht in Ihre Webseite eingefügt werden können. Darüber hinaus verfügt Bootstrap über ein flexibles Gittersystem, mit dem Sie ansprechende Layouts erstellen und Websites für verschiedene Geräte und Bildschirmauflösungen anpassen können.
Bootstrap bietet auch vorgefertigte Stile und Themen, mit denen Sie das Aussehen Ihrer Website einfach anpassen können. Sie können aus einer Vielzahl von Farbschemas, Schriftarten und Layouts wählen, sodass Sie ein einzigartiges Design für Ihr Projekt erstellen können.
Mit Bootstrap können Sie die Entwicklungszeit verkürzen und die Leistung verbessern, da Sie nicht viel Code von Grund auf neu schreiben müssen. Das Framework wird ebenfalls von Entwicklern aktualisiert und gepflegt, um Updates und Fehlerbehebungen sicherzustellen.
Bootstrap ist ein leistungsfähiges Tool, mit dem Sie schnell und einfach schöne und ansprechende Websites erstellen können.
Schritte zum Erstellen einer Navbar in der Mitte
1. Zunächst benötigen Sie das folgende Div-Markup, um eine Navbar in der Mitte zu erstellen :
2. In diesem Beispiel verwenden wir die container-Klasse, um einen Container zu erstellen, der den Inhalt auf der Seite zentriert.
3. Außerdem fügen wir dem nav-Element navbar-expand-lg navbar-light bg-light hinzu, um eine Navbar zu erstellen. Wir fügen auch eine Menüumschalttaste hinzu, wenn die Bildschirmgröße verkleinert wird.
4. Um Elemente innerhalb einer Navbar zu zentrieren, verwenden wir die justify-content-center-Klasse für ein div-Element mit der navbarNav-ID.
5. Schließen Sie die Erstellung der übrigen Navbar-Elemente nach Ihren Bedürfnissen ab, indem Sie Referenzen und Klassen für die aktiven Elemente hinzufügen.
6. Sie können dann die CSS-Stile verwenden, um das Erscheinungsbild der Navbar bei Bedarf anzupassen.
7. Ihre Navbar befindet sich nun in der Mitte der Seite.
Schritt 1: Bootstrap-Verbindung
Um eine Navbar mit Bootstrap zentriert zu erstellen, müssen Sie die entsprechenden Dateien mit Ihrem Projekt verbinden.
Laden Sie die neueste Version von Bootstrap von der offiziellen Website herunter und entpacken Sie sie.
Erstellen Sie im Projektordner ein neues Verzeichnis mit dem Namen "bootstrap" und fügen Sie darin den Ordner "css" und "js" hinzu.
Kopieren Sie die Bootstrap-Dateien.min.css" aus dem Ordner "css" und "bootstrap".min.js" aus dem Ordner "js" in die entsprechenden Ordner in Ihrem Bootstrap-Verzeichnis.
Als nächstes öffnen Sie Ihre HTML-Datei und fügen Sie die folgenden Codezeilen zum Abschnitt "head" hinzu:
Jetzt haben Sie Bootstrap erfolgreich mit Ihrem Projekt verbunden und können mit dem Erstellen einer Navbar in der Mitte beginnen.
Schritt 2: Erstellen eines Containers
Um eine zentrierte Navbar zu erstellen, wenn Sie Bootstrap verwenden, müssen Sie einen Container erstellen, der die gesamte navbar enthält. Dies kann mit der container- oder container-Fluid-Klasse innerhalb des Tags erfolgen
Die container-Klasse beschränkt die Breite eines Containers auf einen bestimmten Wert, während die container-Fluid-Klasse den Container ohne Breiteneinschränkung als Vollbild darstellt.
Beispiel zum Erstellen eines Containers:
Beachten Sie, dass der Behälter innen sein muss
tags, bevor Sie mit der Erstellung der navbar beginnen.
Sobald Sie einen Container erstellt haben, können Sie Ihre Navbar darin hinzufügen, um eine in Ihrer Website zentrierte Navbar zu erstellen.
Schritt 3: Erstellen einer Navigationsleiste
Um eine Navigationsleiste zu erstellen, verwenden wir die "navbar" -Komponente in Bootstrap.
Zuerst erstellen wir einen Wrapper für unsere Navigationsleiste, indem wir dem Element die Klasse "navbar" zuweisen :
Jetzt ist unsere Navigationsleiste fertig. Wir haben einen Wrapper und einen Container für die Navigationsleistenelemente erstellt und Links für jedes Element hinzugefügt.
Schritt 4: Hinzufügen der Zentrierung
Um die Navbar horizontal in Bootstrap zu zentrieren, müssen Sie einige zusätzliche Stile verwenden. In der Grundstruktur der navbar gibt es eine Klasse "navbar-collapse", mit der Sie Links in der Navigationsleiste ein- oder ausblenden können, abhängig von der Bildschirmgröße. Um die navbar zu zentrieren, können Sie diesem Element die Klasse "justify-content-center" hinzufügen.
Hier ist ein Beispielcode, mit dem Sie die Navbar zentrieren können:
In diesem Beispiel wird die navbar-Klasse "justify-content-center" zu einem Element mit der Klasse "collapse navbar-collapse" hinzugefügt, um Links in der Navigationsleiste zentriert zu platzieren.
Nachdem Sie diese Änderungen am Code vorgenommen haben, wird die Navbar in der Mitte der Seite angezeigt.
Schritt 5: Hinzufügen von Stilen
Jetzt müssen Sie Stile hinzufügen, damit sich unsere Navbar in der Mitte der Seite befindet.
Zuerst erstellen wir eine neue Stilklasse navbar-center. Dann wenden wir diese Klasse auf das Element an navbar. Der Code würde folgendermaßen aussehen:
.navbar-center .navbarIm ersten Stilblock verwenden wir einen Flexcontainer und legen die Eigenschaft fest justify-content: center, damit die Elemente horizontal zentriert sind.
Im zweiten Stilblock verwenden wir die Eigenschaft align-items: center, damit die Elemente vertikal zentriert sind.
Nachdem Sie diese Stile hinzugefügt haben, wird die Navbar in der Mitte der Seite angezeigt. Sie können den Code ausführen und überprüfen, ob er funktioniert.
Beispielcode für eine zentrierte Navbar
Um eine Navbar in Bootstrap zentriert zu erstellen, können Sie den folgenden Code verwenden:
In diesem Beispiel werden die "justify-content-center" -Klassen auf den primären navbar-Container und seine inneren Elemente angewendet, um sie horizontal in der Mitte auszurichten. Dadurch wird ein zentrierter Navbar-Effekt erzeugt.
HTML-Code
Im Folgenden finden Sie ein Beispiel für HTML-Code, um eine zentrierte Navbar mit Bootstrap zu erstellen:
Dieser Code erstellt eine Navigationsleiste mit zentriertem Text und einem Dropdown-Menü, wenn sie auf mobilen Geräten angezeigt wird.
Sie können diesen Code in Ihrem Projekt verwenden und die Navigationsleiste nach Belieben anpassen.
