Dieser Artikel enthält die grundlegenden Verwendungsmethoden der Bootstrap -Navigationsleiste als Referenz. Der spezifische Inhalt ist wie folgt
1. Bootstrap grundlegender Navigationsstil
Die Navigationsstangen werden hauptsächlich im Bootstrap -Framework über den ".nav" -Stil hergestellt. Der Standard -Stil ".nav" bietet nicht den Standardnavigationsstil. Ein anderer Stil muss an ihn verbunden sein, um effektiv zu sein, z. B. "NAV-TABs", "Nav-Pills" usw. Zum Beispiel gibt es in der rechten Seite ein Beispiel für eine Tab-Navigationsleiste im Code-Editor. Seine Implementierungsmethode besteht darin, dem UL-Tag und Nav-Tabs zwei Klassenstile hinzuzufügen
<ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> css3 </a> </li> <li> <a href = "##"> sass </a> </li> <a href = ## " href = "##"> Reaktionsschnur </a> </li> </ul>
2. Basisnavigationsleiste Bootstrap
Beim Erstellen einer grundlegenden Navigationsleiste umfasst dies hauptsächlich die folgenden Schritte:
Schritt 1: Fügen Sie zuerst den Klassennamen "navbar-nav" basierend auf der Navigationsliste hinzu (<ul class = "nav">)
Schritt 2: Fügen Sie einen Container (DIV) außerhalb der Liste hinzu und verwenden Sie die Klassennamen "Navbar" und "Navi-Default"
Die Hauptfunktion des "Navbar" -Stils besteht darin, die Auswirkungen der linken und rechten Polsterung und abgerundeten Ecken festzulegen, aber die mit der Farbe bezogenen Stile sind in keiner Weise festgelegt.
<div rollen = "navigation"> <ul> <li> <a href = "##"> Homepage </a> </li> <li> <a href = "##"> Serie von Tutorials </a> </li> <li> <a href = "##"> Einführung in berühmte Lehrer </li> </li> <a> <a> <a href <li> <a href = "##"> Über uns </a> </li> </ul> </div>
3. Fügen Sie den Titel zur Bootstrap -Navigationsleiste hinzu
In der Webseitenproduktion gibt es häufig einen Titel vor dem Menü (die Textgröße ist etwas größer als andere Texte). Tatsächlich hat das Bootstrap-Framework diese Überlegung auch für alle gemacht, die durch "Navi-Header" und "Navbar-Brand" implementiert werden.
<div rollen = "navigation"> <div> <a href = "##"> Navigationsleiste </a> </div> <ul> <li> <a href = "##"> homepage </a> </li> <li> <a href = "##"> Serie von Tutorials </a> </li> </li> </<a href = "############## <li> <a href = "##"> Erfolgreiche Fälle </a> </li> <li> <a href = "##"> Über uns </a> </li> </ul> </div>
4. Bootstrap -Navigationsleiste Sekundärmenü
Es ist auch sehr einfach, der Navigationsleiste ein sekundäres Menü hinzuzufügen
<div rollen = "navigation"> <div> <a href = "##"> Navigationsleiste </a> </div> <ul> <li> <a href = "##"> homepage </a> </li> <li> <a href = "##"> data-toggle = "Dropdown"> <la. href = "##"> css3 </a> </li> <li> <a href = "##"> JavaScript </a> </li> <li> <a href = "##"> php </a> </li> </li> </li> <a href = "##" href = "##"> erfolgreiche Fälle </a> </li> <li> <a href = "##"> Über uns </a> </li> </ul> </div>
5. Bootstrap -Navigationsleiste mit Form
Einige Navigationsbalken enthalten Suchformulare, und im Bootstrap-Framework finden Sie eine "Navigationsform". Die Methode ist sehr einfach zu verwenden. Platzieren Sie ein Formular mit dem Navi-Form-Klassennamen im Navigh-Container. Mit Navbar-Left ”kann das Formular links schweben, um eine bessere Ausrichtung zu erreichen. Im Bootstrap-Framework wird auch ein" Navi-Rechts "-Stil bereitgestellt, damit Elemente in der Navigationsleiste nach rechts ausgerichtet werden können.
<div role="navigation"> <div> <a href="##">Bootstrap</a> </div> <ul> <li><a href="##">Homepage</a></li> <li> <a href="##">data-toggle="dropdown">Series of tutorials<span></span></a> <ul> <li><a href = "##"> CSS3 </a> </li> <li> <a href = "##"> JavaScript </a> </li> <li> <a href = "##"> php </a> </li> </li> </li> <a href = "##"> </li> <li> <li> <li> <li> <li> <## href = "##"> Einführung in berühmte Lehrer </a> </li> <li> <a href = "##"> erfolgreiche Fälle </a> </li> <li> <a href = "##"> Über uns </a> </li> </ul> <Form Action = "## ###########"> </<divintyps "</<diving Type" </<divs "</</li. <Schaltfläche type = "Senden"> Suche </button> </form> </div>
6. Schaltflächen, Text und Links in der Bootstrap -Navigationsleiste
Zusätzlich zur Verwendung des A-Elements in Navi-Brand und der UL- und Navigationsform von Navi-Naven können andere Elemente in der Navigationsleiste des Bootstrap-Frameworks verwendet werden. Das Framework bietet drei weitere Stile:
1). Taste in der Navigationsleiste Navigbar-Btn
2). Text in der Navigationsleiste -Navigationsleiste
3) .Navbar-Link in der Navigationsleiste
Diese drei Stile unterliegen jedoch bestimmten Einschränkungen, wenn sie im Framework verwendet werden, und müssen in Kombination mit Navi-Marken- und Navi-Nav-Nave verwendet werden. Darüber hinaus gibt es bestimmte Einschränkungen der Menge. Im Allgemeinen wird es bei der Verwendung eines oder zwei kein Problem geben, und es wird Probleme geben, wenn es zwei überschreitet.
<div rollen = "navigation"> <div> <a href = "##"> bootstrap </a> </div> <ul> <li> <a href = "##"> navbar text </a> </li> <li> <a href = "##"> navbar text </li> <li> <li> </<a href = "##" <li> <a href = "##"> navress text </a> </li> </ul> </div> <div rollen = "navigation"> <div> <a href = "##"> bootstrap </a> </div> <div> <a href = " href = "##"> navbar text </a> </div> </div>
7. Bootstrap feste Navigationsleiste
In einem von vielen Fällen möchten Designer, dass die Navigationsleiste oben oder unten im Browser festgelegt wird, und die Anwendung dieser festen Navigationsleiste ist in der mobilen Entwicklung häufiger. Das Bootstrap -Framework bietet zwei Möglichkeiten, um Navigationsleisten zu beheben:
.Navbar-Fixed-Top: Die Navigationsleiste befindet sich oben im Browserfenster
.Navbar-fixiertes Boden: Die Navigationsleiste befindet sich am unteren Rand des Browserfensters
<div rollen = "navigation">… </div> <div> Ich bin zufrieden </div> <div rollen = "navigation">… </div>
8. Bootstrap -Paginierungsnavigation
Die nummerierte Paginationsnavigation kann die häufigste Paginierungsnavigation sein, insbesondere wenn viele Inhalte auf der Listenseite vorhanden sind, bietet sie Benutzern Pagination -Navigationsmethoden. Normalerweise verwenden viele Schüler die Strukturen Div> A und Div> Spannweite, um die PAGED -Navigation zu erstellen. Im Bootstrap -Framework wird jedoch eine Struktur wie ul> li> a verwendet, und dem UL -Tag wird eine Pagierungsmethode hinzugefügt.
<ul> <li> <a href = "#"> «</a> </li> <li> <a href ="#"> 1 </a> </li> <li> <a href ="#"> 2 </a> </li> <li> <a href =" href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> »» »</a> </li> </ul>
Im Bootstrap -Framework können Sie auch die Größe der Paginationstaste in verschiedenen Situationen festlegen.
1). Die Paginationsnavigation durch "Pagination-lg" größer machen;
2). Machen Sie die Paginationsnavigation durch "Pagination-sm" kleinerer
<ul>… </ul> <ul>… </ul> <ul>… </ul> <ul>… </ul>
Das Bootstrap-Framework bietet nicht nur die Seitennavigation mit der Seitennummer, sondern bietet auch die Navigation der Seitenwende. Diese Art der Paginierungsnavigation ist häufig auf einigen einfachen Websites wie persönlichen Blogs, Magazin -Websites usw. zu sehen. Diese Art der Paginierungsnavigation sieht nicht die spezifische Seitennummer angezeigt und bietet nur eine "vorherige Seite" und "nächste Seite".
In der tatsächlichen Verwendung ähnelt die Paginationsnavigation der Seitenwechsel der Seitennavigation mit Seitencodier und addiert dem UL-Tag die Pagerklasse.
<ul> <li> <a href = "#"> «vorherige Seite </a> </li> <li> <a href ="#"> nächste Seite» </a> </li> </ul>
Standardmäßig wird die Paging-Navigation der Seite in der Mitte angezeigt, aber manchmal müssen wir eine links und die andere rechts sein. Das Bootstrap -Framework bietet zwei Stile
Vorher: Lassen Sie die Schaltfläche "vorherige" übrig bleiben
Weiter: Lassen Sie die Schaltfläche "Weiter" auf der rechten Seite
<ul> <li> <a href = "#"> «vorherige Seite </a> </li> <li> <a href ="#"> nächste Seite» </a> </li> </ul>
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
Im obigen dreht sich alles um die Bootstrap -Navigationsleiste. Ich hoffe, es wird für das Lernen aller hilfreich sein.