Navigatori e schede

Documentazione ed esempi su come utilizzare i componenti di navigazione inclusi in Bootstrap.

Su questa pagina

Base nav

La navigazione disponibile in Bootstrap condivide il markup e gli stili generali, dalla .navclasse base agli stati attivo e disabilitato. Scambia le classi di modificatori per passare da uno stile all'altro.

Il .navcomponente di base è costruito con flexbox e fornisce una solida base per la costruzione di tutti i tipi di componenti di navigazione. Include alcune sostituzioni di stile (per lavorare con gli elenchi), alcuni spazi di riempimento dei collegamenti per aree di successo più grandi e uno stile disabilitato di base.

Il .navcomponente di base non include alcuno .activestato. Gli esempi seguenti includono la classe, principalmente per dimostrare che questa particolare classe non attiva alcuno stile speciale.

Per trasmettere lo stato attivo alle tecnologie assistive, utilizzare l' aria-currentattributo, utilizzando il pagevalore per la pagina corrente o trueper l'elemento corrente in un set.

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

Le lezioni vengono utilizzate ovunque, quindi il tuo markup può essere super flessibile. Usa <ul>s come sopra, <ol>se l'ordine dei tuoi articoli è importante, o arrotola il tuo con un <nav>elemento. Poiché .navutilizza display: flex, i collegamenti di navigazione si comportano come farebbero gli elementi di navigazione, ma senza il markup aggiuntivo.

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

Cambia lo stile del .navcomponente s con modificatori e utilità. Mescola e abbina secondo necessità o creane uno tuo.

Allineamento orizzontale

Modifica l'allineamento orizzontale del tuo navigatore con le utility flexbox . Per impostazione predefinita, i nav sono allineati a sinistra, ma puoi facilmente cambiarli al centro o allineati a destra.

Centrato con .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>

Allineato a destra con .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

Impila la tua navigazione cambiando la direzione dell'elemento flessibile con l' .flex-columnutilità. Hai bisogno di impilarli su alcune finestre ma non su altre? Utilizzare le versioni reattive (ad es .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>

Come sempre, la navigazione verticale è possibile <ul>anche senza 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>

Schede

Prende la navigazione di base dall'alto e aggiunge la .nav-tabsclasse per generare un'interfaccia a schede. Usali per creare regioni tabbable con il nostro plug-in JavaScript per schede .

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

Pillole

Prendi lo stesso HTML, ma usa .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>

Riempi e giustifica

Forza il .navcontenuto di ' per estendere l'intera larghezza disponibile di una delle due classi di modificatori. Per riempire proporzionalmente tutto lo spazio disponibile con .nav-itemi tuoi messaggi di posta elettronica, usa .nav-fill. Si noti che tutto lo spazio orizzontale è occupato, ma non tutti gli elementi di navigazione hanno la stessa 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>

Quando si utilizza una <nav>navigazione basata su, è possibile omettere in sicurezza .nav-itempoiché .nav-linkè richiesto solo per <a>gli 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 uguale larghezza, utilizzare .nav-justified. Tutto lo spazio orizzontale sarà occupato dai collegamenti di navigazione, ma a differenza di quanto .nav-fillsopra, ogni elemento di navigazione avrà la 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 .nav-fillall'esempio che utilizza una <nav>navigazione basata su.

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

Lavorare con utility flessibili

Se hai bisogno di variazioni di navigazione reattive, prendi in considerazione l'utilizzo di una serie di utilità flexbox . Sebbene più dettagliate, queste utilità offrono una maggiore personalizzazione attraverso punti di interruzione reattivi. Nell'esempio seguente, il nostro nav sarà impilato sul punto di interruzione più basso, quindi si adatterà a un layout orizzontale che riempia la larghezza disponibile a partire dal punto di interruzione piccolo.

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

Per quanto riguarda l'accessibilità

Se stai usando navs per fornire una barra di navigazione, assicurati di aggiungere a role="navigation"al contenitore padre più logico di <ul>, o avvolgi un <nav>elemento attorno all'intera navigazione. Non aggiungere il ruolo allo <ul>stesso, in quanto ciò eviterebbe che venga annunciato come una vera e propria lista dalle tecnologie assistive.

Nota che le barre di navigazione, anche se visivamente stilizzate come schede con la .nav-tabsclasse, non devono essere fornite o attributi . Questi sono appropriati solo per le interfacce a schede dinamiche, come descritto in WAI ARIA Authoring Practices . Per un esempio, vedere il comportamento JavaScript per le interfacce a schede dinamiche in questa sezione. L' attributo non è necessario sulle interfacce a schede dinamiche poiché il nostro JavaScript gestisce lo stato selezionato aggiungendolo alla scheda attiva.role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Utilizzo dei menu a discesa

Aggiungi menu a discesa con un po' di HTML in più e il plug-in JavaScript a discesa .

Schede con menu a discesa

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

Pillole con menu a discesa

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

Comportamento JavaScript

Usa il plug-in JavaScript delle schede, includilo individualmente o tramite il file compilato bootstrap.js, per estendere le nostre schede di navigazione e pillole per creare riquadri tabbable di contenuto locale.

Le interfacce a schede dinamiche, come descritte nelle Pratiche di creazione di WAI ARIA , richiedono role="tablist", role="tab", role="tabpanel"e aria-attributi aggiuntivi per trasmettere la loro struttura, funzionalità e stato corrente agli utenti di tecnologie assistive (come gli screen reader). Come best practice, consigliamo di utilizzare <button>elementi per le schede, poiché si tratta di controlli che attivano una modifica dinamica, anziché collegamenti che accedono a una nuova pagina o posizione.

Tieni presente che le interfacce a schede dinamiche non devono contenere menu a discesa, poiché ciò causa problemi di usabilità e accessibilità. Dal punto di vista dell'usabilità, il fatto che l'elemento trigger della scheda attualmente visualizzata non sia immediatamente visibile (poiché si trova all'interno del menu a discesa chiuso) può causare confusione. Dal punto di vista dell'accessibilità, attualmente non esiste un modo sensato per mappare questo tipo di costrutto su un modello WAI ARIA standard, il che significa che non può essere facilmente reso comprensibile agli utenti delle tecnologie assistive.

Si tratta di alcuni contenuti segnaposto contenuti associati alla scheda Home. Facendo clic su un'altra scheda si alternerà la visibilità di questa per la successiva. La scheda JavaScript scambia le classi per controllare la visibilità e lo stile del contenuto. Puoi usarlo con schede, pillole e qualsiasi altra .navnavigazione potenziata.

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 soddisfare le tue esigenze, questo funziona con <ul>il markup basato su, come mostrato sopra, o con qualsiasi markup arbitrario "roll your own". Tieni presente che se stai utilizzando <nav>, non dovresti aggiungere role="tablist"direttamente ad esso, poiché ciò annullerebbe il ruolo nativo dell'elemento come punto di riferimento di navigazione. Invece, passa a un elemento alternativo (nell'esempio seguente, un semplice <div>) e avvolgilo <nav>attorno.

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

Il plugin delle schede funziona anche con le pillole.

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

E con le pillole verticali.

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>

Utilizzo degli attributi dei dati

Puoi attivare una navigazione con tab o pill senza scrivere JavaScript semplicemente specificando data-bs-toggle="tab"o data-bs-toggle="pill"su un elemento. Utilizzare questi attributi di dati su .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>

Tramite JavaScript

Abilita le schede tabb tramite JavaScript (ogni scheda deve essere attivata singolarmente):

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

Puoi attivare singole schede in diversi modi:

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

Effetto dissolvenza

Per far sfumare le schede, aggiungi .fadea ciascuna .tab-pane. Il primo riquadro delle schede deve anche .showrendere visibile il contenuto 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>

Metodi

Metodi e transizioni asincrone

Tutti i metodi API sono asincroni e avviano una transizione . Ritornano al chiamante non appena la transizione è iniziata ma prima che termini . Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata .

Consulta la nostra documentazione JavaScript per ulteriori informazioni .

constructor

Attiva un elemento scheda e un contenitore di contenuto. La scheda dovrebbe avere un data-bs-targeto, se si utilizza un collegamento, un hrefattributo, destinato a un nodo contenitore nel 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>

mostrare

Seleziona la scheda data e mostra il riquadro associato. Qualsiasi altra scheda precedentemente selezionata viene deselezionata e il riquadro associato viene nascosto. Ritorna al chiamante prima che il riquadro delle schede sia stato effettivamente mostrato (cioè prima shown.bs.tabche si verifichi l'evento).

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

  tab.show()

smaltire

Distrugge la scheda di un elemento.

getInstance

Metodo statico che ti consente di ottenere l'istanza della scheda associata a un elemento DOM

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

getOrCreateInstance

Metodo statico che ti consente di ottenere l'istanza della scheda associata a un elemento DOM o di crearne una nuova nel caso non sia stata inizializzata

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

Eventi

Quando viene visualizzata una nuova scheda, gli eventi si attivano nel seguente ordine:

hide.bs.tab(nella scheda attiva corrente)
show.bs.tab(nella scheda da mostrare)
hidden.bs.tab(nella scheda attiva precedente, la stessa hide.bs.tabdell'evento)
shown.bs.tab(nella scheda appena mostrata appena attiva, la stessa show.bs.tabdell'evento)

Se nessuna scheda era già attiva, gli eventi hide.bs.tabe hidden.bs.tabnon verranno attivati.

Tipo di evento	Descrizione
`show.bs.tab`	Questo evento si attiva alla visualizzazione della scheda, ma prima che venga mostrata la nuova scheda. Utilizzare `event.target`e `event.relatedTarget`per indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
`shown.bs.tab`	Questo evento si attiva alla visualizzazione delle schede dopo che è stata mostrata una scheda. Utilizzare `event.target`e `event.relatedTarget`per indirizzare rispettivamente la scheda attiva e la scheda attiva precedente (se disponibile).
`hide.bs.tab`	Questo evento si attiva quando deve essere visualizzata una nuova scheda (e quindi la scheda attiva precedente deve essere nascosta). Utilizzare `event.target`e `event.relatedTarget`per scegliere come target rispettivamente la scheda attiva corrente e la nuova scheda che sarà presto attiva.
`hidden.bs.tab`	Questo evento si attiva dopo che viene mostrata una nuova scheda (e quindi la scheda attiva precedente viene nascosta). Utilizzare `event.target`e `event.relatedTarget`per indirizzare rispettivamente la scheda attiva precedente e la nuova scheda attiva.

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