Bootstrap - Navigation Demo
Was ist eine Navbar?
Hallo那里，有抱负的网页开发者们！今天，我们将深入Bootstrap导航栏的精彩世界，或者我们喜欢称之为的“navbars”。想象一下你在建造一座房子 - navbar就像是连接所有房间的走廊。它是帮助访问者在你的网站上轻松移动的中心枢纽。
一个navbar是一个强大的导航组件，位于你的网页顶部，提供指向网站不同部分或页面的链接。它就像是访问者的路线图，引导他们穿越你的数字景观。
Warum Bootstrap für Navbars verwenden?
Bootstrap, meine Freunde, ist wie ein Heldentoolkit für Webentwickler. Es kommt vollgepackt mit vordesigneden Komponenten, die unser Leben einfacher machen. Die Verwendung von Bootstrap für Navbars bedeutet:
- Konsistenz über verschiedene Geräte hinweg (responsives Design)
- Leichte Anpassung
- Eingebaute Unterstützung für verschiedene Navigationsmuster
Nun, lasst uns die Ärmel hochwerren und anfangen zu bauen!
Grundstruktur einer Navbar
Hier ist die grundlegende Struktur einer Bootstrap Navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Deine Marke</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>
</ul>
</div>
</nav>Lassen Sie uns dies herunterbrechen:
-
<nav class="navbar navbar-expand-lg navbar-light bg-light">: Dies ist unser Haupt-Navbar-Container. Die Klassen definieren sein Erscheinungsbild und sein Verhalten. -
<a class="navbar-brand" href="#">: Hier kommt dein Markenname oder Logo hin. -
<button class="navbar-toggler">: Diese Schaltfläche erscheint auf kleineren Bildschirmen, um die Navbar umzuschalten. -
<div class="collapse navbar-collapse">: Dies enthält die Navbar-Elemente, die auf kleineren Bildschirmen zusammengeklappt werden. -
<ul class="navbar-nav">: Diese unsortierte Liste enthält unsere Navigationspunkte. -
<li class="nav-item">: Jeder.Listeneintrag repräsentiert einen Navigationspunkt.
Anpassung deiner Navbar
Farben ändern
Bootstrap bietet eine Vielzahl von Farbschemata. Lassen Sie uns eine dunkle Navbar versuchen:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<!-- Navbar-Inhalt -->
</nav>Hier haben wir navbar-light bg-light in navbar-dark bg-dark geändert. Es ist, als würde man deiner Navbar einen schicken, nächtlichen Look verleihen!
Hinzufügen eines Suchformulars
Möchtest du eine Suchfunktion hinzufügen? So geht's:
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Suchen" aria-label="Suchen">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>Füge dies in dein navbar-collapse-Div ein. Es ist, als würdest du einer Navigationshalle eine Lupe hinzufügen!
Dropdown-Menüs
Lassen Sie uns mit einem Dropdown-Menü aufpeppen:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Aktion</a>
<a class="dropdown-item" href="#">Eine andere Aktion</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Etwas anderes hier</a>
</div>
</li>Dies erstellt ein Dropdown-Menü in deiner Navbar. Es ist, als würdest du eine geheime Raumtür in deiner Navigationshalle hinzufügen!
Responsives Verhalten
Bootstrap Navbars sind standardmäßig responsive. Auf kleineren Bildschirmen kollabiert die Navbar in eine Schaltfläche (oft als "Burger-Menü" bezeichnet). Dies stellt sicher, dass deine Navigation auf allen Geräten nutzbar ist.
Um dies in Aktion zu sehen, versuche die Browserfenstergröße zu ändern. Du wirst bemerken, dass die Navbar-Elemente verschwinden und die Schaltfläche erscheint. Klicken auf diese Schaltfläche blendet deine Navigationspunkte in einem Dropdown-Format ein.
Best Practices
- Halte es einfach: Overwelmte Benutzer nicht mit zu vielen Optionen.
- Verwende klare Beschriftungen: Stelle sicher, dass deine Navigationspunkte leicht zu verstehen sind.
- Hebe die aktive Seite hervor: Verwende die
active-Klasse, um den Benutzern zu zeigen, wo sie sind. - Bedenke deine Marke: Wähle Farben und Stile, die zu deinem Gesamtdesign passen.
Fazit
Glückwunsch! Du hast deine erste Bootstrap Navbar erstellt. Denke daran, Übung macht den Meister. Probiere verschiedene Kombinationen aus, spiele mit Farben und vor allem, habe Spaß!
Hier ist eine Tabelle, die die wichtigsten Bootstrap-Klassen zusammenfasst, die wir verwendet haben:
| Klasse | Zweck |
|---|---|
| navbar | Definiert den Haupt-Navbar-Container |
| navbar-expand-lg | Setzt den Breakpoint für Navbar-Erweiterung |
| navbar-light/dark | Setzt das Farbschema der Navbar |
| bg-light/dark | Setzt die Hintergrundfarbe der Navbar |
| navbar-brand | Stylt den Marken-/Logobereich |
| navbar-toggler | Erzeugt die Schaltfläche zum Umschalten der Navbar |
| navbar-nav | Stylt die Liste der Navigationspunkte |
| nav-item | Stylt individuelle Navigationspunkte |
| nav-link | Stylt die Links innerhalb der Navigationspunkte |
| dropdown-toggle | Erzeugt eine Dropdown-Schaltfläche |
| dropdown-menu | Stylt das Dropdown-Menü-Container |
| dropdown-item | Stylt Elemente innerhalb eines Dropdown-Menüs |
Nun, zieh los und erschaffe erstaunliche Navbars! Denke daran, jede großartige Website beginnt mit einer großartigen Navigation. Viel Spaß beim Coden!
Credits: Image by storyset