Die Navigationsleiste (NAVBAR) ist eine unabhängige Komponente in Bootstrap, und es gibt einen klaren Unterschied zwischen der Navigationsleiste (NAVBAR) und der Navigation (NAV) in Bootstrap. In der Navigationsleiste (NAVABAR) befindet sich eine Hintergrundfarbe, und die Navigationsleiste kann in verschiedenen Formen wie reinen Links, Formularen, Formularen und Navigation erfolgen.
1. Praktischer Kampf-Ein- Navigationsleiste mit Menü und Formular Level 2
<! DocType html> <html> <Head> <meta charset = "utf-8"> <title> Navigationsleiste </title> <link rel = "styleSheet" href = "http://netDNA.bootstrapcdn.com/bootstrap/3.1.1/CSS/Bootstrap.Min.Min.Min.Min.Min.Min.Min.Min.CSSS"> <- Body {Margin: 30px; Padding: 30px;} </style> </head> <body> <div rollen = "navigation"> <! <a href="##" data-toggle="dropdown">Blog<span></span></a> <!--Second Menu--> <ul> <li><a href="##">Second Menu</a></li> </li> </li> <li><a href="##">Forum</a></li> </ul> <!--Form--> <form action="##" rol = "search"> <div> <Eingabe type = "text" placeholder = "Bitte geben Sie Keywords ein"/> </div> <button type = "enden"> suche </button> </form> </div> <!-platzieren 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.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>Die Renderings sind wie folgt:
Zusätzlich zur Verwendung des A-Elements in Navi-Brand und der UL- und Navigationsform von Navi-Nav können andere Elemente in der Navigationsleiste von Bootstrap verwendet werden:
1) Taste in der Navigationsleiste naval-btn
2) Text in der Navigationsleiste -Navigationsleiste
3) Normale Link in der Navigationsleiste-Navigationsleiste-Link
2. Praktischer Kampf 2- feste Navigationsleiste
<!-Top Navigationsleiste-> <div rollen = "navigation"> <div> <a href = "##"> tital </a> </div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </li> <li> <li> <li> <a href </ul></div><!--Bottom navigation bar--><div role="navigation"> <div> <a href="##">Title</a> </div> <ul> <li><a href="##">Home</a></li> <li><a href="##">Blog</a></li> <li><a href = "##"> Forum </a> </li> </ul> </div> <!-Textinhalt-> <Div> Webseite Textinhalt </div>
Die Renderings sind wie folgt:
3. Praktische Dreieraktionsnavigationsleiste
Die Renderings sind wie folgt:
Manchmal besteht die Notwendigkeit, die Farbe umzukehren. Bootstrap bietet dafür eine umgekehrte Navigationsleiste, ersetzt jedoch nur den Namen der Navi-Dealf-Klasse durch Naval-Inverse, und dann wird die Hintergrundfarbe der Navigationsleiste und die Textfarbe geändert.
4. Praktische Vaginationsnavigation
1) Paginierungsnavigation mit Seitenzahlen
<!-Pagination: Normalgröße Pagination-lg: Machen Sie Pagination Navigation Bigger Pagination Pagination-SM: Machen Sie die Pagination kleiner-> <ul> <li> <a href = "#"> «home </a> </li> <li> <a href ="#"> 1 </a> <li> <li> <a. <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <!--Disable status--> <li><a href="#">Last page»</a></li></ul>
Die Renderings sind wie folgt:
2) Seitenwende- und Paginierungsnavigation
<ul> <li> <a href = "#"> «vorherige Seite </a> </li> <!-Behinderte Status-> <li> <a href ="#"> nächste Seite» </a> </li> </ul> <!-Links und rechts ausgetauscht. Seite »</a> </li> </ul>
Die Renderings sind wie folgt:
5. Praktische fünf Tags
In einigen Webseiten wird häufig ein Tag hinzugefügt, um den Benutzern einige zusätzliche Informationen zu erzählen, z. B.:
Dieser Effekt wird in Bootstrap in eine Etikettenkomponente extrahiert und im Stil ".label" hervorgehoben. Ähnlich wie bei der Schaltfläche Button Element bietet der Etikettenstil auch eine Vielzahl von Farben, hauptsächlich über diese Klassennamen, um die Hintergrundfarbe und die Textfarbe zu ändern:
Die Renderings sind wie folgt:
6. Praktischer Kampf sechs - Abzeichen
Abzeichen werden meistens verwendet, um Sie daran zu erinnern, wie viele ungelesene Nachrichten benötigt werden. In Bootstrap wird der "Abzeichen" -Stil verwendet, um den Auszeicheneffekt zu erzielen.
<!--navbar-default Navigation Bar Medal--><div role="navigation"> <div> <a href="##">Title</a> </div> <ul> <li><a href="##">Home</a></li> <li><a href="##">Blog</a></li> <li><a href = "##"> Forum <span> 10 </span> </a> </li> <li> <a href = "##"> Feedback </a> </li> </ul> </div>
Die Renderings sind wie folgt:
7. Praktische sieben - Popup -Box, die den Animationsübergang antreibt
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <title> Animierter Übergang Pop-up-Box </title> <link rel = "styleSheet" href = "http://netdna.bootStrapcdn.com/bootstrap/3.1.1.1/CSStrotStrap.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min. <Styl> body {margin: 30px; padding: 30px;} </style> </head> <body> <button type = "button"> klick me </button> <div id = "myModal"> <div> <div> <div> <button type <h4> Popt-up-Titel </h4> </div> <pt-Popt-up-Körperinhalte </p> </div> <div> <button type = "button" data-dismiss = "modal"> close </button> </div> </div> <!-/.modal-content-> </div> <!-/.modal--> <!-/. Am Ende des Dokuments, damit die Seite schneller geladen wird-> <!-Wenn Sie das JS-Plugin von Bootstrap verwenden möchten, müssen Sie zuerst JQuery aufrufen-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js. src = "http://maxcdn.bootStrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> <script> $ (function () {$ (". Btn"). klicken (function () {$ ("#mymodal"). }); </script> </body> </html>Die Renderings sind wie folgt:
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.
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial