NAV -Menüs in Bootstrap 5
Dieser Artikel gibt Ihnen also detaillierte Kenntnisse über
- So erstellen Sie eine einfache NAV?
- Was sind die verschiedenen Bootstrap -Menüstile??
Heute werden wir verschiedene NAV -Menüs (Navigationsmenüs) diskutieren, die ein Benutzer entsprechend seiner Anforderung verwenden kann, ein reaktionsschnelles Design vorzunehmen.
So erstellen Sie eine einfache NAV?
Der grundlegende NAV unten wird mit Verwendung erstellt .Navigation Klasse mit
- Tag und .NAV-ITEM verwelken
- Schild:
Aber in Bootstrap 5 können wir NAV als HTML -Tag verwenden
Wir können auch die horizontale oder vertikale Ausrichtung des NAV -Inhalts gemäß den Entwurfsanforderungen ändern.
Horizontale Ausrichtung
- Start
- Center
- Ende
Start
Verwenden Sie die Kurs „Justify-Content-Start“, um den Inhalt von Nav-Inhalten horizontal im Start auszurichten:
Center
Verwenden Sie die Klasse „Justify-Content-Center“, um den Inhalt von NAV-Inhalten horizontal in der Mitte auszurichten:
Ende
Verwenden Sie am Ende horizontal die NAV-Inhalte, um die Klasse „Justify-Content-End“ zu verwenden:
Vertikale Ausrichtung
Verwenden Sie die "Flex-Säule" -Klasse, um die Nav-Inhalte vertikal auszurichten:So ist ein NAV -Menü vertikal ausgerichtet.
Bootstrap -Menüs -Stile
Bootstrap -Menüs werden in zwei Stilkategorien eingestuft:
- Registerkarten
- Pillen
Registerkarten
Um das NAV -Menü in Registerkarten umzuwandeln, fügen Sie einfach das hinzu .NAV-NAV-TABS Klasse zu deinem
Registerkarten verwenden
So verwenden Registerkarten
Registerkarten verwenden
- Schild
So verwenden Registerkarten
Pillen
Um das Navigationsmenü in Pillen umzuwandeln, fügen Sie einfach das hinzu .Navigationsfunktionen Klasse zu deinem
Pillen verwenden
So verwenden Pillen
Pillen verwenden
- Schild
So verwenden Pillen
- Tag werden erstellt.
Registerkarten mit Dropdown -Menü mit Verwendung
So erstellen Sie Registerkarten mit dem Dropdown -Menü mit dem Menü Tag, Verwendung .Dropdown-Liste Klasse mit .NAV-ITEM Klasse und wickeln Sie es um ein Anker -Tag, das enthält .Nav-Link, .Dropdown-Toggle Klassen zusammen mit Data-BS-Toggle = "Dropdown" Attribut. Wickeln Sie anschließend diesen Ankermarke um
Auf diese Weise verwenden Registerkarten mit dem Dropdown -Menü verwendet
Registerkarten mit Dropdown -Menü mit Verwendung
- Schild
So erstellen Sie Registerkarten mit dem Dropdown -Menü mit dem Menü
So wie Registerkarten mit Dropdown -Menüs verwenden
- Tag werden erstellt.
Pillen mit Dropdown -Menü verwenden
So erstellen Sie Pillen mit Dropdown -Menü mit dem Menü Tag, Verwendung .Dropdown-Liste Klasse mit .NAV-ITEM Klasse und wickeln Sie es um ein Anker -Tag, das enthält .Nav-Link, .Dropdown-Toggle Klassen zusammen mit Data-BS-Toggle = "Dropdown" Attribut. Wickeln Sie anschließend diesen Ankermarke um
So wie Pillen mit einem Dropdown -Menü verwenden
Pillen mit Dropdown -Menü verwenden
- Schild
So erstellen Sie Pillen mit Dropdown -Menü mit dem Menü Tag, Verwendung .Dropdown-Liste Klasse mit .NAV-ITEM Klasse und wickeln Sie es um ein Anker -Tag, das enthält .Nav-Link, .Dropdown-Toggle Klassen zusammen mit Data-BS-Toggle = "Dropdown" Attribut. Wickeln Sie anschließend diesen Ankermarke um
So wie Pillen mit einem Dropdown -Menü verwenden
- Tag werden erstellt.
Vertikale Pillen
Um vertikale Pillen zu erstellen, fügen Sie einfach eine Klasse hinzu .Flex-Säule mit .Nav-Pills Klasse.
Füllen und rechtfertigen Registerkarten und Pillenmenü
.Navigation Die Klasse wird verwendet, um Räume auf ungerechtfertigte Weise zu füllen, während .navigifiziert Die Klasse wird verwendet, um Räume auf gerechtfertigte Weise zu füllen.
Registerkarten mit .Navigation
Füllen Sie die unbedeckten Räume eines Behälters nur hinzufügen .Navigation Klasse mit .NAV-NAV-TABS. Aber die .Navigation Der Unterricht füllte nur die Räume, aber sie hat sie nicht gerechtfertigt.
So wie Registerkarten mit .Navigation werden erstellt.
Registerkarten mit .navigifiziert
.navigifiziert Die Klasse füllt nicht nur die idealen Räume, sondern verteilt ihn auch gleichermaßen unter allen NAV -Elementen.
So wie Registerkarten mit .navigifiziert werden erstellt.
Pillen mit .Navigation
Um die unbedeckten Räume eines Behälters zu füllen, fügen Sie einfach a hinzu .Navigation Klasse mit .Navigationsfunktionen. Aber die .Navigation Der Unterricht füllte nur die Räume, aber sie hat sie nicht gerechtfertigt.
So wie Pillen mit .Navigation werden erstellt.
Pillen mit .navigifiziert
.navigifiziert Die Klasse füllt nicht nur die idealen Räume, sondern verteilt ihn auch gleichermaßen unter allen NAV -Elementen.
So wie Pillen mit .navigifiziert werden erstellt.
Abschluss
NAV -Menüs werden mit Verwendung erstellt
- Und