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. Bar 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 fixes de combat pratique
<! - 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 pratique en trois réponses
<div role = "Navigation"> <div> <! - Le style .navbar-toggle est utilisé pour le contenu qui rétrécit le basculement, c'est-à-dire l'élément où le style d'effondrement du NAV-Collapse est situé -> <Button Type = "Button" Data-Toggle = "Emballapse" Data-Target = ". <! - Assurez-vous que Navbar-Brand est affiché dans des écrans larges et étroits -> <a href = "##"> Title </a> </v> <! - Lorsque la largeur de la crise est inférieure à 768px, le contenu de l'iceau div.Navbar-Responsive-Collapse sera caché et l'icône de barre d'icône est affichée. Lorsque l'icône de barre d'icône est cliquée, développez-la à nouveau. Lorsque l'écran est supérieur à 768px, il sera affiché par défaut. -> <div> <ul> <li> <a href = "##"> home </a> </li> <li> <a href = "##"> blog </a> </li> <li> <a href = "##"> Forum </a> </li> </ul> </v> </v>
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 de quatre caginations
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:
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.