in English

Navs

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

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

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

<nav class="nav">
  <a class="nav-link active" 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:

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

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

Vertical

Apila la teva navegació canviant la direcció de l'element flexible amb la .flex-columnutilitat. Necessites apilar-los en algunes finestres, però no en altres? Utilitzeu les versions responsives (p. ex., .flex-sm-column).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" 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.

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

Pestanyes

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" 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:

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

Omplir i justificar

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

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" 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-linkcal per als <a>elements d'estil.

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

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" 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 -.

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

Treballant amb utilitats flexibles

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

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" 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 una role="navigation"al contenidor principal més lògic del fitxer <ul>, o embolicar un <nav>element al voltant de tota la navegació. No afegiu el paper al <ul>mateix, ja que això evitaria que s'anunciés com una llista real per les tecnologies d'assistència.

Tingueu en compte que les barres de navegació, encara que tinguin un estil visual com a pestanyes amb la .nav-tabsclasse, norole="tablist" s'han de donar role="tab"ni role="tabpanel"atributs. 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 d'autor de l'ARIA . Vegeu el comportament de JavaScript per a interfícies de pestanyes dinàmiques en aquesta secció per obtenir un exemple.

Utilitzant menús desplegables

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

Pestanyes amb desplegables

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" 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>

Píndoles amb desplegables

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

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.

Si esteu creant el nostre JavaScript des de la font, requereixutil.js .

Les interfícies de pestanyes dinàmiques, tal com es descriuen 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 són controls que desencadenen un canvi dinàmic, en lloc d'enllaços que naveguen a una pàgina o ubicació nova.

Tingueu en compte que el connector de JavaScript de 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.

Contingut de marcador de posició per al tauler de pestanyes. Aquest es relaciona amb la pestanya d'inici. Et porta quilòmetres alt, tan alt, perquè té aquest somriure internacional. Hi ha un desconegut al meu llit, hi ha un cop al meu cap. Oh, no. En una altra vida et faria quedar. Perquè jo sóc capaç de qualsevol cosa. Preparant-me per a la meva batalla final. Solia robar el licor dels teus pares i pujar al terrat. To, bronzejat i llest, puja-lo perquè es fa pesat. El seu amor és com una droga. Suposo que vaig oblidar que tenia una opció.

Contingut de marcador de posició per al tauler de pestanyes. Aquest es relaciona amb la pestanya de perfil. Tens la millor arquitectura. Segells de passaport, és cosmopolita. Bé, fresc, ferotge, ho tenim tancat. Mai havia planejat que algun dia et perdria. Ella et menja el cor. El teu petó és còsmic, cada moviment és màgic. Em refereixo als uns, vull dir com si fos ella. Salutacions éssers estimats, fem un viatge. Només has de tenir la nit com el 4 de juliol! Però prefereixes perdre't.

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

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-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>

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

Contingut de marcador de posició per al tauler de pestanyes. Aquest es relaciona amb la pestanya d'inici. Et porta quilòmetres alt, tan alt, perquè té aquest somriure internacional. Hi ha un desconegut al meu llit, hi ha un cop al meu cap. Oh, no. En una altra vida et faria quedar. Perquè jo sóc capaç de qualsevol cosa. Preparant-me per a la meva batalla final. Solia robar el licor dels teus pares i pujar al terrat. To, bronzejat i llest, puja-lo perquè es fa pesat. El seu amor és com una droga. Suposo que vaig oblidar que tenia una opció.

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.

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

I amb pastilles verticals.

Contingut de marcador de posició per al tauler de pestanyes. Aquest es relaciona amb la pestanya d'inici. T'he vist al centre cantant el Blues. Mira com encercles el desguàs. Per què no em deixes passar? Pesat és el cap que porta la corona. Sí, fem plorar els àngels, plovent a la terra des de dalt. Vols veure el programa en 3D, una pel·lícula. Alguna vegada et sents tan prim com el paper. És un sí o un no, potser 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>

Ús d'atributs de dades

Podeu activar una navegació de pestanyes o píndoles sense escriure cap JavaScript simplement especificant data-toggle="tab"o data-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-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>

Mitjançant JavaScript

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

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

Podeu activar pestanyes individuals de diverses maneres:

$('#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

Efecte esvaït

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

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

Mètodes

Mètodes asíncrons i transicions

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

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

$().tab

Activa un element de pestanya i un contenidor. La pestanya hauria de tenir un atribut data-targeto, si s'utilitza un enllaç, un hrefatribut orientat a un node contenidor al DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-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('mostrar')

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

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

.tab('eliminar')

Destrueix la pestanya d'un element.

Esdeveniments

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

  1. hide.bs.tab(a la pestanya activa actual)
  2. show.bs.tab(a la pestanya per mostrar)
  3. hidden.bs.tab(a la pestanya activa anterior, la mateixa que per a l' hide.bs.tabesdeveniment)
  4. 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ó
mostrar.bs.tab Aquest esdeveniment s'activa a la pestanya mostra, però abans que s'hagi mostrat la nova pestanya. Utilitzeu event.targeti event.relatedTargetper orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
pestanya.bs.mostrada Aquest esdeveniment s'activa a la mostra de pestanyes després que s'hagi mostrat una pestanya. Utilitzeu event.targeti event.relatedTargetper orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
ocultar.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.targeti event.relatedTargetper 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.targeti event.relatedTargetper orientar la pestanya activa anterior i la nova pestanya activa, respectivament. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})