Navs

Documentación e exemplos de como usar os compoñentes de navegación incluídos en Bootstrap.

Navegación base

A navegación dispoñible en Bootstrap comparte estilos e marcas xerais, desde a .navclase base ata os estados activo e desactivado. Cambia as clases modificadoras para cambiar entre cada estilo.

O .navcompoñente base está construído con flexbox e proporciona unha base sólida para construír todo tipo de compoñentes de navegación. Inclúe algunhas substitucións de estilo (para traballar con listas), algúns recheos de ligazóns para áreas de acceso máis grandes e estilos básicos desactivados.

O .navcompoñente base non inclúe ningún .activeestado. Os seguintes exemplos inclúen a clase, principalmente para demostrar que esta clase en particular non activa ningún estilo 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>

As clases úsanse en todas partes, polo que o teu marcado pode ser moi flexible. Usa <ul>s como a anterior, <ol>se a orde dos teus artigos é importante, ou tira o teu propio cun <nav>elemento. Debido a que .navusa display: flex, as ligazóns de navegación se comportan do mesmo xeito que os elementos de navegación, pero sen o marcado adicional.

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

Estilos dispoñibles

Cambia o estilo do .navcompoñente s con modificadores e utilidades. Mestura e combina segundo sexa necesario ou crea o teu propio.

Aliñación horizontal

Cambia a aliñación horizontal do teu navegador coas utilidades flexbox . De xeito predeterminado, os navegadores están aliñados á esquerda, pero podes cambialos facilmente ao centro ou á dereita.

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

Aliñado á dereita 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>

Vertical

Empile a súa navegación cambiando a dirección do elemento flexible coa .flex-columnutilidade. Necesitas apilalos nalgunhas vistas pero non noutras? Use as versións sensibles (por exemplo, .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>

Como sempre, a navegación vertical <ul>tamén é posible sen 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>

Fichas

Toma o navegador básico desde arriba e engade a .nav-tabsclase para xerar unha interface con pestanas. Utilízaos para crear rexións tabulables co noso complemento JavaScript de pestanas .

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

Pastillas

Tome o mesmo HTML, pero use no seu .nav-pillslugar:

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

Enche e xustifica

Forza o teu .navcontido a estender o ancho total dispoñible nunha das dúas clases de modificadores. Para encher proporcionalmente todo o espazo dispoñible cos teus .nav-item, usa .nav-fill. Teña en conta que todo o espazo horizontal está ocupado, pero non todos os elementos de navegación teñen o mesmo ancho.

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

Ao usar unha <nav>navegación baseada en -, pode omitir con seguridade .nav-itemxa que só .nav-linké necesario para os elementos de estilo <a>.

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

Para elementos de igual ancho, use .nav-justified. Todo o espazo horizontal estará ocupado por ligazóns de navegación, pero a diferenza do .nav-fillanterior, todos os elementos de navegación terán o mesmo ancho.

<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 ao .nav-fillexemplo usando unha <nav>navegación baseada 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>

Traballando con utilidades flexibles

Se necesitas variacións de navegación sensibles, considera usar unha serie de utilidades flexbox . Aínda que son máis detalladas, estas utilidades ofrecen unha maior personalización en puntos de interrupción sensibles. No seguinte exemplo, a nosa navegación apilarase no punto de interrupción máis baixo e, a continuación, adaptarase a un deseño horizontal que enche o ancho dispoñible a partir do punto de interrupción pequeno.

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

En canto á accesibilidade

Se estás a usar navs para fornecer unha barra de navegación, asegúrate de engadir un role="navigation"ao contenedor principal máis lóxico do <ul>, ou envolve un <nav>elemento en toda a navegación. Non engadas o papel ao <ul>propio, xa que isto evitaría que sexa anunciado como unha lista real polas tecnoloxías de asistencia.

Teña en conta que as barras de navegación, aínda que teñan un estilo visual como pestanas coa .nav-tabsclase, non se deben dar nin atributos. Estes só son apropiados para interfaces de pestanas dinámicas, como se describe no patrón de pestanas da Guía de prácticas de creación de ARIA . Consulte o comportamento de JavaScript para interfaces con pestanas dinámicas nesta sección para obter un exemplo.role="tablist"role="tab"role="tabpanel"

Usando menú despregable

Engade menús despregables cun HTML extra e o complemento JavaScript para menús despregables .

Pestanas con menú despregable

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

Pastillas con menú despregable

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

Use o complemento de JavaScript da pestana (inclúeo individualmente ou a través do bootstrap.jsficheiro compilado) para ampliar as nosas pestanas e pílulas de navegación para crear paneis de contido local con pestanas.

Se estás construíndo o noso JavaScript desde a orixe, requireutil.js .

As interfaces dinámicas con pestanas, tal e como se describe no patrón de pestanas da Guía de prácticas de creación de ARIA , requiren role="tablist", role="tab", role="tabpanel", e aria-atributos adicionais para transmitir a súa estrutura, funcionalidade e estado actual aos usuarios de tecnoloxías de asistencia (como lectores de pantalla). Como mellor práctica, recomendamos utilizar <button>elementos para as pestanas, xa que se trata de controis que desencadean un cambio dinámico, en lugar de ligazóns que navegan a unha nova páxina ou localización.

Teña en conta que o complemento de JavaScript das pestanas non admite interfaces con pestanas que conteñan menús despregables, xa que causan problemas de usabilidade e accesibilidade. Desde a perspectiva da usabilidade, o feito de que o elemento activador da pestana que se amosa actualmente non estea inmediatamente visible (xa que está dentro do menú despregable pechado) pode causar confusión. Desde o punto de vista da accesibilidade, actualmente non hai unha forma sensata de asignar este tipo de construción a un patrón WAI ARIA estándar, o que significa que non se pode facer facilmente comprensible para os usuarios de tecnoloxías de asistencia.

Contido do marcador de posición para o panel de pestanas. Este está relacionado coa pestana de inicio. Lévate millas de alto, tan alto, porque ten ese único sorriso internacional. Hai un estraño na miña cama, hai un golpe na miña cabeza. Ah, non. Noutra vida faríate quedar. Porque eu son capaz de calquera cousa. Adecuado para a miña coroa batalla. Usado para roubar o licor dos teus pais e subir ao tellado. O ton, bronceado e listo, subímolo porque se está facendo pesado. O seu amor é como unha droga. Supoño que esquecín que tiña unha opción.

Contido do marcador de posición para o panel de pestanas. Este está relacionado coa pestana do perfil. Tes a mellor arquitectura. Selos de pasaporte, é cosmopolita. Fino, fresco, feroz, témolo bloqueado. Nunca planei que algún día te perdera. Ela come o teu corazón. O teu bico é cósmico, cada movemento é máxico. Refírome aos uns, quero dicir como se fose ela. Saúdos seres queridos imos facer unha viaxe. Só ten a noite como o 4 de xullo! Pero preferirías perderte.

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>

Para axudarche a atender ás túas necesidades, isto funciona con <ul>marcas baseadas en -, como se mostra arriba, ou con calquera marcaxe arbitraria "roll your own". Teña en conta que se está a usar <nav>, non debe engadir role="tablist"directamente a el, xa que isto anularía o papel nativo do elemento como punto de referencia de navegación. En vez diso, cambia a un elemento alternativo (no exemplo de abaixo, un simple <div>) e envolve o elemento <nav>.

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>

O complemento tabs tamén funciona con pílulas.

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

Contido do marcador de posición para o panel de pestanas. Este está relacionado coa pestana de inicio. Vínte no centro cantando o Blues. Observa como rodeas o sumidoiro. Por que non me deixas pasar? Pesada é a cabeza que leva a coroa. Si, facemos chorar aos anxos, chovendo sobre a terra dende arriba. Queres ver o programa en 3D, unha película. Algunha vez sentiches, sentirte tan fino como o papel. É un si ou non, quizais non.

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>

Usando atributos de datos

Podes activar unha pestana ou navegación por pílulas sen escribir JavaScript simplemente especificando data-toggle="tab"ou data-toggle="pill"nun elemento. Use estes atributos de datos en .nav-tabsou .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>

Vía JavaScript

Activa as pestanas con tabulacións a través de JavaScript (cada pestana debe activarse individualmente):

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

Podes activar pestanas individuais de varias maneiras:

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

Efecto de desvanecemento

Para que as pestanas se desvanezan, engade .fadea cada unha .tab-pane. O primeiro panel de pestanas tamén debe .showfacer visible o contido 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étodos

Métodos asíncronos e transicións

Todos os métodos da API son asíncronos e inician unha transición . Volven ao interlocutor en canto se inicia a transición pero antes de que remate . Ademais, ignorarase unha chamada de método nun compoñente en transición .

Consulte a nosa documentación de JavaScript para obter máis información .

$().tab

Activa un elemento de pestana e un contenedor de contido. A pestana debe ter un atributo data-targetou, se se utiliza unha ligazón, un hrefatributo dirixido a un nodo de contedores no 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 a pestana indicada e mostra o seu panel asociado. Calquera outra pestana que se seleccionase anteriormente non se selecciona e o seu panel asociado queda oculto. Volve ao interlocutor antes de que se amosara o panel de pestanas (é dicir, antes de shown.bs.tabque se produza o evento).

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

.tab('eliminar')

Destrúe a pestana dun elemento.

Eventos

Cando se mostra unha nova pestana, os eventos desenvólvense na seguinte orde:

hide.bs.tab(na pestana activa actual)
show.bs.tab(na pestana por mostrar)
hidden.bs.tab(na pestana activa anterior, a mesma que para o hide.bs.tabevento)
shown.bs.tab(na pestana que acaba de mostrarse activa, a mesma que para o show.bs.tabevento)

Se xa non estaba activa ningunha pestana, os eventos hide.bs.tabe hidden.bs.tabnon se activarán.

Tipo de evento	Descrición
mostrar.bs.tab	Este evento desenvólvese na mostra de pestanas, pero antes de que se mostrase a nova pestana. Use `event.target`e `event.relatedTarget`para orientar a pestana activa e a pestana activa anterior (se está dispoñible) respectivamente.
mostrado.bs.tab	Este evento desenvólvese na mostra de pestanas despois de que se mostrase unha pestana. Use `event.target`e `event.relatedTarget`para orientar a pestana activa e a pestana activa anterior (se está dispoñible) respectivamente.
ocultar.bs.tab	Este evento desenvólvese cando se quere mostrar unha nova pestana (e, polo tanto, debe ocultarse a pestana activa anterior). Use `event.target`e `event.relatedTarget`para orientar a pestana activa actual e a nova pestana que estará activa en breve, respectivamente.
hidden.bs.tab	Este evento desenvólvese despois de que se amose unha nova pestana (e polo tanto se oculta a pestana activa anterior). Use `event.target`e `event.relatedTarget`para apuntar á pestana activa anterior e á nova pestana activa, respectivamente.

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