Dans le cadre bootstrap, la navigation est indépendante en tant que composant de navigation. Selon différentes versions, le code source correspondant peut être trouvé:
Moins: Navs.less
Sass: _navs.scss
Navigation en forme de balise, également connue sous le nom de navigation à l'onglet
La navigation en forme de balise est implémentée via le style .nav-tabs. Lorsque vous effectuez une navigation en forme de balise, vous devez ajouter le nom de classe .nav-tabs dans le conteneur avec le nom de classe de navigation d'origine .nav
<ul> <li> <a href = "#"> Titre de navigation 1 </a> </li> <li> <a href = "#"> titre de navigation 2 </a> </li> <li> <a href = "#"> titre de navigation 3 </a> </li> <li> <a href = "#"> "#>" Navigation Title </a> Titre 5 </a> </li> </ul>
principe:
Afficher les éléments du menu Li en blocs et les arranger au même niveau, puis définir l'effet de suspension du style et de la souris des menus non-highlights
.NAV-TABS {Border-Bottom: 1px solide #ddd;}. Nav-tabs> li {float: gauche; marge-fond: -1px;}. Nav-tabs> li> a {margin-droite: 2px; line-height: 1.42857143; bordure: 1px transparente; > A: Hover {Border-Color: #eee #eee #ddd;}Généralement, l'onglet aura un élément actuellement sélectionné, il vous suffit d'ajouter le nom de classe.Active à sa balise (li).
<ul> <li> <a href = "#"> Titre de navigation 1 </a> </li> <li> <a href = "#"> titre de navigation 2 </a> </li> <li> <a href = "#"> titre de navigation 3 </a> </li> <li> <a href = "#"> "#>" Navigation Title </a> Titre 5 </a> </li> </ul>
.nav-tabs> li.active> a, .nav-tabs> li.active> a: hover, .nav-tabs> li.active> a: focus {couleur: # 555; curseur: par défaut; Color d'arrière-plan: #FFF; Border: 1px solide #ddd; Color-fond de la frontière: transparent;}En plus des options actuelles, certains onglets ont également un état désactivé. Pour réaliser cet effet, ajoutez simplement le nom de classe désactivé sur l'élément de balise.
.nav> li.disabled> a {couleur: # 999;}. nav> li.disabled> a: hover, .nav> li.disabled> a: focus {couleur: # 999; Décoration du texte: aucune; curseur: non allongé; Color d'arrière-plan: transparent;}Si vous souhaitez réaliser l'effet de cliquer sur l'élément de menu pour changer de contenu, vous devez coopérer avec le plug-in JS
Capsule (pilules) Navigation
Actuellement mis en surbrillance avec un effet d'angle arrondi, sa méthode d'implémentation est similaire à la navigation à l'onglet, et avec la même structure, il vous suffit de remplacer le nom de classe .nav-tabs par le nom de classe .NAV-PILLS
.NAV-PILLS> li {float: Left;}. NAV-PILLS> li> a {Border-Radius: 4px;}. NAV-PILLS> li + li {margin-left: 2px;}. NAV-PILLS> li.Active> a: hover, .nav-pills> li.active> a: focus {couleur: #fff; Color en arrière-plan: # 428bca;}Navigation empilée verticale
En plus de la navigation horizontale, il y a également une navigation verticale. Pour créer une navigation empilée verticale, il vous suffit d'ajouter le nom de classe. NAV-Stacké sur la base de .nav-piliers.
Par rapport à la navigation par capsule, l'essentiel est de empêcher les éléments de navigation de flotter, de les organiser verticalement, puis de laisser un certain espacement pour les éléments de navigation adjacents.
.nav-stacked> li {float: non;}. Nav-stacked> li + li {margin-top: 2px; marge-left: 0;} <ul> <li> <a href = "#"> Titre de navigation 0 </a> </li> <li> <a href = "#"> titre de navigation 1 </a> </li> <li> <a href = "#"> titre de navigation 2 </a> </li> <li> <a href = "#"> Navigation Title 3 </a> href = "#"> Titre de navigation 4 </a> </li> <li> <a href = "#"> Titre de navigation 5 </a> </li> </ul>La navigation d'empilement vertical est comme une ligne divisée entre le groupe de menu déroulant et le groupe, et il existe également une ligne divisée entre les éléments de navigation. Ajoutez simplement <li class = "Divider"> </li> entre les éléments de navigation.
<ul> <li> <a href = "#"> Titre de navigation 0 </a> </li> <li> <a href = "#"> titre de navigation 1 </a> </li> <li> <a href = "#"> Navigation Title 2 </a> </li> <li> </li> <li> <a href = "#"> Navigation Title 3 </a> href = "#"> Titre de navigation 4 </a> </li> <li> <a href = "#"> Titre de navigation 5 </a> </li> </ul>
.nav .nav-divider {hauteur: 1px; marge: 9px 0; débordement: caché; fond-couleur: # e5e5e5;}Navigation adaptative
La navigation adaptative fait référence à la navigation occupant toute la largeur du conteneur, et les éléments du menu peuvent s'adapter à la largeur des cellules de la table. La navigation adaptative est la même que le composant de bouton adaptatif fabriqué par .btn-group-justifié mentionné précédemment, mais lors de la navigation adaptative, le nom de classe .nav-justifié doit être utilisé avec .nav-tabs ou .nav piliers.
principe:
Définissez la largeur à 100% sur la liste UL, puis définissez l'écran: cellule de table pour chaque élément de menu Li, afin que la liste simule la forme d'une cellule de table;
.nav-justifié {width: 100%;}. nav-justifié> li {float: non;}. nav-justifié> li> a {margin-bottom: 5px; Text-Align: Center;}. NAV-Justified> .Dropdown .Dropdown-menu {top: auto; gauche: auto;} @ media (min-width: 768px) {.nav-justifié> li {affichage: table-cellule; Largeur: 1%; } .nav-justifié> li> a {margin-boot: 0; }}Il y a une condition de requête multimédia ci-dessus: @media (Min-Width: 768px) {...} signifie que la navigation adaptative ne peut être affichée que dans le style ci-dessus si la largeur de la fenêtre du navigateur est supérieure à 768px, mais lorsque la largeur de la fenêtre du navigateur est inférieure à 768px, elle sera affichée dans le style ci-dessous.
.nav-tabs et .nav-justifié sont utilisés ensemble, ce qui signifie la navigation d'onglet adaptative. Lorsque la largeur de la fenêtre du navigateur est inférieure à 768px, un traitement supplémentaire est effectué dans le style.
.nav-tabs.nav-justifié {largeur: 100%; Border-Bottom: 0;}. Nav-tabs.nav-justifié> li {float: non;}. NAV-tabs.nav-justifié> li> a {margin-bottom: 5px; Text-Align: Center;}. NAV-TABS.NAV-Justified> .Dropdown .Dropdown-MENU {TOP: Auto; gauche: auto;} @ media (min-width: 768px) {.nav-tabs.nav-justifié> li {affichage: table-cellule; largeur: .active> a: hover, .nav-tabs.nav-justifié> .active> a: hover, .nav-tabs.nav-justifié> .active> a: focus {border: 1px solide #ddd;} @ media (min-width: 768px) {.nav-tabs.nav-justifié> li> a {border-bottom: 1x solide #ddddd; Border-Radius: 4px 4px 0 0; } .nav-tabs.nav-justifié> .active> a, .nav-tabs.nav-justifié> .active> a: hover, .nav-tabs.nav-justifié> .active> a: focus {border-bottom-color: #fff; }}Menu de navigation plus éloignée (navigation secondaire)
Pour créer une navigation secondaire, vous n'avez qu'à utiliser Li comme conteneur parent, utilisez le nom de classe.
<ul> <li> <a href = "#"> Menu de navigation1 </a> </li> <li> <a href = "#"> Menu de navigation2 </a> </li> <li> <a href = "#"> Menu de navigation3 </a> </li> <li> <a href = "#"> Menu de navigation4 </a> Menu4 </a> </li> <li> <adata-toggle = "Dropdown"> Navigation Menu5 <span> </span> </a> <ul> <li> <a href = "#"> Drop down menu1 </a> </li> <li> <a href = "#" "Drop-Down menu2 </a> </li> <li> <a href =" # "Drop down2 </a> </li> <li> <a href =" # "Drop down2 </a> </li> <li> <a href =" #> Drop down2 </a> </li> <li> <a href = "#> Drop down Menu3 </a> </li> <li> <a href = "#"> menu déroulant4 </a> </li> </li> </li> <li> <a href = "#"> Menu de navigation 6 </a> </li> </ul>
Navigation au an
La chapelure est généralement utilisée pour la navigation, et leur fonction principale est de dire à l'utilisateur l'emplacement actuel de la page. La chapelure est également un composant de module indépendant dans le cadre de bootstrap.
Moins: chapelure.
Sass: _Beadcrumbs.scss
<l> <li> <a href = "#"> Accueil </a> </li> <li> <a href = "#"> Mon livre </a> </li> <li> CSS illustré </li> </l>
.Breadcrumb {padding: 8px 15px; margin-boot: 20px; list-style: Aucun; background-color: # f5f5f5; border-radius: 4px;}. Breadcrumb> li {affiche: block en ligne;}. "// 00A0";}. Breadcrumb> .Active {Color: # 999;}Ce qui précède utilise Li + Li: avant d'implémenter le séparateur entre Li et Li. Cette solution n'est pas prise en charge dans la version inférieure de IE.
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
Ce qui précède concerne cet article, j'espère qu'il sera utile à l'apprentissage de tout le monde.