# Navigationsleisten
Navigationsleisten sind responsive Navigationsköpfe, die häufig verwendet werden, um Site-Navigationslinks, Branding und andere interaktive Elemente bereitzustellen.

## Hauptmerkmale
Navigationsleisten sind so konzipiert, dass sie responsiv sind und sich automatisch in **ein mobilfreundliches Menü** zusammenklappen, wenn sie auf kleineren Bildschirmen angezeigt werden. Sie können verschiedene Arten von Inhalten unterstützen, einschließlich Navigationslinks, Markenlogos, Suchleisten, Dropdown-Menüs und Schaltflächen.

## Verwendung
- Beginnen Sie mit der Einbindung der `navbar`-Klasse, um die Grundstruktur Ihrer Navigationsleiste zu erstellen;
- Verbessern Sie Ihre Navigationsleiste, indem Sie spezifische Elemente wie `navbar-brand` für das Branding, `navbar-nav` für Navigationslinks, `navbar-toggler` für die responsive Umschaltschaltfläche und `collapse` für zusammenklappbare Inhalte hinzufügen;
- Personalisieren Sie das Erscheinungsbild Ihrer Navigationsleiste weiter, indem Sie zusätzliche Klassen wie `bg-dark` anwenden, um die Hintergrundfarbe festzulegen.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TmF2aWdhdGlvbiBFeGFtcGxlIDE8L3RpdGxlPgogICAgPGxpbmsKICAgICAgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiCiAgICAgIHJlbD0ic3R5bGVzaGVldCIKICAgIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPG5hdiBjbGFzcz0ibmF2YmFyIG5hdmJhci1leHBhbmQtbGcgbmF2YmFyLWRhcmsgYmctZGFyayI+CiAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAgPCEtLSBCcmFuZC9sb2dvIC0tPgogICAgICAgIDxhIGNsYXNzPSJuYXZiYXItYnJhbmQiIGhyZWY9IiMiPkJyYW5kPC9hPgoKICAgICAgICA8IS0tIEJ1dHRvbiBmb3IgdG9nZ2xpbmcgbmF2YmFyIG9uIHNtYWxsIHNjcmVlbnMgLS0+CiAgICAgICAgPGJ1dHRvbgogICAgICAgICAgY2xhc3M9Im5hdmJhci10b2dnbGVyIgogICAgICAgICAgdHlwZT0iYnV0dG9uIgogICAgICAgICAgZGF0YS1icy10b2dnbGU9ImNvbGxhcHNlIgogICAgICAgICAgZGF0YS1icy10YXJnZXQ9IiNuYXZiYXJTdXBwb3J0ZWRDb250ZW50IgogICAgICAgICAgYXJpYS1jb250cm9scz0ibmF2YmFyU3VwcG9ydGVkQ29udGVudCIKICAgICAgICAgIGFyaWEtZXhwYW5kZWQ9ImZhbHNlIgogICAgICAgICAgYXJpYS1sYWJlbD0iVG9nZ2xlIG5hdmlnYXRpb24iCiAgICAgICAgPgogICAgICAgICAgPHNwYW4gY2xhc3M9Im5hdmJhci10b2dnbGVyLWljb24iPjwvc3Bhbj4KICAgICAgICA8L2J1dHRvbj4KCiAgICAgICAgPCEtLSBOYXZiYXIgbGlua3MgLS0+CiAgICAgICAgPGRpdiBjbGFzcz0iY29sbGFwc2UgbmF2YmFyLWNvbGxhcHNlIiBpZD0ibmF2YmFyU3VwcG9ydGVkQ29udGVudCI+CiAgICAgICAgICA8dWwgY2xhc3M9Im5hdmJhci1uYXYgbWwtYXV0byI+CiAgICAgICAgICAgIDwhLS0gSG9tZSBsaW5rIC0tPgogICAgICAgICAgICA8bGkgY2xhc3M9Im5hdi1pdGVtIGFjdGl2ZSI+CiAgICAgICAgICAgICAgPGEgY2xhc3M9Im5hdi1saW5rIiBocmVmPSIjIj5Ib21lPC9hPgogICAgICAgICAgICA8L2xpPgoKICAgICAgICAgICAgPCEtLSBBYm91dCBsaW5rIC0tPgogICAgICAgICAgICA8bGkgY2xhc3M9Im5hdi1pdGVtIj4KICAgICAgICAgICAgICA8YSBjbGFzcz0ibmF2LWxpbmsiIGhyZWY9IiMiPkFib3V0PC9hPgogICAgICAgICAgICA8L2xpPgoKICAgICAgICAgICAgPCEtLSBTZXJ2aWNlcyBsaW5rIC0tPgogICAgICAgICAgICA8bGkgY2xhc3M9Im5hdi1pdGVtIj4KICAgICAgICAgICAgICA8YSBjbGFzcz0ibmF2LWxpbmsiIGhyZWY9IiMiPlNlcnZpY2VzPC9hPgogICAgICAgICAgICA8L2xpPgoKICAgICAgICAgICAgPCEtLSBDb250YWN0IGxpbmsgLS0+CiAgICAgICAgICAgIDxsaSBjbGFzcz0ibmF2LWl0ZW0iPgogICAgICAgICAgICAgIDxhIGNsYXNzPSJuYXYtbGluayIgaHJlZj0iIyI+Q29udGFjdDwvYT4KICAgICAgICAgICAgPC9saT4KICAgICAgICAgIDwvdWw+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvZGl2PgogICAgPC9uYXY+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

# Navs
Navs sind vielseitige Navigationselemente, die für verschiedene Navigationszwecke verwendet werden können, wie z.B. Registerkartennavigation, Pillennavigation oder vertikale Navigation.

## Hauptmerkmale
Navs können sowohl für **horizontale als auch vertikale Navigationslayouts** genutzt werden und unterstützen verschiedene Stile, wie Registerkarten, Pillen und gerechtfertigte Navigation.

## Verwendung
- Beginnen Sie mit der Einbindung der `nav`-Klasse, um eine grundlegende Nav-Struktur zu erstellen;
- Füllen Sie Ihre Nav mit Navigationselementen unter Verwendung von `<a>`- oder `<button>`-Elementen, jeweils mit der `nav-item`-Klasse;
- Verbessern Sie das Erscheinungsbild und die Funktionalität Ihrer Nav weiter, indem Sie zusätzliche Klassen wie `nav-tabs` für Registerkartennavigation oder `nav-pills` für Pillennavigation anwenden.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TmF2aWdhdGlvbiBFeGFtcGxlIDI8L3RpdGxlPgogICAgPGxpbmsKICAgICAgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiCiAgICAgIHJlbD0ic3R5bGVzaGVldCIKICAgIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHVsIGNsYXNzPSJuYXYgbmF2LXRhYnMiIGlkPSJteVRhYiIgcm9sZT0idGFibGlzdCI+CiAgICAgIDwhLS0gSG9tZSBUYWIgLS0+CiAgICAgIDxsaSBjbGFzcz0ibmF2LWl0ZW0iIHJvbGU9InByZXNlbnRhdGlvbiI+CiAgICAgICAgPGEKICAgICAgICAgIGNsYXNzPSJuYXYtbGluayBhY3RpdmUiCiAgICAgICAgICBpZD0iaG9tZS10YWIiCiAgICAgICAgICBkYXRhLWJzLXRvZ2dsZT0idGFiIgogICAgICAgICAgaHJlZj0iI2hvbWUiCiAgICAgICAgICByb2xlPSJ0YWIiCiAgICAgICAgICBhcmlhLWNvbnRyb2xzPSJob21lIgogICAgICAgICAgYXJpYS1zZWxlY3RlZD0idHJ1ZSIKICAgICAgICAgID5Ib21lPC9hCiAgICAgICAgPgogICAgICA8L2xpPgoKICAgICAgPCEtLSBQcm9maWxlIFRhYiAtLT4KICAgICAgPGxpIGNsYXNzPSJuYXYtaXRlbSIgcm9sZT0icHJlc2VudGF0aW9uIj4KICAgICAgICA8YQogICAgICAgICAgY2xhc3M9Im5hdi1saW5rIgogICAgICAgICAgaWQ9InByb2ZpbGUtdGFiIgogICAgICAgICAgZGF0YS1icy10b2dnbGU9InRhYiIKICAgICAgICAgIGhyZWY9IiNwcm9maWxlIgogICAgICAgICAgcm9sZT0idGFiIgogICAgICAgICAgYXJpYS1jb250cm9scz0icHJvZmlsZSIKICAgICAgICAgIGFyaWEtc2VsZWN0ZWQ9ImZhbHNlIgogICAgICAgICAgPlByb2ZpbGU8L2EKICAgICAgICA+CiAgICAgIDwvbGk+CgogICAgICA8IS0tIENvbnRhY3QgVGFiIC0tPgogICAgICA8bGkgY2xhc3M9Im5hdi1pdGVtIiByb2xlPSJwcmVzZW50YXRpb24iPgogICAgICAgIDxhCiAgICAgICAgICBjbGFzcz0ibmF2LWxpbmsiCiAgICAgICAgICBpZD0iY29udGFjdC10YWIiCiAgICAgICAgICBkYXRhLWJzLXRvZ2dsZT0idGFiIgogICAgICAgICAgaHJlZj0iI2NvbnRhY3QiCiAgICAgICAgICByb2xlPSJ0YWIiCiAgICAgICAgICBhcmlhLWNvbnRyb2xzPSJjb250YWN0IgogICAgICAgICAgYXJpYS1zZWxlY3RlZD0iZmFsc2UiCiAgICAgICAgICA+Q29udGFjdDwvYQogICAgICAgID4KICAgICAgPC9saT4KICAgIDwvdWw+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4zLjIvZGlzdC9qcy9ib290c3RyYXAubWluLmpzIj48L3NjcmlwdD4KICA8L2JvZHk+CjwvaHRtbD4=

Erkunden Sie die Kernprinzipien des Bootstrap-CSS-Frameworks und entdecken Sie die Geheimnisse, um schnell und effizient responsive und visuell beeindruckende Websites zu erstellen. Durch praktische Erkundung der wichtigsten Dienstprogramme und Implementierung leistungsstarker Komponenten gewinnen Sie wertvolle praktische Erfahrungen, um Ihren Webentwicklungs-Workflow mit dem vielseitigen Toolkit von Bootstrap zu optimieren.

Tauchen Sie in das Wesen von Bootstrap ein und verfolgen Sie seine Reise von der Entstehung bis zur Gegenwart, wägen Sie seine Vor- und Nachteile ab und verstehen Sie die Voraussetzungen für eine effektive Implementierung.

Navigieren Sie durch die Installationsoptionen von Bootstrap. Wählen Sie zwischen einer schnellen Integration über das Content Delivery Network (CDN) oder einem individuelleren Ansatz mit dem Node Package Manager (NPM).

Erlangen Sie Kompetenz in den wichtigsten Bootstrap-Elementen, einschließlich des vielseitigen Rastersystems, der nuancierten Typografie, der dynamischen Verwendung von Schaltflächen, der präzisen Verwaltung von Rändern und Abständen sowie der Erstellung effektiver Formulare für nahtlose Benutzerinteraktion.

Erweitern Sie Ihre Bootstrap-Fähigkeiten mit fortgeschrittenen Themen, die dynamische Navigationsmenüs, reaktionsfähige Bildverarbeitung, vielseitige Kartenlayouts, interaktive Modale und ansprechende Karussells für fesselnde Benutzererlebnisse abdecken.

Erstellen Sie eine Portfolio-Website mit dem Bootstrap-Framework mit unserer Anleitung. Nutzen Sie die leistungsstarken Funktionen von Bootstrap. Dieser praxisorientierte Abschnitt hilft Ihnen, Ihre Fähigkeiten, Projekte und Erfolge zu präsentieren.

Bootstrap-Grundlagen für Moderne Websites

Navigation

Navigationsleisten

Hauptmerkmale

Verwendung

Navs

Hauptmerkmale

Verwendung