La barre de navigation (NAVBAR) est un composant indépendant de Bootstrap, et il existe une différence claire entre la barre de navigation (NAVBAR) et la navigation (NAV) dans Bootstrap. Il y a une couleur d'arrière-plan dans la barre de navigation (Navbar), et la barre de navigation peut être sous diverses formes telles que des liens purs, des formulaires, des formulaires et de la navigation.
1. Barre de navigation de combat pratique avec menu et formulaire de niveau 2
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> barre de navigation </netdna.bootsstrapcdn.com/bootstrap/3.1.1/css/bootsstrap.min..com/bootstrap/3.1.1/css/bootsstrap.min.css "> <! Body {margin: 30px; padding: 30px;} </ style> </ head> <body> <div role = "Navigation"> <! - Le titre est implémenté via "Navbar-header" et "Navbar-Brand" -> <div> <a href = "##"> Title </a> </v> <ul> <li> <a href = "##"> home> </a> <ul> <li> <a href = "##"> home <a href = "##" data-toggle = "dropdown"> blog <span> </span> </a> <! - Second menu -> <ul> <li> <a href = "##"> Deuxième menu </a> </li> </li> </li> <li> <a href = "##"> Forum </a> </li> </l> rol = "search"> <div> <input type = "text" placeholder = "s'il vous plaît entrez les mots clés" /> </div> <bouton type = "soumettre"> Rechercher </fitton> </ form> </div> <! - Placez-le à la fin du document pour que la page charge soit plus rapide -> <! - Si vous souhaitez utiliser le plugin js de bootstrap, vous devez d'abord appeler jQuery -> <Script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </ script> <! - y compris tous les plugins JS pour les plugins bootstrap ou js qui peuvent être utilisés au besoin -> <script src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </ script> </ body> </html>Les rendus sont les suivants:
En plus d'utiliser l'élément A dans la marque naval et la forme UL et Navbar de Navbar-Nav, d'autres éléments peuvent être utilisés dans la barre de navigation de Bootstrap:
1) Bouton dans la barre de navigation Navbar-Btn
2) Texte dans la barre de navigation Navbar
3) Lien normal dans la barre de navigation Navbar-Link
2. Bar de navigation à 2 combats pratiques
<! - Top 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 = "##"> Pour </ul> </div> <! - Barre de navigation inférieure -> <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> <! - Contenu texte -> <div> Page Web Contenu texte </div>
Les rendus sont les suivants:
3. Bar de navigation à trois réactifs pratiques
Les rendus sont les suivants:
Parfois, il est nécessaire d'inverser la couleur. Bootstrap fournit une barre de navigation inversée pour cela, mais remplace simplement le nom de classe de Navbar diable par Navbar-inverse, puis la couleur d'arrière-plan de la barre de navigation et la couleur du texte seront modifiées.
4. Navigation pratique en quatre paginations
1) Navigation de pagination avec des numéros de page
<! - Pagination: Taille normale Pagination-LG: Rendre la navigation de pagination Pagination Pagination Pagination-SM: Rendre la pagination plus petite -> <ul> <li> <a href = "#"> «Home </a> </li> <li> <a href =" # "> 1 </a> </li> <li> <a href =" # "> 2 </a> <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <! - Désactiver le statut -> <li> <a href = "#"> dernière page »</a> </li> </ul>
Les rendus sont les suivants:
2) Turnage de page et navigation de pagination
<ul> <li> <a href = "#"> «Page précédente </a> </li> <! - Statut désactivé -> <li> <a href =" # "> Page suivante» </a> </li> </ul> <! - Alignez à gauche et à droite -> <ul> <li> <a href = "#>« Page précédente </a> </li> <li> <a href = ">« Page précédente </a> </li> Page »</a> </li> </ul>
Les rendus sont les suivants:
5. Five- Tags pratiques
Dans certaines pages Web, une balise est souvent ajoutée pour indiquer aux utilisateurs des informations supplémentaires, telles que:
Cet effet est extrait dans Bootstrap dans un composant d'étiquette et mis en évidence dans le style ".Label". Semblable au bouton Button Element, le style d'étiquette fournit également une variété de couleurs, principalement à travers ces noms de classe pour modifier la couleur de l'arrière-plan et la couleur du texte:
Les rendus sont les suivants:
6. Combat pratique six - badge
Les badges sont principalement utilisés pour vous rappeler le nombre de messages non lus nécessaires. Dans Bootstrap, le style "badge" est utilisé pour réaliser l'effet de badge.
<! - Navbar-Default Navigation Bar Médaille -> <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>
Les rendus sont les suivants:
7. Practical Seven - Pop-up Box qui stimule la transition d'animation
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Box pop-up de transition animée </netdna.bootstrapcdn.com/bootstrap/3 <style> Body {margin: 30px; padding: 30px;} </ style> </ head> <body> <bouton type = "Button"> cliquez moi </ bouton> <div id = "Mymodal"> <div> <div> <div> <Button Type = "Button" Data-Dismiss = <pank " <h4> title popt-up </h4> </ div> <v> <p> contenu corporel popt-up </p> </div> <div> <Button type = "Button" Data-Dismiss = "Modal"> Fermer </ Button> </div> </div> <! - /. À la fin du document pour rendre la page de chargement plus rapidement -> <! - Si vous souhaitez utiliser le plugin JS de Bootstrap, vous devez d'abord appeler jQuery -> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </ / Script> <! src = "http://maxcdn.bootstrappcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </cript> <cript> $ (function () {$ (". btn"). Click (function () {$ ("# mymodal"). modal ("togle");}); }); </cript> </ body> </html>Les rendus sont les suivants:
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap