Navegacions i pestanyes

Documentació i exemples sobre com utilitzar els components de navegació inclosos de Bootstrap.

En aquesta pàgina

Base nav

La navegació disponible a Bootstrap comparteix estils i marques generals, des de la .navclasse base fins als estats actiu i desactivat. Canvia les classes modificadores per canviar entre cada estil.

El .navcomponent base està construït amb flexbox i proporciona una base sòlida per construir tot tipus de components de navegació. Inclou algunes substitucions d'estil (per treballar amb llistes), algun farciment d'enllaços per a àrees de visita més grans i un estil bàsic desactivat.

El .navcomponent base no inclou cap .activeestat. Els exemples següents inclouen la classe, principalment per demostrar que aquesta classe en particular no activa cap estil especial.

Per transmetre l'estat actiu a les tecnologies d'assistència, utilitzeu l' aria-currentatribut, utilitzant el pagevalor de la pàgina actual o truede l'element actual d'un conjunt.

<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 s'utilitzen a tot arreu, de manera que el vostre marcatge pot ser molt flexible. Utilitzeu <ul>s com l'anterior, <ol>si l'ordre dels vostres articles és important, o feu servir el vostre amb un <nav>element. Com que .navs'utilitza display: flex, els enllaços de navegació es comporten igual que els elements de navegació, però sense el marcatge addicional.

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

Estils disponibles

Canvieu l'estil del .navcomponent s amb modificadors i utilitats. Barreja i combina segons sigui necessari, o crea el teu.

Alineació horitzontal

Canvieu l'alineació horitzontal del vostre navegador amb les utilitats flexbox . De manera predeterminada, els navegadors estan alineats a l'esquerra, però podeu canviar-los fàcilment al centre o a la dreta.

Centrat amb .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>

Alineat a la dreta amb .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

Apila la teva navegació canviant la direcció de l'element flexible amb la .flex-columnutilitat. Necessites apilar-los en algunes finestres, però no en altres? Utilitzeu les versions responsives (p. ex., .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>

Com sempre, la navegació vertical també és possible sense <ul>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>

Pestanyes

Agafa el navegador bàsic des de dalt i afegeix la .nav-tabsclasse per generar una interfície amb pestanyes. Utilitzeu-los per crear regions tabulables amb el nostre connector de JavaScript de pestanya .

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

Píndoles

Agafeu el mateix HTML, però feu servir .nav-pills:

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

Omplir i justificar

Força el teu .navcontingut a ampliar l'amplada total disponible una de les dues classes modificadores. Per omplir proporcionalment tot l'espai disponible amb els vostres .nav-item, feu servir .nav-fill. Observeu que tot l'espai horitzontal està ocupat, però no tots els elements de navegació tenen la mateixa amplada.

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

Quan utilitzeu una <nav>navegació basada en -, podeu ometre amb seguretat, .nav-itemja que només .nav-linkcal per als <a>elements d'estil.

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

Per a elements d'amplada igual, utilitzeu .nav-justified. Tot l'espai horitzontal estarà ocupat per enllaços de navegació, però a diferència de l' .nav-fillanterior, tots els elements de navegació tindran la mateixa amplada.

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

Similar a l' .nav-fillexemple amb una <nav>navegació basada en -.

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

Treballant amb utilitats flexibles

Si necessiteu variacions de navegació sensibles, penseu a utilitzar una sèrie d' utilitats de flexbox . Tot i que són més detallades, aquestes utilitats ofereixen una personalització més gran en els punts d'interrupció sensibles. A l'exemple següent, el nostre navegador s'apilarà al punt d'interrupció més baix, i després s'adaptarà a un disseny horitzontal que ompli l'amplada disponible a partir del punt d'interrupció petit.

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

Pel que fa a l'accessibilitat

Si utilitzeu navs per proporcionar una barra de navegació, assegureu-vos d'afegir una role="navigation"al contenidor principal més lògic del fitxer <ul>, o embolicar un <nav>element al voltant de tota la navegació. No afegiu el paper al <ul>mateix, ja que això evitaria que s'anunciés com una llista real per les tecnologies d'assistència.

Tingueu en compte que les barres de navegació, encara que tinguin un estil visual com a pestanyes amb la .nav-tabsclasse, norole="tablist" s'han de donar role="tab"ni role="tabpanel"atributs. Aquests només són adequats per a interfícies de pestanyes dinàmiques, tal com es descriu a les Pràctiques d'autoria WAI ARIA . Vegeu el comportament de JavaScript per a interfícies de pestanyes dinàmiques en aquesta secció per obtenir un exemple. L' aria-currentatribut no és necessari a les interfícies de pestanyes dinàmiques, ja que el nostre JavaScript gestiona l'estat seleccionat afegint -hi aria-selected="true"a la pestanya activa.

Utilitzant menús desplegables

Afegiu menús desplegables amb una mica d'HTML addicional i el complement de JavaScript dels desplegables .

Pestanyes amb desplegables

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

Píndoles amb desplegables

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

Sass

Les 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;

Comportament de JavaScript

Utilitzeu el connector de JavaScript de la pestanya (incloeu-lo individualment o mitjançant el bootstrap.jsfitxer compilat) per ampliar les nostres pestanyes i píndoles de navegació per crear panells amb pestanyes de contingut local.

Les interfícies de pestanyes dinàmiques, tal com es descriuen a les Pràctiques d'autoria WAI ARIA , requereixen role="tablist", role="tab", role="tabpanel", i aria-atributs addicionals per tal de transmetre la seva estructura, funcionalitat i estat actual als usuaris de tecnologies d'assistència (com ara lectors de pantalla). Com a pràctica recomanada, recomanem utilitzar <button>elements per a les pestanyes, ja que són controls que desencadenen un canvi dinàmic, en lloc d'enllaços que naveguen a una pàgina o ubicació nova.

Tingueu en compte que les interfícies de pestanyes dinàmiques no haurien de contenir menús desplegables, ja que això provoca problemes d'usabilitat i d'accessibilitat. Des d'una perspectiva d'usabilitat, el fet que l'element activador de la pestanya que es mostra actualment no sigui visible immediatament (ja que es troba dins del menú desplegable tancat) pot causar confusió. Des del punt de vista de l'accessibilitat, actualment no hi ha cap manera sensata de mapar aquest tipus de construcció amb un patró WAI ARIA estàndard, el que significa que no es pot fer fàcilment entenedor per als usuaris de tecnologies d'assistència.

Aquest és el contingut associat a la pestanya Inici. Si feu clic a una altra pestanya, canviarà la visibilitat d'aquesta per a la següent. La pestanya JavaScript intercanvia les classes per controlar la visibilitat i l'estil del contingut. Podeu utilitzar-lo amb pestanyes, píndoles i qualsevol altra .navnavegació amb motor.

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>

Per ajudar-vos a adaptar-vos a les vostres necessitats, això funciona amb un <ul>marcatge basat en -, com es mostra més amunt, o amb qualsevol marcatge arbitrari "roll your own". Tingueu en compte que si feu servir <nav>, no hi hauríeu d'afegir-hi role="tablist"directament, ja que això anul·laria la funció nativa de l'element com a punt de referència de navegació. En lloc d'això, canvieu a un element alternatiu (a l'exemple següent, un simple <div>) i envolteu <nav>-lo.

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

El connector de pestanyes també funciona amb píndoles.

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

I amb pastilles verticals.

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>

Ús d'atributs de dades

Podeu activar una navegació de pestanyes o píndoles sense escriure cap JavaScript simplement especificant data-bs-toggle="tab"o data-bs-toggle="pill"en un element. Utilitzeu aquests atributs de dades a .nav-tabso .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>

Mitjançant JavaScript

Activa les pestanyes amb tabulació mitjançant JavaScript (cada pestanya s'ha d'activar individualment):

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()
  })
})

Podeu activar pestanyes individuals de diverses maneres:

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

Efecte esvaït

Per fer que les pestanyes s'esvaeixin, afegiu .fade-les a cadascuna .tab-pane. El primer panell de pestanyes també ha .showde fer visible el contingut inicial.

<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ètodes

Mètodes asíncrons i transicions

Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .

Consulteu la nostra documentació de JavaScript per obtenir més informació .

constructor

Activa un element de pestanya i un contenidor. La pestanya hauria de tenir un atribut data-bs-targeto, si s'utilitza un enllaç, un hrefatribut orientat a un node contenidor al 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>

espectacle

Selecciona la pestanya donada i mostra el seu panell associat. Qualsevol altra pestanya que s'hagi seleccionat anteriorment es desactiva i el seu panell associat s'amaga. Torna a la persona que truca abans que s'hagi mostrat realment el panell de pestanyes (és a dir, abans shown.bs.tabque es produeixi l'esdeveniment).

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

  tab.show()

disposar

Destrueix la pestanya d'un element.

getInstance

Mètode estàtic que us permet obtenir la instància de la pestanya associada a un element DOM

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

getOrCreateInstance

Mètode estàtic que us permet obtenir la instància de la pestanya associada a un element DOM o crear-ne una de nova en cas que no s'hagi inicialitzat

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

Esdeveniments

Quan es mostra una pestanya nova, els esdeveniments es desencadenen en l'ordre següent:

hide.bs.tab(a la pestanya activa actual)
show.bs.tab(a la pestanya per mostrar)
hidden.bs.tab(a la pestanya activa anterior, la mateixa que per a l' hide.bs.tabesdeveniment)
shown.bs.tab(a la pestanya recentment activa que s'acaba de mostrar, la mateixa que per a l' show.bs.tabesdeveniment)

Si no hi havia cap pestanya activa, els esdeveniments hide.bs.tabi hidden.bs.tabno s'activaran.

Tipus d'esdeveniment	Descripció
`show.bs.tab`	Aquest esdeveniment s'activa a la pestanya mostra, però abans que s'hagi mostrat la nova pestanya. Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
`shown.bs.tab`	Aquest esdeveniment s'activa a la mostra de pestanyes després que s'hagi mostrat una pestanya. Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
`hide.bs.tab`	Aquest esdeveniment s'activa quan s'ha de mostrar una pestanya nova (i, per tant, s'ha d'amagar la pestanya activa anterior). Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa actual i la nova pestanya que s'activarà aviat, respectivament.
`hidden.bs.tab`	Aquest esdeveniment s'activa després que es mostri una pestanya nova (i, per tant, s'amaga la pestanya activa anterior). Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa anterior i la nova pestanya activa, respectivament.

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