navi

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

nav di base

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.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

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

Allineato a destra con .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

Come sempre, la navigazione verticale è possibile <ul>anche senza s.

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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

Pillole

Prendi lo stesso HTML, ma usa .nav-pillsinvece:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

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

Simile .nav-fillall'esempio che utilizza una <nav>navigazione basata su.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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

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 ARIA Authoring Practices Guide tabs pattern . Per un esempio, vedere il comportamento JavaScript per le interfacce a schede dinamiche in questa sezione.role="tablist"role="tab"role="tabpanel"

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

Pillole con menu a discesa

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

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.

Se stai creando il nostro JavaScript dal sorgente, richiedeutil.js .

Le interfacce a schede dinamiche, come descritto nel modello di schede ARIA Authoring Practices Guide , 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 il plug-in JavaScript della scheda non supporta le interfacce a schede che contengono menu a discesa, poiché causano 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.

Contenuto segnaposto per il pannello a schede. Questo si riferisce alla scheda Home. Ti porta miglia in alto, così in alto, perché ha quel sorriso internazionale. C'è un estraneo nel mio letto, c'è un martellante nella mia testa. Oh no. In un'altra vita ti farei restare. Perché io, io sono capace di tutto. Preparandomi per la mia battaglia finale. Usato per rubare il liquore dei tuoi genitori e salire sul tetto. Tonifica, abbronzati e pronti, alzalo perché sta diventando pesante. Il suo amore è come una droga. Immagino di aver dimenticato di avere una scelta.

Contenuto segnaposto per il pannello a schede. Questo si riferisce alla scheda del profilo. Hai la migliore architettura. Timbri sui passaporti, è cosmopolita. Bene, fresco, feroce, ce l'abbiamo fatta. Non avevo mai pianificato che un giorno ti avrei perso. Ti mangia il cuore. Il tuo bacio è cosmico, ogni mossa è magica. Intendo quelli, voglio dire come se fosse lei. Saluti cari facciamo un viaggio. Basta possedere la notte come il 4 luglio! Ma preferiresti perderti.

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

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.

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

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

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-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

E con le pillole verticali.

Contenuto segnaposto per il pannello a schede. Questo si riferisce alla scheda Home. Ti ho visto in centro cantare il blues. Guarda come cerchi lo scarico. Perché non mi fai passare? Pesante è la testa che porta la corona. Sì, facciamo piangere gli angeli, che piovono sulla terra dall'alto. Voglio vedere lo spettacolo in 3D, un film. Ti senti mai, ti senti così sottile come la carta. È un sì o un no, forse no.

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

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

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

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
      <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
      <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

Utilizzo degli attributi dei dati

Puoi attivare una navigazione con tab o pill senza scrivere JavaScript semplicemente specificando data-toggle="tab"o data-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-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Tramite JavaScript

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

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

Puoi attivare singole schede in diversi modi:

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

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 .

$().tab

Attiva un elemento scheda e un contenitore di contenuto. La scheda deve avere un attributo data-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-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('mostra')

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

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

.tab('smaltire')

Distrugge la scheda di un elemento.

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).
mostrato.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).
nascondi.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.
scheda.bs.nascosta	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.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})