Navigationsbalken sind reaktionsschnelle Meta -Komponenten, die als Navigationsheader in Ihrer App oder Website fungieren.
1. Standardnavigationsleiste
Die Navigationsleiste kann auf dem mobilen Gerät gefaltet (und können ein- und ausgeschaltet werden) und mit zunehmender Verfügung der verfügbaren Ansichtsfenster horizontal erweitert werden
Passen Sie die Schwellenwerte für Faltmodi und horizontale Modi an
Abhängig von der Länge dessen, was Sie in die Navigationsleiste setzen, müssen Sie möglicherweise den Schwellenwert für die Navigationsleiste einstellen, um den Faltmodus und den horizontalen Modus einzugeben. Sie können Ihre Anforderungen erfüllen, indem Sie den Wert der @Grid-Float-Breakpoint-Variablen ändern oder Ihren eigenen CSS-Code für Medienabfragen hinzufügen.
Erster Schritt:
Das äußerste Container-NAV-Tag und fügen Sie eine Navigationsstil-Klasse hinzu, um anzuzeigen, dass es zur Navigationsleiste gehört
<NAVrolle = "Navigation"> </nav>
Wirkung:
Schritt 2 : Header hinzufügen
<nav rollen = "navigation"> <div> <button type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1"> <spannung
Das Taste -Etikett ist mit drei Spannsymbolen verschachtelt. Geben Sie dann dem Navi-Toggle-Stil und Attribut zusammen (Zusammenbruch), und das Ziel ist beim Klicken von Datenziel.
Wenn sich das Fenster in gewissem Maße verengt, erscheint der Effekt auf die rechte.
Schritt 3: Verschachtelte Dropdown-Menü, Formularform, Dropdown-Menü.
Code:
<h1>Navigation bar</h1> <nav role="navigation"> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Brand</a> </div> <div id="bs-example-navbar-collapse-1"> <!--Nested drop-down menu--> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li> <a href = "#" data-toggle = "Dropdown"> Pulldown <b> </b> </a> <ul> <li> <a href = "#"> action </a> </li> <li> <a> href = "#"> action </a> <li> <a href = "#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#"#" href="#">Action</a></li> <li><a href="#">Action</a></li> <li><a href="#">Action</a></li> </li> </li> </ul> <!--Nested Forms--> <form action="" role="search"> <div> <input type="text" /> </div> <button Typ = "Button"> Senden </button> </form> <! ------> </div> </nav>
Vorschau:
Verbessern Sie die Zugänglichkeit von Navigationsstangen
Um die Zugänglichkeit zu verbessern, stellen Sie sicher, dass Sie jeder Navigationsleiste eine Rolle = "Navigation" hinzufügen.
2. Form
Durch das Platzieren der Form innerhalb von .navbar-Form ist eine gute vertikale Ausrichtung und einen zusammengebrochenen Zustand in einem schmaleren Ansichtsfenster. Verwenden Sie die Option Ausrichtung, um festzustellen, wo sie in der Navigationsleiste angezeigt wird.
Viel Code wird unter Verwendung von Mixin, .navbar-Form und .Form-Inline geteilt.
Code
<form action = "" rollen = "suche"> <div> <Eingabe type = "text"/> </div> <button type
Fügen Sie dem Eingabefeld Etikett Label hinzu
Wenn Sie dem Eingabefeld keine Etiketten -Tags hinzufügen, hat der Bildschirmleser Probleme. Für Formulare in der Navigationsleiste können Sie das Etikett-Tag über .sr-Nur-Klasse ausblenden.
3. Knöpfe
Code:
<schaltetyp = "button"> login </button>
Vorschau:
4. Text
Beim Wickeln von Text in .Navbar-Text wird das <p> -Tag normalerweise für den richtigen Zeilenabstand und die richtige Farbe verwendet.
Code -Snippet:
<p> text </p>
5. Nicht-Annavigation Links
Möglicherweise möchten Sie Standardlinks außerhalb der Standardnavigationskomponenten hinzufügen, und dann kann die Verwendung von .navbar-Link-Klasse dem Link die richtige Standard- und inverse Farbe geben.
Code -Snippet:
Kopieren Sie den Code wie folgt: <p> Dies ist der <a href = "#"> link </a> </p>
6. Komponentenausrichtung
Verwenden Sie die .navbar-links- oder .navbar-Right-Werkzeugklasse, um Navigationsverbindungen, Formulare, Schaltflächen oder Text auszurichten. Beide Klassen verwenden CSS -schwimmende Stile in bestimmte Richtungen. Um Navigationslinks auszurichten, müssen Sie sie in einer separaten Werkzeugklasse <ul> platzieren.
Diese Klassen sind Mixinversionen von .pull-links und .pull-right, sie sind jedoch auf Medienabfragen beschränkt, was es einfacher macht, Navigationsleistenkomponenten auf Bildschirmen verschiedener Größen zu verarbeiten.
7. oben befestigt
Durch das Hinzufügen von .Navbar-fixiertem Top kann die Navigationsleiste oben repariert werden. Der Effekt ist nicht genug.
Müssen die Polsterung für Körpermarke einstellen
Diese feste Navigationsleiste verdeckt andere Inhalte auf der Seite, es sei denn, Sie setzen die Polsterung über <body>. Verwenden Sie Ihren eigenen Wert oder verwenden Sie den unten angegebenen Code. Tipp: Die Standardhöhe der Navigationsleiste beträgt 50px.
Körper {padding-top: 70px; }
Es muss nach der Kerndatei von Bootstrap CSS platziert werden. (Abdeckungsprobleme)
8. unten fixiert
Verwenden Sie stattdessen .Navbar-fixiertes Bottom.
Müssen interne (Polsterung) für Körpermarke einstellen
Diese feste Navigationsleiste verdeckt andere Inhalte auf der Seite, es sei denn, Sie setzen die Polsterung am Ende der <body>. Verwenden Sie Ihren eigenen Wert oder verwenden Sie den unten angegebenen Code. Tipp: Die Standardhöhe der Navigationsleiste beträgt 50px.
Körper {Padding-Bottom: 70px; }
Verwenden Sie es unbedingt, nachdem Sie den Kern von Bootstrap -CSS geladen haben.
9. Bleib oben
Erstellen Sie eine Navigationsleiste mit der Seite, indem Sie .navbar-statische Top hinzuzufügen. Es verschwindet, als die Seite nach unten scrollt. Im Gegensatz zur .navbar-fixierten Klasse müssen Sie dem Körper keine Polsterung hinzufügen.
10. umgekehrte Farbnavigationsleiste
Das Erscheinungsbild der Navigationsleiste kann durch Hinzufügen der .navbar-Invers-Klasse geändert werden.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist eine detaillierte Einführung in die Verwendung der Bootstrap -Navigationsleiste. Ich hoffe, es wird für das Lernen aller hilfreich sein.