Bootstrap 4 Navs
Menus de navigation
Si vous souhaitez créer un menu horizontal simple, ajoutez la
.navclasse à un <ul>élément, suivi de .nav-item
pour chacun <li>et ajoutez la .nav-linkclasse à leurs liens :
Exemple
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Navigation alignée
Ajoutez la .justify-content-centerclasse pour centrer la navigation et la .justify-content-endclasse pour aligner la navigation à droite.
Exemple
<!-- Centered nav -->
<ul class="nav justify-content-center">
<!-- Right-aligned nav -->
<ul class="nav justify-content-end">
Navigation verticale
Ajoutez la .flex-columnclasse pour créer une navigation verticale :
Exemple
<ul class="nav
flex-column">
Onglets
Transformez le menu de navigation en onglets de navigation avec la .nav-tabsclasse. Ajoutez la .activeclasse au lien actif/actuel. Si vous souhaitez que les onglets soient basculables, consultez le dernier exemple sur cette page.
Exemple
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Pilules
Transformez le menu de navigation en pilules de navigation avec la .nav-pillsclasse. Si vous souhaitez que les pilules soient basculables, consultez le dernier exemple sur cette page.
Exemple
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Comprimés/pilules justifiés
Justifier les onglets/pilules avec la .nav-justifiedclasse (largeur égale) :
Exemple
<ul class="nav nav-pills
nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
Pilules avec liste déroulante
Exemple
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Onglets avec liste déroulante
Exemple
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li
class="nav-item dropdown">
<a class="nav-link
dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Link 1</a>
<a
class="dropdown-item" href="#">Link 2</a>
<a
class="dropdown-item" href="#">Link 3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
Onglets basculables / dynamiques
DOMICILE
La douleur elle-même est importante, mais la douleur est renforcée par le processus d'adipiscing, mais je lui donne le temps de la réduire afin que je fasse du bon travail et de la douleur.
Pour rendre les onglets basculables, ajoutez l' data-toggle="tab"attribut à chaque lien. Ajoutez ensuite une .tab-paneclasse avec un ID unique pour chaque onglet et encapsulez-les dans un
<div>élément avec class .tab-content.
Si vous souhaitez que les onglets apparaissent et disparaissent lorsque vous cliquez dessus, ajoutez la
.fadeclasse à.tab-pane :
Exemple
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</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>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Pilules basculantes / dynamiques
DOMICILE
La douleur elle-même est importante, mais la douleur est renforcée par le processus d'adipiscing, mais je lui donne le temps de la réduire afin que je fasse du bon travail et de la douleur.
Le même code s'applique aux pilules; changez seulement l'attribut data-toggle en data-toggle="pill":
Exemple
<!-- Nav pills -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#home">Home</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>
<!-- Tab panes -->
<div class="tab-content">
<div
class="tab-pane container active" id="home">...</div>
<div class="tab-pane
container fade"
id="menu1">...</div>
<div class="tab-pane
container fade" id="menu2">...</div>
</div>
Référence complète de Bootstrap 4 Nav
Pour une référence complète de toutes les options, méthodes et événements des onglets, accédez à notre Bootstrap 4 JS Tab Reference .