in English

Navs

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

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. 
<ul class="nav">
  <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">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" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">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" 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">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" 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">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" 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">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" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">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" 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">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" 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">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" 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">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" 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">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" 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">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" 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">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" 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">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. Ceux-ci ne sont appropriés que pour les interfaces à onglets dynamiques, comme décrit dans le modèle d'onglets ARIA Authoring Practices Guide . Voir Comportement JavaScript pour les interfaces à onglets dynamiques dans cette section pour un exemple.

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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Pilules avec listes déroulantes

<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="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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.

Si vous construisez notre JavaScript à partir de la source, cela nécessiteutil.js .

Les interfaces à onglets dynamiques, telles que décrites dans le modèle d'onglets ARIA Authoring Practices Guide , nécessitent role="tablist", role="tab", role="tabpanel"et des aria-attributs supplémentaires afin de transmettre leur structure, leurs fonctionnalités 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 le plug-in JavaScript pour les onglets ne prend pas en charge les interfaces à onglets contenant des menus déroulants, car ceux-ci entraînent à la fois des problèmes d'utilisation 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.

Contenu de l'espace réservé pour le panneau d'onglets. Celui-ci concerne l'onglet d'accueil. Vous emmène à des kilomètres de haut, si haut, parce qu'elle a ce sourire international. Il y a un étranger dans mon lit, il y a un martèlement dans ma tête. Oh non. Dans une autre vie je te ferais rester. Parce que je, je suis capable de tout. Se préparer pour ma bataille de couronnement. Utilisé pour voler l'alcool de vos parents et grimper sur le toit. Tonique, bronzé en forme et prêt, augmentez-le car il devient lourd. Son amour est comme une drogue. Je suppose que j'avais oublié que j'avais le choix.

Contenu de l'espace réservé pour le panneau d'onglets. Celui-ci concerne l'onglet profil. Vous avez la meilleure architecture. Timbres de passeport, elle est cosmopolite. Fin, frais, féroce, nous l'avons sous clé. Je n'avais jamais prévu qu'un jour je te perdrais. Elle te ronge le coeur. Ton baiser est cosmique, chaque mouvement est magique. Je veux dire ceux, je veux dire comme si c'était elle. Salutations proches, partons en voyage. Posséder la nuit comme le 4 juillet ! Mais vous préférez vous perdre.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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.

Contenu de l'espace réservé pour le panneau d'onglets. Celui-ci concerne l'onglet d'accueil. Vous emmène à des kilomètres de haut, si haut, parce qu'elle a ce sourire international. Il y a un étranger dans mon lit, il y a un martèlement dans ma tête. Oh non. Dans une autre vie je te ferais rester. Parce que je, je suis capable de tout. Se préparer pour ma bataille de couronnement. Utilisé pour voler l'alcool de vos parents et grimper sur le toit. Tonique, bronzé en forme et prêt, augmentez-le car il devient lourd. Son amour est comme une drogue. Je suppose que j'avais oublié que j'avais le choix.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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.

Contenu de l'espace réservé pour le panneau d'onglets. Celui-ci concerne l'onglet d'accueil. Je t'ai vu chanter du blues au centre-ville. Regardez-vous faire le tour du drain. Pourquoi ne me laisses-tu pas passer ? Lourde est la tête qui porte la couronne. Oui, nous faisons pleurer des anges, pleuvant sur terre d'en haut. Vous voulez voir le spectacle en 3D, un film. Vous êtes-vous déjà senti, senti si fin comme du papier. C'est oui ou non, non peut-être.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</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-toggle="tab"ou data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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) :

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 .

$().tab

Active un élément d'onglet et un conteneur de contenu. L'onglet doit avoir soit un data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('montrer')

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).

$('#someTab').tab('show')

.tab('disposer')

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

Événements

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

  1. hide.bs.tab(sur l'onglet actuellement actif)
  2. show.bs.tab(sur l'onglet à afficher)
  3. hidden.bs.tab(sur l'onglet actif précédent, le même que pour l' hide.bs.tabévénement)
  4. 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.targetet event.relatedTargetpour cibler respectivement l'onglet actif et l'onglet actif précédent (si disponible).
montré.bs.tab Cet événement se déclenche lors de l'affichage d'un onglet après l'affichage d'un onglet. Utilisez event.targetet event.relatedTargetpour 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.targetet event.relatedTargetpour cibler respectivement l'onglet actif actuel et le nouvel onglet qui sera bientôt actif.
onglet.bs.caché 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.targetet event.relatedTargetpour cibler respectivement l'onglet actif précédent et le nouvel onglet actif. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})