Bootstrap - Navbars: Der Türsteher professioneller Web-Navigation

Hallo dort, zukünftige Web-Entwickler! Heute tauchen wir ein in eines der wichtigsten Bestandteile modernen Webdesigns: die Navbar. Als dein freundlicher Nachbarschafts-Computerlehrer freue ich mich darauf, dich durch die wunderbare Welt der Bootstrap Navbars zu führen. Nimm dir dein Lieblingsgetränk, setz dich bequem hin, und lasst uns gemeinsam dieses Coding-Abenteuer starten!

Bootstrap - Navbars

Funktionieren

Bevor wir mit dem Erstellen unserer Navbars beginnen, lassen wir uns darstellen, was sie sind und wie sie funktionieren. Eine Navbar, kurz für Navigationsleiste, ist wie die Landkarte deiner Website. Sie hilft den Benutzern, sich in deiner digitalen Kreation zurechtzufinden. In Bootstrap sind Navbars responsiv und standardmäßig zusammengeklappt, was bedeutet, dass sie sich wunderschön an verschiedene Bildschirmgrößen anpassen. Ist das nicht toll?

Basis-navbar

Lassen wir mit einer einfachen Navbar beginnen. Hier ist ein einfaches Beispiel:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">MyWebsite</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigation umschalten">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Startseite <span class="sr-only">(aktuell)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Über uns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dienstleistungen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kontakt</a>
</li>
</ul>
</div>
</nav>

Lassen wir das auseinanderbrechen:

Wir beginnen mit einem <nav>-Element mit Bootstrap-Klassen.
Die navbar-brand-Klasse ist für den Namen oder das Logo deiner Website.
Der navbar-toggler ist für die mobile Ansicht und erzeugt das berühmte "Burger"-Menü.
Innerhalb der navbar-collapse-Div haben wir unsere Navigationspunkte in einer unsortierten Liste.

Vertikale Navbar

Möchtest du Dinge aufmischen? Probieren wir eine vertikale Navbar:

<nav class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Vertical Nav</a>
<nav class="nav flex-column">
<a class="nav-link active" href="#">Startseite</a>
<a class="nav-link" href="#">Über uns</a>
<a class="nav-link" href="#">Dienstleistungen</a>
<a class="nav-link" href="#">Kontakt</a>
</nav>
</nav>

Der Zauber hier liegt in der flex-column-Klasse. Sie verwandelt unsere horizontale Navbar in eine schicke vertikale.

Zentrierte Navbar

Für diejenigen, die alles perfekt ausgerichtet haben möchten, hier ist, wie man die Navbar-Elemente zentriert:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active" href="#">Startseite</a>
<a class="nav-item nav-link" href="#">Über uns</a>
<a class="nav-item nav-link" href="#">Dienstleistungen</a>
<a class="nav-item nav-link" href="#">Kontakt</a>
</div>
</nav>

Die mx-auto-Klasse ist unser Held für die Zentrierung. Sie applies automatische Ränder auf beiden Seiten, um unseren Inhalt zu zentrieren.

Marke

Deine Marke ist deine Identität. Sehen wir, wie man sie erstrahlen lassen kann:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/pfad/zu/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
</nav>

Dieser Code fügt ein Logo neben deinem Markennamen hinzu. Die d-inline-block und align-top-Klassen stellen sicher, dass alles schön ausgerichtet ist.

Text

Manchmal braucht man einfach nur einige klare Worte in deiner Navbar:

<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar-Text mit einem inline-Element
</span>
</nav>

Die navbar-text-Klasse gestaltet deinen Text so, dass er der Navbar-Optik entspricht.

Bilder und Text

Lassen wir Bilder und Text kombinieren, um eine dynamischere Navbar zu schaffen:

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="/pfad/zu/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap
</a>
<span class="navbar-text">
Willkommen auf unserer Website!
</span>
</nav>

Dies erstellt eine Navbar mit sowohl einem Logo als auch einer willkommenden Nachricht. Sieht das nicht professionell aus?

Nav

Das nav-Komponent ist das Herz unserer Navbar. Sehen wir uns ein komplexeres Beispiel an:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigation umschalten">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Startseite <span class="sr-only">(aktuell)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Funktionen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Preise</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deaktiviert</a>
</li>
</ul>
</div>
</nav>

Dieses Beispiel enthält einen aktiven Link, reguläre Links und einen deaktivierten Link. Die sr-only-Klasse ist für Screenreader gedacht, um die Barrierefreiheit zu verbessern.

Navbar ohne Liste

Für ein cleaneres Aussehen kannst du eine Navbar ohne Liste erstellen:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Startseite</a>
<a class="nav-item nav-link" href="#">Funktionen</a>
<a class="nav-item nav-link" href="#">Preise</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Deaktiviert</a>
</div>
</nav>

Dies erreicht das gleiche Ergebnis, ohne <ul> und <li>-Tags zu verwenden.

Navbar mit Dropdown

Bereit für das nächste Level? Lassen wir eine Dropdown-Funktion zur Navbar hinzufügen:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Startseite</a>
<a class="nav-item nav-link" href="#">Link</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown-Link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Aktion</a>
<a class="dropdown-item" href="#">Weitere Aktion</a>
<a class="dropdown-item" href="#">ETwas anderes hier</a>
</div>
</div>
</div>
</nav>

Die dropdown-toggle-Klasse erstellt den Dropdown-Effekt, während dropdown-menu und dropdown-item den Dropdown-Inhalt gestalten.

Formulare

Brauchst du eine Suchleiste? Kein Problem! Hier ist, wie man ein Formular zur Navbar hinzufügt:

<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Suche" aria-label="Suche">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</nav>

Die form-inline-Klasse hält unsere Formular-elemente in einer Linie, perfekt für Navbars.

Farbschemata

Bootstrap bietet verschiedene Farbschemata. Hier ist eine dunkle Navbar:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Dunkle Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Startseite</a>
<a class="nav-item nav-link" href="#">Funktionen</a>
<a class="nav-item nav-link" href="#">Preise</a>
</div>
</nav>

Man ändert einfach navbar-light zu navbar-dark und bg-light zu bg-dark. Einfach!

Container

Für bessere Ausrichtung kannst du dein Navbar-Inhalt in einen Container einpacken:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Eingefügte Navbar</a>
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Startseite</a>
<a class="nav-item nav-link" href="#">Funktionen</a>
<a class="nav-item nav-link" href="#">Preise</a>
</div>
</div>
</nav>

Die container-Klasse zentriert den Inhalt und bietet eine responsive feste Breite.

Platzierung

Fest obenauf

Möchtest du, dass deine Navbar oben kleben bleibt? Hier ist wie:

<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fest obenauf</a>
</nav>

Die fixed-top-Klasse lässt deine Navbar oben auf der Seite bleiben, während der Benutzer scrollt.

Responsives Verhalten

Bootstrap Navbars sind standardmäßig responsiv. Sie kollabieren auf kleineren Bildschirmen und.extendieren auf größeren. Der Schlüssel ist die navbar-expand-*-Klasse:

<nav class="navbar navbar-expand-md navbar-light bg-light">
<!-- Navbar-Inhalt -->
</nav>

Diese Navbar wird auf mittelgroßen Bildschirmen und größer expandieren.

Schalter

Der Navbar-Schalter ist das, was das "Burger"-Menü auf mobilen Geräten erstellt:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigation umschalten">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Navbar-Inhalt -->
</div>
</nav>

Der navbar-toggler-Knopf steuert die Sichtbarkeit des Navbar-Inhaltes auf kleineren Bildschirmen.

Externes Inhalt

Du kannst auch Inhalt außerhalb des Navbars umschalten:

<nav class="navbar navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Navigation umschalten">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Zusammengeklappter Inhalt</h5>
<span class="text-muted">Über den Navbar-Brand umschaltbar.</span>
</div>
</div>

Dies erstellt einen Schalter, der Inhalte außerhalb des Navbars steuert.

Offcanvas

Last but not least, schauen wir uns eine Offcanvas Navbar an:

<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Schließen"></button>
</div>
<div class="offcanvas-body">
<!-- Offcanvas-Inhalt -->
</div>
</div>
</div>
</nav>

Dies erstellt eine Sidebar, die von der Seite hereingezogen wird, perfekt für mobile Navigation.

Und das ist es, Leute! Wir haben die Welt der Bootstrap Navbars durchquert, von grundlegenden Strukturen bis zu fortgeschrittenen Funktionen. Denke daran, dass Übung den Meister macht, also experimentiere ruhig mit diesen Beispielen. Frohes Coden und möge deine Navbars deine Benutzer immer sicher führen! |

Methode	Beschreibung
`.navbar()`	Initialisiert das Navbar-Komponent
`.collapse('toggle')`	Schaltet die Navbar-Zusammenfassung um
`.collapse('show')`	Zeigt die Navbar-Zusammenfassung
`.collapse('hide')`	Versteckt die Navbar-Zusammenfassung
`.offcanvas('toggle')`	Schaltet die Offcanvas Navbar um
`.offcanvas('show')`	Zeigt die Offcanvas Navbar
`.offcanvas('hide')`	Versteckt die Offcanvas Navbar

Credits: Image by storyset

Vorheriges Tutorial:

Bootstrap - Modal

Nächstes Tutorial:

Bootstrap - Navigationsleisten & Registerkarten