In diesem Artikel wird das Menü und die Navigation von Bootstrap hauptsächlich vorgestellt.
Ab diesem Artikel werden wir wie folgt JavaScript-bezogene Dateien einführen:
<!-Platzieren Sie es am Ende des Body-Tags, damit die Seite schneller geladen wird.
<!-Wenn Sie das JS-Plugin von Bootstrap verwenden möchten, müssen Sie zuerst JQuery anrufen->
<script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script>
<!-Enthält alle Bootstrap JS-Plugins oder JS-Plugins, die bei Bedarf verwendet werden können->
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
In Bootstrap ist die Dropdown-Menükomponente eine eigenständige Komponente. Der Interaktionseffekt der Komponente von Bootstrap basiert auf Plugins, die von der JQuery -Bibliothek geschrieben wurden. Bevor Sie mit Bootstrap.min.js verwendet werden, müssen Sie zuerst jQuery.min.js laden, um wirksam zu werden.
1. Pulldown Menu-Basic-Verwendung
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Basic usage of drop-down menu</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!--css style--> <Styles> body {margin: 50px; padding: 50px;} </style> </head> <body> <div> <button type = "button" id = "DropdownMenu1" data-toggle = "Dropdown"> Dropdown-Menü "span> </span> </button> <ul rolle tabindex = "-1" href = "#"> Menü1 </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Menü2 </a> </li> <!-Setzen Sie den Status des Menüelements auf den aktuellen Status (.aktiv). href = "#"> Menü3 </a> </li> <!-Setzen Sie den Status des Menüelements auf deaktiviert (.Disabled)-> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Menü 4 </a> </li> <!-Pulldown Divider-> <li rollen = "> <A. href="#">Menu 4</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 4</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Menu 5</a></li> <li role="presentation"><a rollen = "Menuitem" tabindex = "-1" href = "#"> Menü 6 </a> </li> </ul> </div> <!-platzieren Sie es am Ende des Dokuments, damit die Seite schneller geladen wird-> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-einschließlich aller JS-Plugins für Bootstrap- oder JS-Plugins, die nach Bedarf verwendet werden können-> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Hinweis: Manchmal müssen nach oben springen, sodass Sie dem Namen "Dropdown" -Klass den Namen "Dropup" nur zum Namen "Dropup" hinzufügen müssen.
Die Renderings sind wie folgt:
2. Pulldown-Menüausrichtung
Das Dropdown-Menü in Bootstrap ist standardmäßig links ausgerichtet. Wenn Sie möchten, dass das Dropdown-Menü in Bezug auf den übergeordneten Container recht ausgerichtet ist, können Sie "Pull-Right" oder "Dropdown-Menu-Rechts" -Klassname zu "Dropdown-Menu" hinzufügen, wie unten gezeigt:
<!-Der Teil wie Code in 1-> ... <div> <button type = "button" id = "DropdownMenu1" data-toggle = "Dropdown"> Dropdown-Menü <span> </span> </button> <ul rollen = "Menü" musers "aria-labelledBy =" DropdownMenu1 "> <li rollen ="> <a-roll = "awuitem" | Element </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Dropdown-Menüelement </a> </li> </ul> </div> ...
Die Renderings sind wie folgt:
3. Button-Button-Gruppe
Die Knopfgruppe ist auch eine unabhängige Komponente. Es muss sich auf das Plugin von Taste.js verlassen, um normal auszuführen. Und Bootstrap.js hat die Plug-in-Funktion der Taste.js integriert.
Verwendung: Verwenden Sie den Container "BTN-Gruppen" und legen Sie mehrere Tasten in diesen Container ein. Wie unten gezeigt:
<! DocType html> <html> <Head> <meta charset = "utf-8"> <title> Button-Gruppe </title> <link rel = "styleSheet" href = "http://netDNA.bootstrapcdn.com/bootstrap/3.1.1/CSS/Bootstrap.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.CSS. Körper {Margin: 30px; Polsterung: 30px; } </style></head><body><div> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button type="button"><span></span></button> <button Typ = "Button"> <span> </span> </button> </div> <!-Platzieren Sie es am Ende des Dokuments, um die Seite schneller zu laden-> <! Einbeziehen aller Bootstrap -JS -Plugins oder JS -Plugins, die bei Bedarf aufgerufen werden können -> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Die Renderings sind wie folgt:
4. Buttons - verschachtelte Gruppierung
Oft arrangieren wir häufig das Dropdown-Menü und die gewöhnlichen Knopfgruppen, um einen Effekt zu erzielen, der dem Navigationsmenü ähnelt. Bei Verwendung der verschachtelten Gruppierung von Bootstrap-Tasten müssen Sie nur den Container "Dropdown" ersetzen, der das Dropdown-Menü mit "BTN-Gruppen" erstellt und auf dem gleichen Niveau wie die normalen Tasten platziert. Wie unten gezeigt:
<!-Ausgelassene Teile wie Code in 3-> ... <Div> <button type = "button"> home </button> <div> <button data-toggle </ul> </div> <button type = "button"> java webentwicklung </button> <button type = "button"> PHP -Entwicklung </button> <button type = "button"> Big Data </button> </div> ...
Die Renderings sind wie folgt:
Im tatsächlichen Gebrauch wird der vertikale Anzeigeeffekt immer auftreten. Dieser Stil ist auch in Bootstrap bereitgestellt. Wir müssen nur den Namen "BTN-Gruppen" der horizontalen Gruppierung in "BTN-Gruppen-vertikal" ändern, um die vertikale Gruppierung des Taste zu erkennen.
5. Tasteäquivalent-Taste
Die Implementierungsmethode der Equalization -Taste (adaptive Gruppierungstaste) ist ebenfalls sehr einfach. Sie müssen der unten gezeigten Schaltfläche "Btn-Gruppe" nur einen "BTN-Gruppen-zu-Gereinigungs-Namen" -Kassame hinzufügen:
<div> <a href = "#"> Ein Drittel </a> <a href = "#"> Ein Drittel </a> <a href = "#"> ein Drittel </a> <a href = "#"> ein Drittel </a> </div>
Die Renderings sind wie folgt:
6. Navigation - Grundnutzung
Die Navigationsstangen werden hauptsächlich in Bootstrap durch den ".nav" -Stil hergestellt. .nav "muss mit einem anderen Stil verbunden sein, um effektiv zu sein, wie" nav-tabs "," nav-pills "usw.
<! DocType html> <html> <Head> <meta charset = "utf-8"> <title> navigation-basic use <style > body{margin:30px;padding:30px;} </style></head><body><ul> <li><a href="##">Home</a></li> <li><a href="##">News</a></li> <li><a href="##">Blog</a></li> <!--Tag-shaped tab navigation--> <li> <a href = "##"> Forum </a> </li> <!-Behinderten Status-> <li> <a href = "##"> Feedback </a> </li> </ul> <! src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-einschließlich aller JS-Plugins für Bootstrap- oder JS-Plugins, die nach Bedarf genannt werden können-> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Die Renderings sind wie folgt:
7. Navigationskapsel (Pillen) Navigation
Kapsel (Pillen) Navigation, das aktuelle Element wird hervorgehoben und hat einen abgerundeten Eckeffekt. Ersetzen Sie einfach den Klassennamen "Nav-Tabs" durch "Nav-Pills":
<ul> <!--Current Status--> <li><a href="##">Home</a></li> <!--Suspended Status--> <li><a href="##">News</a></li> <li> <a href="##" data-toggle="dropdown">Blog<span></span></a> <ul> <!--Second Menu--> <li><a href = "##"> Front-End-Blog </a> </li> <li> <a href = "##"> Java-Blog </a> </li> </li> </li> <li> <a href = "##"> Forum </a> </li> <!
Die Renderings sind wie folgt:
8. Navigation - vertikal gestapelte Navigation
Um die vertikale Stack-Navigation zu erstellen, müssen Sie nur einen "Nav-gestapelten" Klassennamen hinzufügen, der auf "Nav-Pills" basiert:
<ul> <li><a href="##">Home</a></li> <li><a href="##">News</a></li> <li><a href="##">Blog</a></li> <li><a href="##">Forum</a></li> <!--Disabled--> <li><a href = "##"> Feedback </a> </li> </ul>
Die Renderings sind wie folgt:
9. Navigation - Adaptive Navigation
Die adaptive Navigation "Navigifiziert" (siehe die Datei bootstrap.css, Zeile 3585 bis Zeile 3607) muss in Verbindung mit "NAV-TABs" oder "Nav-Pills" verwendet werden. wie:
<ul> <li><a href="##">Home</a></li> <li><a href="##">News</a></li> <li><a href="##">Blog</a></li> <li><a href="##">Forum</a></li> <!--Disabled--> <li><a href = "##"> Feedback </a> </li> </ul>
Die Renderings sind wie folgt:
10. Navigationsbreadcrumb
Breadcrumb ist auch eine unabhängige Modulkomponente, die im Allgemeinen für die Navigation verwendet wird, und seine Hauptfunktion besteht darin, dem Benutzer den aktuellen Speicherort der Seite (aktueller Speicherort) mitzuteilen. Die Verwendungsmethode ist sehr einfach. Fügen Sie die Breadcrumb -Klasse zu OL hinzu:
<ol> <li> <a href = "#"> home </a> </li> <li> <a href = "#"> China </a> </li> <li> peking </li> </ol>
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.