Die Navigationsleiste ist eine gute Funktion und eine herausragende Funktion der Bootstrap -Website. Die Navigationsleiste ist eine reaktionsschnelle Meta -Komponente, die als Navigationstitel für eine Bewerbung oder Website fungiert. Die Navigationsleiste wird in der Ansicht des mobilen Geräts zusammengebrochen und die Navigationsleiste erweitert sich horizontal, wenn die verfügbare Ansichtsfensterbreite zunimmt. Im Kern der Bootstrap -Navigationsleiste enthält die Navigationsleiste die Definition von Stilen für Standortnamen und grundlegende Navigation.
Die Schritte zum Erstellen einer Standardnavigationsleiste sind wie folgt:
Um Links zur Navigationsleiste hinzuzufügen, fügen Sie einfach eine ungeordnete Liste mit Klasse .nav, .navbar-nav hinzu.
Die folgenden Beispiele teilen Ihnen die Navigationsleiste mit Bootstrap3. Der spezifische Inhalt ist wie folgt
Zum Beispiel
So schreiben Sie eine so bequeme Komponente
Verwenden Sie Bootstrap3!
Sagen Sie es uns direkt
Im Allgemeinen wird die Navigation in der folgenden Struktur platziert
<nav rollen = "navigation"> <div> <div> <a href = "#"> <img src = "..."> </a> </div> </div> </nav>
1. NAV -Tags
In der ersten Klasse ist die Navigationsleiste notwendig. Andere Eigenschaften sind optional.
Durch das Hinzufügen von Navi-Default wird die grundlegendste Navigation erstellt und wird nicht festgelegt, wo die Farbe transparent ist.
Fügen Sie die Farbe der Naval-Invers-Klasse hinzu, um schwarz zu werden
Fügen Sie Navi-fixiertes Top hinzu, um oben zu fixieren, und fügen Sie den naviabriegel-fixierten Boden hinzu, um unten zu fixieren
Der Effekt des Hinzufügens von Navi-Static-Tops ist wie folgt
<div>
Der Navigationsheader beispielsweise das Protokoll der Website, klicken Sie auf die Homepage oder den Namen der Website
Der Effekt ist wie oben
Ich denke, der Effekt wird besser sein, wenn ich ihn hier in Text ändern kann
2. Form
Das Hinzufügen von Formularen in der Navigation wie Suche, Anmeldung usw. ist ebenfalls üblich
Zum Beispiel meine Suche oben
<form rollen = "such"> <div> <Eingabe type = "text" placeholder = "such"> </div> <schalttype = "subieren"> suche </button> </form>
Erklären Sie, dass die Naval-Links-Klasse dieses Formular links positioniert
Natürlich gibt es auch eine Navi-Rechtsklasse
In ähnlicher Weise kann die Taste so hinzugefügt werden
<schaltetyp = "button"> signieren Sie </button>
Der Text kann so hinzugefügt werden
<p> als Mark Otto </p> angemeldet
Der Link kann so hinzugefügt werden
<p> als <a href = "#"> mark otto </a> </p> angemeldet
Auf diese Weise können Sie Navi-Right- oder Navi-Links-Klassen hinzufügen
Meine Navigation
<!-Navigation-> <div> <div id = "navcontainer"> <navenrolle = "navigation"> <div> <a href = "#"> xiansheng Library </a> </div> <Formrolle = "such"> <div> <Eingabe type = "text data-toggle="modal" data-target="#register" >Register</a></li> <li><a data-toggle="modal" data-target="#signin" >Login</a></li> </ul> </div> </div> </div> </nav> </div> </div> </div> </div>
Der Effekt ist wie folgt
Weitere Inhalte finden Sie im Artikel zum Lernen:
Bootstrap implementiert den Standard -Navigationsleisteneffekt
Bootstrap muss jeden Tag lernen (ii)
Bootstrap muss jeden Tag zusätzliche Navigation (Affix) Plugin lernen
Weitere Inhalte über Bootstrap finden Sie auch in speziellen Themen: "Bootstrap Learning Tutorial".
Die oben genannte ist die Navigationsleiste, die mit Bootstrap3 hergestellt wurde. Ich hoffe, es wird für das Lernen aller hilfreich sein und Ihre eigene Navigationsleiste herstellen