Bootstrap - Navs und Tabs

Einführung

Hallo, ambitionierte Web-Entwickler! Heute tauchen wir in eines der am häufigsten verwendeten Komponenten im Webdesign ein: Navigationsmenüs und Tabs. Diese Elemente sind wie die Straßenschilder Ihrer Website, die die Benutzer durch verschiedene Abschnitte und Inhalte führen. Mit den Nav- und Tab-Komponenten von Bootstrap können wir schicke, responsive Navigationsysteme erstellen, die auf allen Geräten funktionieren. Also, lasst uns die Ärmel hochkrempeln und anfangen zu codieren!

Grundlegende Navigation

Lassen Sie uns mit den Grundlagen beginnen. Bootstrap bietet eine einfache Möglichkeit, Navigationsmenüs mit der .nav-Klasse zu erstellen. Hier ist ein einfaches Beispiel:

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dienste</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Kontakt</a>
</li>
</ul>

Dieser Code erstellt eine horizontale Liste von Navigationslinks. Die active-Klasse hebt die aktuelle Seite hervor, während die disabled-Klasse Links, die derzeit nicht klickbar sind, abgraut.

Verfügbare Stile

Bootstrap bietet verschiedene Stile für Ihre Navigationsmenüs. Lassen Sie uns zwei beliebte Varianten anschauen:

Nav Tabs

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nachrichten</a>
</li>
</ul>

Dies erstellt ein Tab-Navigationsmenü, perfekt zum Organisieren von Inhalten in verschiedene Abschnitte.

Nav Pills

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Startseite</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Profil</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Nachrichten</a>
</li>
</ul>

Der Pills-Stil verleiht Ihren Navigationslinks ein mehr button-ähnliches Erscheinungsbild.

Horizontale Ausrichtung

Sie können die Ausrichtung Ihrer Nav-Elemente einfach ändern. Hier ist wie:

<ul class="nav justify-content-center">
<!-- Nav-Elemente hier -->
</ul>

<ul class="nav justify-content-end">
<!-- Nav-Elemente hier -->
</ul>

Die justify-content-center-Klasse zentriert die Nav-Elemente, während justify-content-end sie nach rechts ausrichtet.

Arbeiten mit Flex-Utilities

Bootstrap Flex-Utilities geben Ihnen még mehr Kontrolle über Ihr Nav-Layout:

<nav class="nav flex-column">
<a class="nav-link active" href="#">Aktiv</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link disabled" href="#">Deaktiviert</a>
</nav>

Dies erstellt ein vertikales Nav-Menü mit der flex-column-Klasse.

Barrierefreiheit

Beim Erstellen von Navs ist es entscheidend, Barrierefreiheit zu berücksichtigen. Verwenden Sie <nav>-Elemente dort, wo es angebracht ist, und fügen Sie aria-current="page" zum aktiven Element hinzu:

<nav class="nav">
<a class="nav-link active" aria-current="page" href="#">Aktiv</a>
<!-- Andere Nav-Elemente -->
</nav>

Verwendung von Dropdowns

Navs können Dropdown-Menüs für komplexere Navigationsstrukturen enthalten:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Aktiv</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Aktion</a></li>
<li><a class="dropdown-item" href="#">Andere Aktion</a></li>
<li><a class="dropdown-item" href="#">Etwas anderes hier</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Getrennter Link</a></li>
</ul>
</li>
<!-- Andere Nav-Elemente -->
</ul>

Dieser Code erstellt ein Nav mit einem Dropdown-Menü. Das data-bs-toggle="dropdown"-Attribut aktiviert die Dropdown-Funktionalität.

Tabs mit Dropdowns

Sie können Dropdowns auch in Tab-Style-Navs einfügen:

<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Aktiv</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<!-- Dropdown-Elemente -->
</ul>
</li>
<!-- Andere Nav-Elemente -->
</ul>

Pills mit Dropdowns

Das gleiche Prinzip gilt für Pill-Style-Navs:

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Aktiv</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
<ul class="dropdown-menu">
<!-- Dropdown-Elemente -->
</ul>
</li>
<!-- Andere Nav-Elemente -->
</ul>

JavaScript-Verhalten

Bootstrap's JavaScript-Plugins können dynamische Verhaltensweisen zu Ihren Navs und Tabs hinzufügen. Hier ist, wie man ein Tab-Set mit Inhaltsfeldern erstellt:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Startseite</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profil</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Inhalt der Startseite...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Inhalt des Profils...</div>
</div>

Dieser Code erstellt ein Set von Tabs, die bei Klick verschiedene Inhaltsfelder anzeigen.

Barrierefreiheit

Um Ihre Tabs barrierefrei zu machen, verwenden Sie die role, aria-controls, aria-selected und aria-labelledby-Attribute wie im vorherigen Beispiel gezeigt.

Verwendung von Data-Attributen

Data-Attribute erlauben es Ihnen, das Tab-Verhalten ohne JavaScript zu steuern:

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Startseite</button>
</li>
<!-- Andere Tab-Schaltflächen -->
</ul>

Die data-bs-toggle="tab" und data-bs-target="#home"-Attribute aktivieren die Tab-Funktionalität ohne zusätzlichen JavaScript.

Über JavaScript

Sie können Tabs auch über JavaScript aktivieren:

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)

triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})

Dieser Code hängt Klick-Event-Listener an jede Tab-Schaltfläche an, aktiviert das entsprechende Tab bei Klick.

Fade-Effekt

Um einen Fade-Effekt zu Ihren Tabs hinzuzufügen, verwenden Sie die fade-Klasse:

<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
</div>

Dies erstellt einen sanften Übergangseffekt beim Wechsel zwischen Tabs.

Und das war's! Sie haben gerade gelernt, wie man Navigationsmenüs und Tabs mit Bootstrap erstellt und anpasst. Denken Sie daran, Übung macht den Meister, also probieren Sie diese Komponenten in Ihren eigenen Projekten aus. Viel Spaß beim Coden!

Methode	Beschreibung
Tab.getInstance(element)	Gibt die Tab-Instanz zurück, die mit einem DOM-Element assoziiert ist
Tab.getOrCreateInstance(element)	Gibt die Tab-Instanz zurück, die mit einem DOM-Element assoziiert ist oder erstellt eine neue
show()	Wählt die angegebene Tab aus und zeigt deren verbundenes Feld an
dispose()	Zerstört eine Tab-Instanz

Credits: Image by storyset