Navs è tabs

Documentazione è esempi per cumu utilizà i cumpunenti di navigazione inclusi di Bootstrap.

In sta pagina

Base nav

A navigazione dispunibule in Bootstrap sparte marcatura generale è stili, da a classa di basa .navà i stati attivi è disabilitati. Scambià e classi di modificatori per cambià trà ogni stile.

U cumpunente di basa .navhè custruitu cù flexbox è furnisce una basa forte per custruisce tutti i tipi di cumpunenti di navigazione. Include alcuni overrides di stile (per travaglià cù listi), qualchì padding di ligami per aree più grande di colpi, è stili di basa disabilitatu.

U cumpunente di basa .navùn include micca .activestatu. L'esempii seguenti includenu a classa, principarmenti per dimustrà chì sta classe particulare ùn provoca micca un stilu speciale.

Per trasmette u statu attivu à i tecnulugii assistivi, utilizate l' aria-currentattributu - utilizendu u pagevalore per a pagina attuale, o trueper l'articulu attuale in un settore.

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

E classi sò aduprate in tuttu, cusì u vostru marcatu pò esse super flexible. Aduprate <ul>s cum'è sopra, <ol>se l'ordine di i vostri articuli hè impurtante, o rollu u vostru propiu cù un <nav>elementu. Perchè l' .navusi display: flex, i ligami di navigazione si cumportanu cum'è l'articuli di navigazione, ma senza u marcatu extra.

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

Stili dispunibuli

Cambia u stilu di .navcumpunenti s cù modificatori è utilità. Imbulighjate è abbinate cum'è necessariu, o custruite u vostru propiu.

Allineamentu horizontale

Cambia l'allineamentu horizontale di u vostru navigatore cù l'utilità flexbox . Per automaticamente, i navs sò allineati à manca, ma pudete facilmente cambià in centru o allineatu à destra.

Centratu cù .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>

Allineatu à dritta cù .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>

Verticale

Impilà a vostra navigazione cambiendu a direzzione di l'elementu flex cù l' .flex-columnutilità. Avete bisognu di stackli in certi vetri ma micca in altri? Aduprate e versioni responsive (per esempiu, .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>

Comu sempre, a navigazione verticale hè pussibule senza <ul>s, ancu.

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

Tabs

Piglia a nav basica da sopra è aghjunghje a .nav-tabsclassa per generà una interfaccia tabulata. Aduprate per creà regioni tabulabili cù a nostra tabulazione plugin JavaScript .

<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

Pigliate u listessu HTML, ma utilizate .nav-pillsinvece:

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

Pieni è ghjustificà

Forzà u vostru .navcuntenutu per allargà a larghezza tutale dispunibule una di duie classi di modificatori. Per riempie proporzionalmente tuttu u spaziu dispunibule cù i vostri .nav-item, utilizate .nav-fill. Avvisate chì tuttu u spaziu horizontale hè occupatu, ma micca ogni articulu di navigazione hà a listessa larghezza.

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

Quandu si usa una <nav>navigazione basata, pudete omette in modu sicuru .nav-itemcum'è .nav-linkhè necessariu solu per <a>elementi di stile.

<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 elementi di larghezza uguale, utilizate .nav-justified. Tuttu u spaziu horizontale serà occupatu da ligami di navigazione, ma à u cuntrariu di u .nav-fillsopra, ogni articulu di navigazione serà a stessa larghezza.

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

Simile à l' .nav-fillesempiu cù una <nav>navigazione basata.

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

U travagliu cù utilità flex

Sè avete bisognu di variazioni di navigazione responsive, cunzidira l'usu di una seria di utilità flexbox . Mentre sò più verbose, queste utilità offre una persunalizazione più grande in i punti di rottura responsive. In l'esempiu quì sottu, u nostru navigatore serà impilatu nantu à u puntu di ruptura più bassu, dopu adattà à un layout horizontale chì riempia a larghezza dispunibile partendu da u puntu di ruptura più chjucu.

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

In quantu à l'accessibilità

Sè vo aduprate navs per furnisce una barra di navigazione, assicuratevi di aghjunghje un role="navigation"à u contenitore parentale più logicu di u <ul>, o imbulighjate un <nav>elementu intornu à tutta a navigazione. Ùn aghjunghje micca u rolu à u <ul>stessu, perchè questu impedirà di esse annunziatu cum'è una lista attuale da e tecnulugia assistive.

Nota chì i bars di navigazione, ancu s'ellu sò visualmente stilati cum'è tabulazioni cù a .nav-tabsclassa, ùn deve micca esse datu role="tablist", role="tab"o role="tabpanel"attributi. Quessi sò solu appruvati per interfacce tabulati dinamichi, cum'è deskrittu in i Pratiche di Scrittura WAI ARIA . Vede u cumpurtamentu JavaScript per interfacce tabulati dinamichi in questa sezione per un esempiu. L' aria-currentattributu ùn hè micca necessariu nantu à l'interfacce di tabulazione dinamica postu chì u nostru JavaScript gestisce u statu sceltu aghjunghjendu aria-selected="true"nantu à a tabulazione attiva.

Utilizà i dropdowns

Aghjunghjite menu dropdown cù un pocu HTML extra è u plugin JavaScript dropdowns .

Tabulazioni cù menu a tendina

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

Pills cù dropdowns

<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

Variabili

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

Cumportamentu JavaScript

Aduprate u plugin JavaScript di tabulazione-includelu individualmente o attraversu u schedariu compilatu bootstrap.js-per allargà e nostre tabulazioni di navigazione è pillole per creà pannelli tabulabili di cuntenutu locale.

L'interfacce dinamiche di tabulazione, cum'è descritte in e Pratiche d'autore WAI ARIA , necessitanu role="tablist", role="tab", role="tabpanel", è attributi supplementari aria-per trasmette a so struttura, funziunalità è statu attuale à l'utilizatori di tecnulugia assistive (cum'è i lettori di schermu). Cum'è una bona pratica, ricumandemu d'utilizà <button>elementi per e tabulazioni, postu chì sò cuntrolli chì attivanu un cambiamentu dinamicu, invece di ligami chì naviganu à una nova pagina o locu.

Nota chì l'interfacce dinamiche di tabulazione ùn deve micca cuntene menu drop-down, postu chì questu causa prublemi di usabilità è accessibilità. Da una perspettiva di usabilità, u fattu chì l'elementu di attivazione di a tabulazione attualmente affissata ùn hè micca immediatamente visibile (perchè si trova in u menù dropdown chjusu) pò causà cunfusione. Da un puntu di vista di l'accessibilità, ùn ci hè attualmente un modu sensibule di mape stu tipu di custruzzione à un mudellu WAI ARIA standard, chì significa chì ùn pò micca esse facilmente capitu per l'utilizatori di tecnulugia assistive.

Questu hè un pocu di cuntenutu di placeholder u cuntenutu assuciatu à a tabulazione Home. Cliccà un'altra tabulazione cambierà a visibilità di questu per u prossimu. A tabulazione JavaScript scambia classi per cuntrullà a visibilità di u cuntenutu è u stilu. Pudete aduprà cù tabulature, pills, è qualsiasi altra .navnavigazione alimentata.

Il s'agit d'un certain contenu de placeholder, le contenu associé à l'onglet Profil. Cliccà un'altra tabulazione cambierà a visibilità di questu per u prossimu. A tabulazione JavaScript scambia classi per cuntrullà a visibilità di u cuntenutu è u stilu. Pudete aduprà cù tabulature, pills, è qualsiasi altra .navnavigazione alimentata.

Questu hè un pocu di cuntenutu di placeholder u cuntenutu assuciatu à a tabulazione di Cuntattu. Cliccà un'altra tabulazione cambierà a visibilità di questu per u prossimu. A tabulazione JavaScript scambia classi per cuntrullà a visibilità di u cuntenutu è u stilu. Pudete aduprà cù tabulature, pills, è qualsiasi altra .navnavigazione alimentata.

<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 aiutà à adattà à i vostri bisogni, questu funziona cù un <ul>marcatu basatu, cum'è mostratu sopra, o cù qualsiasi marcatura arbitraria "roll your own". Nota chì sè vo aduprate <nav>, ùn deve micca aghjunghje role="tablist"direttamente à questu, postu chì questu annunzià u rolu nativu di l'elementu cum'è un puntu di navigazione. Invece, cambiate à un elementu alternativu (in l'esempiu quì sottu, un simplice <div>) è avvolge u <nav>circondu.

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

U plugin di tabulazione travaglia ancu cù pills.

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

È cù pilule verticali.

Questu hè un pocu di cuntenutu di piazzamentu di u cuntenutu assuciatu à a tabulazione di i missaghji. Cliccà un'altra tabulazione cambierà a visibilità di questu per u prossimu. A tabulazione JavaScript scambia classi per cuntrullà a visibilità di u cuntenutu è u stilu. Pudete aduprà cù tabulature, pills, è qualsiasi altra .navnavigazione alimentata.

Il s'agit d'un certain contenu de placeholder, le contenu associé à l'onglet Settings. Cliccà un'altra tabulazione cambierà a visibilità di questu per u prossimu. A tabulazione JavaScript scambia classi per cuntrullà a visibilità di u cuntenutu è u stilu. Pudete aduprà cù tabulature, pills, è qualsiasi altra .navnavigazione alimentata.

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

Utilizà l'attributi di dati

Pudete attivà una tabulazione o una navigazione di pillola senza scrivite JavaScript per solu specificà data-bs-toggle="tab"o data-bs-toggle="pill"nantu à un elementu. Aduprate sti attributi di dati nantu à .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>

Via JavaScript

Attivà e tabulazioni tabulabili via JavaScript (ogni tabulazione deve esse attivata individualmente):

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

Pudete attivà tabulazioni individuali in parechje manere:

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

Effettu fade

Per fà chì e tabulazioni svaniscenu, aghjunghje .fadeà ognunu .tab-pane. U primu pannellu di tabulazione deve ancu .showfà vede u cuntenutu iniziale.

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

I metudi

Metudi asincroni è transizioni

Tutti i metudi API sò asincroni è cumincianu una transizione . Ritornanu à u chjamante appena a transizione hè iniziata, ma prima chì finisce . Inoltre, un metudu chjamatu nantu à un cumpunente di transizione serà ignoratu .

Vede a nostra documentazione JavaScript per più infurmazione .

constructor

Attiva un elementu di tabulazione è cuntenutu di cuntenutu. A tabulazione deve avè un data-bs-targeto, se utilizate un ligame, un hrefattributu, destinatu à un node di cuntainer in u 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>

mostra

Selezziunate a tabulazione data è mostra u so pane assuciatu. Qualchese altra tabulazione chì hè stata scelta prima ùn hè micca selezziunata è u so pane assuciatu hè oculatu. Ritorna à u chjamante prima chì u pannellu di tabulazione hè statu veramente mostratu (vale à dì prima chì l' shown.bs.tabavvenimentu si faci).

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

  tab.show()

disposti

Distrughje una tabulazione di l'elementu.

getInstance

Metudu staticu chì permette di ottene l'istanza di tabulazione assuciata à un elementu DOM

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

getOrCreateInstance

Metudu staticu chì vi permette di uttene l'istanza di tabulazione assuciata à un elementu DOM, o creà un novu in casu ùn hè micca inizializatu

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

Avvenimenti

Quandu mostra una nova tabulazione, l'avvenimenti sparanu in l'ordine seguente:

hide.bs.tab(nantu à a tabulazione attiva attuale)
show.bs.tab(nantu à a tabulazione da vede)
hidden.bs.tab(nantu à a tabulazione attiva precedente, u listessu cum'è per l' hide.bs.tabavvenimentu)
shown.bs.tab(nantu à a tabulazione appena attivata appena mostrata, a stessa chì per l' show.bs.tabavvenimentu)

Sì nisuna tabulazione era digià attiva, allora l' hide.bs.tabeventi hidden.bs.tabùn saranu micca sparati.

Tipu di avvenimentu	Descrizzione
`show.bs.tab`	Questu avvenimentu spara nantu à a tabulazione, ma prima chì a nova tabulazione hè stata mostrata. Aduprate `event.target`è `event.relatedTarget`per destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente.
`shown.bs.tab`	Questu avvenimentu spara nantu à a tabulazione mostra dopu chì una tabulazione hè stata mostrata. Aduprate `event.target`è `event.relatedTarget`per destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente.
`hide.bs.tab`	Questu avvenimentu spara quandu una nova tabulazione deve esse mostrata (è cusì a tabulazione attiva precedente deve esse oculata). Aduprate `event.target`è `event.relatedTarget`per destinà a tabulazione attiva attuale è a nova tabulazione attiva prestu, rispettivamente.
`hidden.bs.tab`	Questu avvenimentu spara dopu chì una nova tabulazione hè mostrata (è cusì a tabulazione attiva precedente hè oculata). Aduprate `event.target`è `event.relatedTarget`per destinà a tabulazione attiva precedente è a nova tabulazione attiva, rispettivamente.

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