Navs et onglets

Documentation et exemples d'utilisation des composants de navigation inclus dans Bootstrap.

Sur cette page

Navigation de base

La navigation disponible dans Bootstrap partage le balisage et les styles généraux, de la .navclasse de base aux états actif et désactivé. Échangez les classes de modificateurs pour basculer entre chaque style.

Le .navcomposant de base est construit avec flexbox et fournit une base solide pour la construction de tous les types de composants de navigation. Il inclut des remplacements de style (pour travailler avec des listes), un rembourrage de liens pour des zones d'accès plus larges et un style de base désactivé.

Le .navcomposant de base n'inclut aucun .activeétat. Les exemples suivants incluent la classe, principalement pour démontrer que cette classe particulière ne déclenche aucun style particulier.

Pour transmettre l'état actif aux technologies d'assistance, utilisez l' aria-currentattribut — en utilisant la pagevaleur de la page actuelle ou truede l'élément actuel dans un ensemble.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Les classes sont utilisées partout, de sorte que votre balisage peut être très flexible. Utilisez <ul>des s comme ci-dessus, <ol>si l'ordre de vos articles est important, ou roulez les vôtres avec un <nav>élément. Parce que les .navutilisations display: flex, les liens de navigation se comportent de la même manière que les éléments de navigation, mais sans le balisage supplémentaire.

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Modèles disponibles

Modifiez le style du .navcomposant s avec des modificateurs et des utilitaires. Mélangez et assortissez au besoin, ou construisez le vôtre.

Alignement horizontal

Modifiez l'alignement horizontal de votre navigation avec les utilitaires flexbox . Par défaut, les navs sont alignés à gauche, mais vous pouvez facilement les changer pour qu'ils soient alignés au centre ou à droite.

Centré avec .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Aligné à droite avec.justify-content-end :

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Vertical

Empilez votre navigation en changeant la direction de l'élément flexible avec l' .flex-columnutilitaire. Besoin de les empiler sur certaines fenêtres mais pas sur d'autres ? Utilisez les versions réactives (par exemple, .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Comme toujours, la navigation verticale est <ul>également possible sans s.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Onglets

Prend la navigation de base d'en haut et ajoute la .nav-tabsclasse pour générer une interface à onglets. Utilisez-les pour créer des régions tabulables avec notre plugin JavaScript tab .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Pilules

Prenez ce même code HTML, mais utilisez à la .nav-pillsplace :

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Remplir et justifier

Forcez le .navcontenu de votre à étendre toute la largeur disponible à l'une des deux classes de modificateurs. Pour remplir proportionnellement tout l'espace disponible avec vos .nav-items, utilisez .nav-fill. Notez que tout l'espace horizontal est occupé, mais que tous les éléments de navigation n'ont pas la même largeur.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Lorsque vous utilisez une <nav>navigation basée sur -, vous pouvez omettre en toute sécurité .nav-itemcar .nav-linkcela n'est nécessaire que pour les éléments de style <a>.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Pour les éléments de largeur égale, utilisez .nav-justified. Tout l'espace horizontal sera occupé par des liens de navigation, mais contrairement à ce .nav-fillqui précède, chaque élément de navigation aura la même largeur.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav 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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Similaire à l' .nav-fillexemple utilisant une <nav>navigation basée sur -.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Utilisation des utilitaires flexibles

Si vous avez besoin de variantes de navigation réactives, envisagez d'utiliser une série d' utilitaires flexbox . Bien que plus détaillés, ces utilitaires offrent une plus grande personnalisation à travers les points d'arrêt réactifs. Dans l'exemple ci-dessous, notre navigation sera empilée sur le point d'arrêt le plus bas, puis s'adaptera à une disposition horizontale qui remplit la largeur disponible à partir du petit point d'arrêt.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Concernant l'accessibilité

Si vous utilisez navs pour fournir une barre de navigation, assurez-vous d'ajouter un role="navigation"au conteneur parent le plus logique du <ul>, ou enveloppez un <nav>élément autour de l'ensemble de la navigation. N'ajoutez pas le rôle au lui- <ul>même, car cela l'empêcherait d'être annoncé comme une liste réelle par les technologies d'assistance.

Notez que les barres de navigation, même si elles sont visuellement stylées comme des onglets avec la .nav-tabsclasse, ne doivent pas recevoir de role="tablist", role="tab"ni d' role="tabpanel"attributs. Celles-ci ne sont appropriées que pour les interfaces à onglets dynamiques, comme décrit dans WAI ARIA Authoring Practices . Voir Comportement JavaScript pour les interfaces à onglets dynamiques dans cette section pour un exemple. L' aria-currentattribut n'est pas nécessaire sur les interfaces à onglets dynamiques puisque notre JavaScript gère l'état sélectionné en ajoutant aria-selected="true"sur l'onglet actif.

Utilisation des listes déroulantes

Ajoutez des menus déroulants avec un peu de HTML supplémentaire et le plugin JavaScript pour les listes déroulantes .

Onglets avec listes déroulantes

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Pilules avec listes déroulantes

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Toupet

variables

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Comportement JavaScript

Utilisez le plug-in JavaScript tab - incluez-le individuellement ou via le bootstrap.jsfichier compilé - pour étendre nos onglets et pilules de navigation afin de créer des volets tabulables de contenu local.

Les interfaces dynamiques à onglets, telles que décrites dans les pratiques de création WAI ARIA , nécessitent role="tablist", role="tab", role="tabpanel"et des aria-attributs supplémentaires afin de transmettre leur structure, leur fonctionnalité et leur état actuel aux utilisateurs de technologies d'assistance (telles que les lecteurs d'écran). Comme meilleure pratique, nous vous recommandons d'utiliser des <button>éléments pour les onglets, car ce sont des contrôles qui déclenchent un changement dynamique, plutôt que des liens qui naviguent vers une nouvelle page ou un nouvel emplacement.

Notez que les interfaces à onglets dynamiques ne doivent pas contenir de menus déroulants, car cela entraîne à la fois des problèmes de convivialité et d'accessibilité. Du point de vue de la convivialité, le fait que l'élément déclencheur de l'onglet actuellement affiché ne soit pas immédiatement visible (car il se trouve dans le menu déroulant fermé) peut prêter à confusion. Du point de vue de l'accessibilité, il n'existe actuellement aucun moyen sensé de mapper ce type de construction à un modèle WAI ARIA standard, ce qui signifie qu'il ne peut pas être facilement rendu compréhensible pour les utilisateurs de technologies d'assistance.

Il s'agit d'un espace réservé au contenu associé à l'onglet Accueil. Cliquer sur un autre onglet basculera la visibilité de celui-ci pour le suivant. L'onglet JavaScript permute les classes pour contrôler la visibilité et le style du contenu. Vous pouvez l'utiliser avec des onglets, des pilules et toute autre .navnavigation alimentée.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Pour vous aider à répondre à vos besoins, cela fonctionne avec <ul>le balisage basé sur -, comme indiqué ci-dessus, ou avec n'importe quel balisage arbitraire "roll your own". Notez que si vous utilisez <nav>, vous ne devez pas y ajouter role="tablist"directement, car cela remplacerait le rôle natif de l'élément en tant que point de repère de navigation. Au lieu de cela, passez à un élément alternatif (dans l'exemple ci-dessous, un simple <div>) et enroulez-le <nav>autour.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Le plugin tabs fonctionne également avec les pilules.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Et avec des pilules verticales.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

Utilisation des attributs de données

Vous pouvez activer une navigation par onglets ou pilules sans écrire de JavaScript en spécifiant simplement data-bs-toggle="tab"ou data-bs-toggle="pill"sur un élément. Utilisez ces attributs de données sur .nav-tabsou .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Via Javascript

Activer les onglets tabulables via JavaScript (chaque onglet doit être activé individuellement) :

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', function (event) {
    event.preventDefault()
    tabTrigger.show()
  })
})

Vous pouvez activer des onglets individuels de plusieurs manières :

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Effet fondu

Pour faire apparaître les onglets en fondu, ajoutez .fadeà chacun .tab-pane. Le premier volet d'onglet doit également .showrendre visible le contenu initial.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Méthodes

Méthodes et transitions asynchrones

Toutes les méthodes API sont asynchrones et démarrent une transition . Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine . De plus, un appel de méthode sur un composant en transition sera ignoré .

Consultez notre documentation JavaScript pour plus d'informations .

constructor

Active un élément d'onglet et un conteneur de contenu. L'onglet doit avoir soit un data-bs-targetou, si vous utilisez un lien, un hrefattribut, ciblant un nœud de conteneur dans le DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

Afficher

Sélectionne l'onglet donné et affiche son volet associé. Tout autre onglet précédemment sélectionné devient désélectionné et son volet associé est masqué. Revient à l'appelant avant que le volet d'onglet ne soit réellement affiché (c'est-à-dire avant que l' shown.bs.tabévénement ne se produise).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

disposer

Détruit l'onglet d'un élément.

getInstance

Méthode statique qui permet d'obtenir l'instance d'onglet associée à un élément DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Méthode statique qui permet d'obtenir l'instance d'onglet associée à un élément DOM, ou d'en créer une nouvelle au cas où elle n'aurait pas été initialisée

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Événements

Lors de l'affichage d'un nouvel onglet, les événements se déclenchent dans l'ordre suivant :

hide.bs.tab(sur l'onglet actuellement actif)
show.bs.tab(sur l'onglet à afficher)
hidden.bs.tab(sur l'onglet actif précédent, le même que pour l' hide.bs.tabévénement)
shown.bs.tab(sur l'onglet nouvellement actif qui vient d'être affiché, le même que pour l' show.bs.tabévénement)

Si aucun onglet n'était déjà actif, les événements hide.bs.tabet hidden.bs.tabne seront pas déclenchés.

Type d'événement	La description
`show.bs.tab`	Cet événement se déclenche lors de l'affichage de l'onglet, mais avant l'affichage du nouvel onglet. Utilisez `event.target`et `event.relatedTarget`pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
`shown.bs.tab`	Cet événement se déclenche lors de l'affichage d'un onglet après l'affichage d'un onglet. Utilisez `event.target`et `event.relatedTarget`pour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
`hide.bs.tab`	Cet événement se déclenche lorsqu'un nouvel onglet doit être affiché (et donc l'onglet actif précédent doit être masqué). Utilisez `event.target`et `event.relatedTarget`pour cibler respectivement l'onglet actif actuel et le nouvel onglet qui sera bientôt actif.
`hidden.bs.tab`	Cet événement se déclenche après l'affichage d'un nouvel onglet (et donc l'onglet actif précédent est masqué). Utilisez `event.target`et `event.relatedTarget`pour cibler respectivement l'onglet actif précédent et le nouvel onglet actif.

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})