Dokumentation und Beispiele für den leistungsstarken, reaktionsschnellen Navigations-Header von Bootstrap, die Navigationsleiste. Beinhaltet Unterstützung für Branding, Navigation und mehr, einschließlich Unterstützung für unser Kollaps-Plugin.
Wie es funktioniert
Folgendes müssen Sie wissen, bevor Sie mit der Navigationsleiste beginnen:
Navbars erfordern eine Umhüllung .navbarmit .navbar-expand{-sm|-md|-lg|-xl}für ansprechende Minimierungs- und Farbschemaklassen .
Navbars und ihre Inhalte sind standardmäßig flüssig. Verwenden Sie optionale Container , um ihre horizontale Breite zu begrenzen.
Verwenden Sie unsere Spacing- und Flex -Utility-Klassen, um den Abstand und die Ausrichtung innerhalb der Navigationsleisten zu steuern.
Navbars reagieren standardmäßig, aber Sie können sie einfach ändern, um dies zu ändern. Das Antwortverhalten hängt von unserem Collapse-JavaScript-Plugin ab.
Navigationsleisten werden beim Drucken standardmäßig ausgeblendet. Erzwingen Sie das Drucken, indem Sie .d-printdie .navbar. Siehe die Display -Utility-Klasse.
Stellen Sie die Zugänglichkeit sicher, indem Sie ein <nav>Element verwenden, oder, wenn Sie ein allgemeineres Element wie ein verwenden <div>, fügen role="navigation"Sie jeder Navigationsleiste ein hinzu, um sie explizit als Orientierungspunkt für Benutzer von Hilfstechnologien zu kennzeichnen.
Lesen Sie weiter für ein Beispiel und eine Liste der unterstützten Unterkomponenten.
Unterstützte Inhalte
Navbars verfügen über eine integrierte Unterstützung für eine Handvoll Unterkomponenten. Wählen Sie je nach Bedarf aus:
.navbar-brandfür Ihren Firmen-, Produkt- oder Projektnamen.
.navbar-navfür eine Navigation in voller Höhe und leichtgewichtig (einschließlich Unterstützung für Dropdowns).
.navbar-togglerzur Verwendung mit unserem Minimierungs-Plug-in und anderen Verhaltensweisen zum Umschalten der Navigation .
.form-inlinefür alle Formularsteuerelemente und Aktionen.
.navbar-textzum Hinzufügen von vertikal zentrierten Textfolgen.
.collapse.navbar-collapsezum Gruppieren und Ausblenden von Navigationsleisteninhalten nach einem übergeordneten Haltepunkt.
Hier ist ein Beispiel aller Unterkomponenten, die in einer responsiven Navigationsleiste mit Lichtdesign enthalten sind, die automatisch am lg(großen) Haltepunkt eingeklappt wird.
In diesem Beispiel werden die Hilfsklassen Farbe ( bg-light) und Abstand ( my-2, my-lg-0, mr-sm-0, my-sm-0) verwendet.
Marke
Das .navbar-brandkann auf die meisten Elemente angewendet werden, aber ein Anker funktioniert am besten, da einige Elemente möglicherweise Hilfsklassen oder benutzerdefinierte Stile erfordern.
Das Hinzufügen von Bildern zum .navbar-brandwird wahrscheinlich immer benutzerdefinierte Stile oder Dienstprogramme erfordern, um die richtige Größe zu erreichen. Hier sind einige Beispiele zur Veranschaulichung.
Nav
Navbar-Navigationslinks bauen auf unseren .navOptionen mit ihrer eigenen Modifikatorklasse auf und erfordern die Verwendung von Toggler-Klassen für das richtige Responsive-Styling. Die Navigation in Navbars wird auch wachsen, um so viel horizontalen Platz wie möglich einzunehmen, damit Ihre Navbar-Inhalte sicher ausgerichtet bleiben.
Aktive Zustände – mit .active– um anzuzeigen, dass die aktuelle Seite direkt auf .nav-links oder ihre unmittelbar übergeordneten .nav-items angewendet werden kann.
Und da wir Klassen für unsere Navs verwenden, können Sie den listenbasierten Ansatz ganz vermeiden, wenn Sie möchten.
Sie können auch Dropdowns in Ihrer Navigationsleiste verwenden. Dropdown-Menüs erfordern ein Wrapping-Element für die Positionierung, verwenden Sie also unbedingt separate und verschachtelte Elemente für .nav-itemund .nav-linkwie unten gezeigt.
Formen
Platzieren Sie verschiedene Formularsteuerelemente und Komponenten innerhalb einer Navigationsleiste mit .form-inline.
Als Teil dieser Navigationsleistenformulare werden auch verschiedene Schaltflächen unterstützt. Dies ist auch eine großartige Erinnerung daran, dass Dienstprogramme für die vertikale Ausrichtung verwendet werden können, um Elemente unterschiedlicher Größe auszurichten.
Text
Navigationsleisten können mit Hilfe von Textschnipsel enthalten .navbar-text. Diese Klasse passt die vertikale Ausrichtung und den horizontalen Abstand für Textzeichenfolgen an.
Mischen und kombinieren Sie es nach Bedarf mit anderen Komponenten und Dienstprogrammen.
Farbschemata
Dank der Kombination von Designklassen und background-colorDienstprogrammen war die Gestaltung der Navigationsleiste noch nie so einfach. Wählen Sie aus .navbar-lightfür die Verwendung mit hellen Hintergrundfarben oder .navbar-darkfür dunkle Hintergrundfarben. Passen Sie dann mit .bg-*Dienstprogrammen an.
Behälter
Obwohl dies nicht erforderlich ist, können Sie eine Navigationsleiste in ein einschließen .container, um sie auf einer Seite zu zentrieren, oder eine hinzufügen, um nur den Inhalt einer festen oder statischen oberen Navigationsleiste zu zentrieren .
Wenn sich der Container in Ihrer Navigationsleiste befindet, wird seine horizontale Polsterung an Haltepunkten entfernt, die niedriger als Ihre angegebene .navbar-expand{-sm|-md|-lg|-xl}Klasse sind. Dadurch wird sichergestellt, dass wir die Polsterung nicht unnötig in unteren Ansichtsfenstern verdoppeln, wenn Ihre Navigationsleiste eingeklappt ist.
Platzierung
Verwenden Sie unsere Positionsdienstprogramme , um Navigationsleisten an nicht statischen Positionen zu platzieren. Wählen Sie „oben fixiert“, „unten fixiert“ oder „oben fixiert“ (scrollt mit der Seite, bis sie ganz oben ist, und bleibt dann dort). Feste Navigationsleisten verwenden position: fixed, was bedeutet, dass sie aus dem normalen Fluss des DOM gezogen werden und möglicherweise benutzerdefiniertes CSS (z. B. padding-topauf dem <body>) erfordern, um Überschneidungen mit anderen Elementen zu vermeiden.
Navigationsleisten können .navbar-toggler, .navbar-collapseund .navbar-expand{-sm|-md|-lg|-xl}Klassen verwenden, um sich zu ändern, wenn ihr Inhalt hinter einer Schaltfläche zusammenbricht. In Kombination mit anderen Dienstprogrammen können Sie ganz einfach auswählen, wann bestimmte Elemente angezeigt oder ausgeblendet werden sollen.
Fügen Sie für Navigationsleisten, die niemals einklappen, die .navbar-expandKlasse zur Navigationsleiste hinzu. Fügen Sie für Navigationsleisten, die immer einklappen, keine .navbar-expandKlasse hinzu.
Umschalter
Navbar Toggler sind standardmäßig linksbündig, aber wenn sie einem gleichgeordneten Element wie einem folgen .navbar-brand, werden sie automatisch ganz rechts ausgerichtet. Wenn Sie Ihr Markup umkehren, wird die Platzierung des Umschalters umgekehrt. Nachfolgend finden Sie Beispiele für verschiedene Umschaltstile.
Ohne .navbar-brandam niedrigsten Haltepunkt angezeigt:
Mit einem Markennamen auf der linken Seite und einem Umschalter auf der rechten Seite:
Mit Umschalter links und Markenname rechts:
Externe Inhalte
Manchmal möchten Sie das Minimierungs-Plugin verwenden, um versteckte Inhalte an anderer Stelle auf der Seite auszulösen. Da unser Plugin auf dem idund dem data-targetMatching funktioniert, ist das ganz einfach!