.nav
avec un élément, <ul>
.nav
à un élément, <ul>
, ou un élément <nav>
suivi de .nav-item
chacun <li>
et ajouter la classe .nav-link
à leurs liens.<ul class="nav nav-tabs nav-fill" id="le-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="accueil-tab" data-toggle="tab" href="#accueil"
role="tab" aria-controls="accueil" aria-selected="true">Accueil</a>
</li>
.nav-tabs
pour générer une interface à onglets. .nav-tabs
..active
au lien actif / actuel.<ul class="nav nav-tabs" id="le-tab" role="tablist">
.nav-pills
pour générer une interface à bouton. <ul class="nav nav-pills" id="le-tab" role="tablist">
nav-fill
pour forcer le contenu à étendre sur toute la largeur disponible dans l’une des deux classes nav-tabs
ou nav-pills
.<ul class="nav nav-tabs nav-fill" id="le-tab" role="tablist">
.justify-content-center
pour centrer la navigation et la classe .justify-content-end
pour aligner à droite la navigation..flex-column
pour créer une navigation verticale.data-toggle= "tab"
ou data-toggle= "pill"
, pour activer ou désactiver les boutons dynamiques sur chacun des liensdata-toggle="tab"
à chaque lien.data-toggle="pill"
à chaque lien..tab-content
qui englobera tous les contenus des onglets..tab-pane
et l’id
pour que l’onglet et le contenu souhaités soient bien connectés ensemble.
fade
est ajoutée à chaque panneau pour obtenir un effet progressif.show
pour le panneau qui doit s’afficher au chargement de manière à faire apparaître le panneau et avoir une animation à ce moment là également. .active
pour rendre le panneau actif.