Bootstrap4 Navigation

Si vous souhaitez créer une barre de navigation horizontale simple, vous pouvez<ul>ajouter la classe.navsur l'élément, sur chaque<li>ajoutez la classe.nav-itemsur l'élément, ajoutez la classe.nav-linksur chaque lien :

Exemples

<ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">Lien</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Lien</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Lien</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Désactivé</a> </li> </ul>

Essayez-le »

Alignement de la navigation

.justify-content-centerla classe définit l'affichage centré de la navigation,.justify-content-endla classe définit l'alignement à droite de la navigation.

Exemples

<!--Navigation centrée--> <ul class="nav justify-content-center"> <!--Navigation alignée à droite--> <ul class="nav justify-content-end"> </div>

Essayez-le »

Navigation verticale

.flex-columnla classe est utilisée pour créer une navigation verticale :

Exemples

<ul class="nav flex-column">

Essayez-le »

Onglets

Utilisez.nav-tabs, la classe peut transformer la navigation en onglets. Ensuite, pour l'option sélectionnée, utilisez la classe .active pour marquer.

Exemples

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Actif</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Lien</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Lien</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Désactivé</a> </li> </ul>

Essayez-le »

Navigation en pilules

.nav-pillsclasse peut définir les éléments de navigation en forme de pilule.

Exemples

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Actif</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Lien</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Lien</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Désactivé</a> </li> </ul>

Essayez-le »

Navigation justifiée

.nav-justifiedclasse peut définir les éléments de navigation pour qu'ils soient affichés justifiés et de largeur égale.

Exemples

<ul class="nav nav-pills nav-justified">..</ul> <ul class="nav nav-tabs nav-justified">..</ul>

Essayez-le »

Menu déroulant à pilules

Exemples

<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">Actif</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Menu déroulant</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Lien 1</a> <a class="dropdown-item" href="#">Lien 2</a> <a class="dropdown-item" href="#">Lien 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Lien</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Désactivé</a> </li> </ul>

Essayez-le »

Menu déroulant d'onglets

Exemples

<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Actif</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Menu déroulant</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Lien 1</a> <a class="dropdown-item" href="#">Lien 2</a> <a class="dropdown-item" href="#">Lien 3</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Lien</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Désactivé</a> </li> </ul>

Essayez-le »

Onglets dynamiques

Si vous souhaitez rendre les onglets commutables dynamiquement, vous pouvez ajouter sur chaque liendata-toggle="tab"l'attribut..tab-paneclasse, correspondant au<div> du contenu de l'ongletles éléments utilisent.tab-contentclasse...

Si vous voulez un effet de fondu, vous pouvez, après.tab-pane, ajouter .fadeclasse :

Exemples

<!-- Onglets de navigation --> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a> </li> </ul> <!-- Panneaux d'onglets --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Essayez-le »

Pilules dynamiques

Pour les pilules dynamiques, il suffit de définir l'attribut data-toggle dans le code de l'exemple ci-dessus surdata-toggle="pill":

Exemples

<!-- Onglets de navigation --> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">Accueil</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a> </li> </ul> <!-- Panneaux d'onglets --> <div class="tab-content"> <div class="tab-pane active container" id="home">...</div> <div class="tab-pane container" id="menu1">...</div> <div class="tab-pane container" id="menu2">...</div> </div>

Essayez-le »
Autres extensions