Cet article présentera principalement le menu et la navigation de Bootstrap.
À partir de cet article, nous présenterons des fichiers liés à JavaScript, comme suit:
<! - Placez-le à la fin de la balise corporelle 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>
<! - Comprend tous les plugins JS Bootstrap ou JS qui peuvent être utilisés au besoin ->
<script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </ script>
Dans Bootstrap, le composant de menu déroulant est un composant autonome. L'effet d'interaction du composant de bootstrap est basé sur des plugins écrits par la bibliothèque jQuery, donc avant d'utiliser bootstrap.min.js, vous devez d'abord charger jQuery.min.js pour prendre effet.
1. Utilisation du menu à l'abri
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Utilisation de base du menu drop-down </netdna.bootstrapcdn.com/bootstrap/3.1/css/bootstrap.min.csS " Style -> <style> Body {margin: 50px; padding: 50px;} </ style> </ head> <pody> <v> <Button Type = "Button" id = "DropdownMenu1" Data-Toggle = "Dropdown" Menu drop-down <span> </span> </ bouton> <ul role = "Menu"> <lindedby = "DropdownMeNU1"> <li role = "Menua role = "MenuItem" tabindex = "- 1" href = "#"> menu1 </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> menu2 </a> </li> <! - Définir le statut de l'élément de menu à l'état actuel (.cactif) -> <li role = "présentation"> <a rôle = "Menuitem" tabindex = "- 1" href = "#"> menu3 </a> </li> <! - Définissez l'état de l'élément de menu sur Disabled (.Disabled) -> <li role = "présentation"> <a role = "MenuItem" tabindex = "- 1" href = "#"> menu 4 </a> </li> <! - Pull-Down Divider -> <li role = "présentation"> <a role = " tabindex = "- 1" href = "#"> menu 4 </a> </li> <li role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> menu 4 </a> </li> <li role = "présentation"> <a role = "menuitem" role = "présentation"> <a role = "menutem" tabindex = "- 1" href = "#"> menu 6 </a> </li> </ul> </div> <! - Placez-le à la fin du document pour rendre la page de chargement plus rapidement -> <! - Si vous voulez 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.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </ script> </ body> </html>Remarque: Parfois, il est nécessaire de rebondir vers le haut, vous n'avez donc qu'à ajouter le nom de classe "abandonner" au nom de classe "Dropdown".
Les rendus sont les suivants:
2. Alignement de menu en panne
Le menu déroulant de Bootstrap est à gauche par défaut. Si vous souhaitez que le menu déroulant soit aligné à droite par rapport au conteneur parent, vous pouvez ajouter un nom de classe "Pull-droite" ou "Dropdown-menu-right" à "Dropdown-menu", comme indiqué ci-dessous:
<! - Pièce omise telle que le code en 1 -> ... <v> <Button type = "Button" id = "DropdownMenu1" Data-Toggle = "Dropdown"> Menu Dropdown <span> </span> </futton> <ul Role = "Menu" Aria-LabelledBy = "DropdownMenu1"> <li rôle = "HREF =" Role = "MenileM" Élément de menu </a> </li> <li role = "présentation"> <a role = "Menuitem" tabindex = "- 1" href = "#"> Élément de menu de dropdown </a> </li> </ul> </div> ...
Les rendus sont les suivants:
3. Groupe de bouton-buts
Le groupe de boutons est également un composant indépendant. Il doit s'appuyer sur le plugin bouton.js pour s'exécuter normalement. Et bootstrap.js a intégré la fonction de plug-in bouton.js.
Utilisation: utilisez le conteneur "BTN-Group" et placez plusieurs boutons dans ce conteneur. Comme indiqué ci-dessous:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> Groupe de bouton </netdna.bootsstrapcdn.com/bootstrap/3.1.1/css/bootsstrap.min.css "> <! corps {marge: 30px; rembourrage: 30px; } </ style> </ head> <body> <div> <bouton type = "Button"> <span> </span> </ bouton> <Button Type = "Button"> <span> </ span> </ bouton> <Button Type = "Button"> <pan> </span> </ Button> <Button Type = "Button"> <pan> </span> </ bouton> <bouton de bouton = "Button"> <pander> Type = "Button"> <span> </ span> </ bouton> <bouton type = "Button"> <span> </ span> </ bouton> <bouton type = "Button"> <span> </ span> </ bouton> <Button Type = "Button"> <pan> </span> </ bouton> <Button Type = "Button"> <pander> </span> </ bouton> <bouton de type = "Button"> "> <pander> Type = "Button"> <span> </ span> </ bouton> <bouton type = "Button"> <span> </ span> </ bouton> <bouton type = "Button"> <span> </ span> </ bouton> <Button Type = "Button"> <pan> </span> </ bouton> <Button Type = "Button"> <pander> </span> </ bouton> <bouton de type = "Button"> "> <pander> Type = "Button"> <span> </span> </ bouton> </div> <! - Placez-le à 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://lib.baid.com/jquery/19.0/jquery.min. Y compris tous les plugins JS Bootstrap ou JS qui peuvent être appelés selon les besoins -> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </ script> </ body> </ html>Les rendus sont les suivants:
4. Boutons - groupement imbriqué
Plusieurs fois, nous organisons souvent le menu déroulant et les groupes de boutons ordinaires pour obtenir un effet similaire au menu de navigation. Lorsque vous utilisez le regroupement imbriqué des boutons bootstrap, il vous suffit de remplacer la "liste déroulante" du conteneur qui a fait le menu déroulant par "groupe BTN" et le placer au même niveau que les boutons ordinaires. Comme indiqué ci-dessous:
<! - Pièces omises telles que le code en 3 -> ... <v> <Button type = "Button"> Home </ Button> <div> <Button Data-Toggle = "Dropdown" Type = "Button"> Mobile Development <span> </span> </fitton> <ul> <li> <a href = "##"> Android </a> </li> <li> <a href = "##"> ios </a> </div> <Button Type = "Button"> Java Web Development </futton> <Button Type = "Button"> PHP Development </ftont> <Button Type = "Button"> Big Data </ftont> </div> ...
Les rendus sont les suivants:
Dans une utilisation réelle, l'effet d'affichage vertical sera toujours rencontré. Ce style est également fourni en bootstrap. Nous avons seulement besoin de changer le nom de classe "BTN-Group" du regroupement horizontal en "BTN-Groupe-Vertical" pour réaliser le regroupement vertical du bouton.
5. Bouton équivalent aux boutons
Le bouton Méthode d'implémentation de l'égalisation (bouton de groupement adaptatif) est également très simple. Il vous suffit d'ajouter un "nom de classe justifié par le groupe BTN au groupe" BTN-Group "comme indiqué ci-dessous:
<v> <a href = "#"> un tiers </a> <a href = "#"> un tiers </a> <a href = "#"> un tiers </a> <a href = "#"> un tiers </a> </div>
Les rendus sont les suivants:
6. Navigation - Utilisation de base
Les barres de navigation sont principalement fabriquées en bootstrap à travers le style ".nav". .nav "doit être attaché avec un autre style pour être efficace, comme" Nav-tabs "," Nav-Pills ", etc.
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tight> usage de navigation-basic </netdna.bootstrapcdn.com/bootstrap/3 <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> <a href = "##"> forum </a> </li> <! - Statut désactivé -> <li> <a href = "##"> feedback </a> </li> </ul> <! - Placez à la fin du document pour que la page charge plus rapidement -> <! 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 appelés au besoin -> <script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </ script> </ body> </html>Les rendus sont les suivants:
7. Navigation de la navigation (pilules) Navigation
Capsule (pilules) Navigation, l'élément actuel est mis en évidence et a un effet d'angle arrondi. Remplacez simplement le nom de classe "NAV-TABS" par "NAV-PILLS":
<ul> <! - Statut actuel -> <li> <a href = "##"> Accueil </a> </li> <! - Statut suspendu -> <li> <a href = "##"> actualités </a> </li> <li> <a href = "##" Data-Toggle = "Dropdown"> <pan> </pan> </a> href = "##"> Blog frontal </a> </li> <li> <a href = "##"> Java Blog </a> </li> </li> </li> <li> <a href = "##"> forum </a> </li> <! - statut désactivé -> <li> <a href = "##"> feedback
Les rendus sont les suivants:
8. Navigation - Navigation empilée verticale
Pour créer une navigation de pile verticale, il vous suffit d'ajouter un nom de classe "d'empilement de navigation" basé sur "NAV-PILLS":
<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> <! href = "##"> feedback </a> </li> </ul>
Les rendus sont les suivants:
9. Navigation - Navigation adaptative
Navigation adaptative "Nav-justifiée" (veuillez vous référer au fichier bootstrap.css, ligne 3585 à la ligne 3607) doit être utilisé en conjonction avec "NAV-TABS" ou "NAV-PILLS". comme:
<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> <! href = "##"> feedback </a> </li> </ul>
Les rendus sont les suivants:
10. Breadcrum de navigation
BreadCrumb est également un composant de module indépendant, généralement utilisé pour la navigation, et sa fonction principale est de dire à l'utilisateur l'emplacement actuel de la page (emplacement actuel). La méthode d'utilisation est très simple, ajoutez la classe de chapelure à OL:
<l> <li> <a href = "#"> Accueil </a> </li> <li> <a href = "#"> Chine </a> </li> <li> Beijing </li> </l>
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.