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 mit einer Navigationsleiste mit Menü und Form des 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-fixierte 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 Drei-reagierende Navigationsleiste
<div rollen = "navigation"> <div> <!-.navbar-toggle style wird verwendet, um zu inhaltlich, die umschalten, dh das Element, in dem sich der Nav-Kollapse-Kollapsstil befindet-> <button type = "button" data-toggle = "collapse" data-target = ". <span> </span> <!-Stellen Sie sicher, dass die Navigationsbrand sowohl in breiten als auch in schmalen Bildschirmen angezeigt wird-> <a href = "##"> Titel </a> </div> <! Wenn das Symbol für die Symbolbar geklickt wird, erweitern Sie es erneut. Wenn der Bildschirm größer als 768px ist, wird er standardmäßig angezeigt. --> <div> <ul> <li><a href="##">Home</a></li> <li><a href="##">Blog</a></li> <li><a href="##">Forum</a></li> </ul> </div></div>
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 Vier-Pagination-Navigation
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:
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.