Navegacions i pestanyes

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

En aquesta pàgina

Navegació base

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.

html

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

Alineat a la dreta amb .justify-content-end:

html

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

html

<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">Disabled</a>
  </li>
</ul>

Com sempre, la navegació vertical també és possible sense <ul>s.

html

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

html

<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">Disabled</a>
  </li>
</ul>

Píndoles

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

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

html

<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">Disabled</a>
</nav>

Pel que fa a l'accessibilitat

Si utilitzeu navs per proporcionar una barra de navegació, assegureu-vos d'afegir un 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. Només són adequades per a interfícies de pestanyes dinàmiques, tal com es descriu al patró de pestanyes de la Guia de pràctiques de creació d'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-hiaria-selected="true" -hi 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

html

<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">Disabled</a>
  </li>
</ul>

Píndoles amb desplegables

html

<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">Disabled</a>
  </li>
</ul>

CSS

Les variables

Afegit a la v5.2.0

Com a part de l'enfocament de variables CSS en evolució de Bootstrap, ara els navs utilitzen variables CSS locals a .nav, .nav-tabs, i .nav-pillsper a una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

A la .navclasse base:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

A la .nav-tabsclasse modificadora:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

A la .nav-pillsclasse modificadora:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Variables Sass

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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.

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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.

This is some placeholder content the Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

I amb pastilles verticals. Idealment, per a pestanyes verticals, també hauríeu d'afegir aria-orientation="vertical"-los al contenidor de la llista de pestanyes.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Accessibilitat

Les interfícies de pestanyes dinàmiques, tal com es descriu a la Guia de pràctiques d'autor d'ARIA , requereixen role="tablist", role="tab", role="tabpanel", i aria-atributs addicionals per 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 es tracta de controls que desencadenen un canvi dinàmic, en lloc d'enllaços que naveguen a una pàgina o ubicació nova.

D'acord amb el patró de pràctiques d'autorització d'ARIA, només la pestanya activa actualment rep el focus del teclat. Quan s'inicialitzi el connector de JavaScript, s'establirà tabindex="-1"en tots els controls de pestanyes inactius. Una vegada que la pestanya activa actualment està enfocada, les tecles del cursor activen la pestanya anterior/següent, amb el connector canviant la itinerànciatabindex en conseqüència. Tanmateix, tingueu en compte que el connector de JavaScript no distingeix entre les llistes de pestanyes horitzontals i verticals quan es tracta d'interaccions amb les tecles del cursor: independentment de l'orientació de la llista de pestanyes, tant el cursor amunt com a l' esquerra van a la pestanya anterior i el cursor avall i dret van a la pestanya següent.

En general, per facilitar la navegació amb el teclat, es recomana que els panells de pestanyes també es puguin enfocar, tret que el primer element que conté contingut significatiu dins del tauler de pestanyes ja es pugui enfocar. El connector de JavaScript no tracta de gestionar aquest aspecte; si escau, haureu de fer que els vostres panells de pestanyes es concentrin explícitament afegint tabindex="0" el vostre marcatge.

El connector de JavaScript de la pestanya no admet interfícies amb pestanyes que continguin menús desplegables, ja que causen 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.

Ú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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Mitjançant JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

Podeu activar pestanyes individuals de diverses maneres:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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ó .

Activa el teu contingut com a element de pestanya.

Podeu crear una instància de pestanya amb el constructor, per exemple:

const bsTab = new bootstrap.Tab('#myTab')

Mètode	Descripció
`dispose`	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, podeu utilitzar-lo així: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Mètode estàtic que retorna una instància de pestanya associada a un element DOM o en crea una de nova en cas que no s'hagi inicialitzat. Podeu utilitzar-lo així: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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.tab`que es produeixi l'esdeveniment).

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ó
`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.
`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.

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