TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie erstelle ich eine Bootstrap 5-Navigation?

143

Die Navigationskomponente in Bootstrap wird verwendet, um eine Liste von Links mit verschiedenen Stilen zu erstellen. Grundsätzlich werden die Listenlinks als Navigationsmenü verwendet. In diesem Tutorial lassen Sie uns verschiedene Arten von Links erkunden, die mit der Bootstrap 5-Navigationskomponente erstellt werden können.

Bootstrap 5 Navs-Tutorial

  1. Erstellen grundlegender Navigationslinks
  2. Vertikal nein
  3. Registerkarten mit Navi
  4. Pillen im Navi hinzufügen
  5. Navi mit Pillen und gerechtfertigter Ausrichtung
  6. Reaktionsschnelles Navi
  7. Navi mit Dropdown-Menü
  8. Navi mit vertikalem Tab und Pille

1 Grundlegende Navigationslinks

Die Standard- und Basisnavigation sieht wie folgt aus:

Der Code für das Basisnavigationsgerät lautet wie folgt:

<ul class="nav"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

Unten sind die Klassen, die beim Erstellen der Standard-Navigationskomponente verwendet werden:

  • Das gesamte nav ist eine ungeordnete Liste mit der Klasse „.nav”.
  • Jeder
  • -Tag repräsentiert ein Navigationselement mit der Klasse „.nav-item”.
  • Innerhalb
  • -Tag wird das Anker- Tag verwendet, um den Link zum tatsächlichen Text mithilfe der Klasse ".nav-link" zu erstellen.

Der Inhalt von Nav kann mit Hilfe von zusätzlichen Klassen in der Mitte und rechts ausgerichtet werden

Tag wie folgt:

  • <ul class="nav justify-content-center”> – für die Ausrichtung der Mitte.
  • <ul class=”nav justify-content-end”> – für Ende oder Rechtsausrichtung.
  • <ul class=”nav nav-fill”> – Füllen Sie die volle horizontale Breite.
  • <ul class=”nav nav-justified”> – Füllen Sie die gesamte horizontale Breite aus, wobei jeder Nav-Link die gleiche Breite hat.

2 Vertikale Navigation

Sie können die Klasse "flex-column" verwenden, um den gesamten Navigationsinhalt in vertikalen Links anstatt in horizontalen auszurichten, wie unten gezeigt:

Und der Code zum Erstellen einer vertikalen Navigationskomponente ist unten:

<ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

3 Erstellen von Registerkarten mit Nav

Sie können auch ganz einfach Inhalte mit Registerkarten erstellen, indem Sie die Klasse ".nav-tabs" verwenden

Tag wie unten:

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

Die Klasse „.nav-tabs” wandelt das Standard-Nav in eine Registerkarte wie folgt um:

Wie erstelle ich eine Bootstrap 5-Navigation?

4 Hinzufügen von Pillen in Nav

Sie können den Links mithilfe der Klasse ".nav-pills" Pillen, Feld mit primärer Hintergrundfarbe, hinzufügen.

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

Das Ergebnis im Browser sieht wie folgt aus:

Wie erstelle ich eine Bootstrap 5-Navigation?

5 Nav mit Pillen und gerechtfertigter Ausrichtung

Wenn Sie möchten, dass die Navigationselemente auf die volle Breite ausgerichtet werden, fügen Sie die Klasse „.nav-fill” wie folgt hinzu:

<ul class="nav nav-pills nav-fill"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

Es wird das folgende Ergebnis erzeugen:

Wie erstelle ich eine Bootstrap 5-Navigation?

6 Responsive Nav-Komponente

Ab sofort reagieren die erstellten Navigationskomponenten nicht und Sie sollten zusätzliche Flexbox-Dienstprogrammklassen hinzufügen, um sie reaktionsfähig zu machen. Zum Beispiel können wir es mit der Klasse ".flex-md-row" wie folgt flexibel von mittelgroßen Geräten aus machen:

<ul class="nav nav-pills flex-column flex-md-row"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li> </ul>

7 Hinzufügen eines Dropdown-Menüs in Nav

Verwenden Sie die Klasse „.dropdown”, um ein Dropdown-Menü einzufügen und dann die Menüpunkte mit den Klassen „.dropdown-menu” und „.dropdown-item”.

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Link 1</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> <a class="dropdown-item" href="#">Link 4</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Link 5</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Link 6</a> </li> </ul>

Die Dropdown-Navigationskomponente mit Pillen sieht wie folgt aus:

Wie erstelle ich eine Bootstrap 5-Navigation?

8 Nav mit vertikalen Tabs und Pillen

Sie können auch mit Raster – Layout und einen vertikalen tabbed Inhalt unter Verwendung von Nav Komponente mit Pillen erstellen.

<div class="row"> <div class="col-3"> <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"> <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-expanded="true">TAB 1</a> <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-expanded="true">TAB 2</a> <a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill" href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3" aria-expanded="true">TAB 3</a> <a class="nav-link" id="v-pills-tab4-tab" data-toggle="pill" href="#v-pills-tab4" role="tab" aria-controls="v-pills-tab4" aria-expanded="true">TAB 4</a> </div> </div> <div class="col-9"> <div class="tab-content" id="v-pills-tabContent"> <div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-home-tab">Here is a content for tab 1.</div> <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">Here is a content for tab 2.</div> <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">Here is a content for tab 3.</div> <div class="tab-pane fade" id="v-pills-tab4" role="tabpanel" aria-labelledby="v-pills-tab4-tab">Here is a content for tab 4.</div> </div> </div> </div>

Im Browser wird folgendes Ergebnis ausgegeben:

Wie erstelle ich eine Bootstrap 5-Navigation?

Schauen Sie sich das Tutorial zur Bootstrap- Navbar-Komponente an, um mehr über die Navbar zu erfahren.


Bootstrap 5 lernen (Index )


Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen