Navegadores

Documentación y ejemplos sobre cómo usar los componentes de navegación incluidos de Bootstrap.

Navegación base

La navegación disponible en Bootstrap comparte marcas y estilos generales, desde la .navclase base hasta los estados activo y deshabilitado. Cambia las clases de modificadores para cambiar entre cada estilo.

El .navcomponente base está construido con flexbox y proporciona una base sólida para construir todo tipo de componentes de navegación. Incluye algunas anulaciones de estilo (para trabajar con listas), algo de relleno de enlaces para áreas de acceso más grandes y estilo básico deshabilitado.

El .navcomponente base no incluye ningún .activeestado. Los siguientes ejemplos incluyen la clase, principalmente para demostrar que esta clase en particular no 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>

Las clases se utilizan en todo momento, por lo que su marcado puede ser súper flexible. Use <ul>s como arriba, <ol>si el orden de sus artículos es importante, o ruede el suyo con un <nav>elemento. Debido a que .navuses display: flex, los enlaces de navegación se comportan igual que los elementos de navegación, pero sin el 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 disponibles

Cambie el estilo del .navcomponente s con modificadores y utilidades. Mezcle y combine según sea necesario, o construya el suyo propio.

Alineación horizontal

Cambie la alineación horizontal de su navegador con las utilidades flexbox . De forma predeterminada, los navegadores están alineados a la izquierda, pero puede cambiarlos fácilmente para que estén alineados al centro o a la derecha.

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>

Alineado a la derecha 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

Apila tu navegación cambiando la dirección del elemento flexible con la .flex-columnutilidad. ¿Necesita apilarlos en algunas ventanas gráficas pero no en otras? Utilice las versiones receptivas (p. ej., .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 siempre, la navegación vertical <ul>también es posible sin 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>

Pestañas

Toma la navegación básica de arriba y agrega la .nav-tabsclase para generar una interfaz con pestañas. Úselos para crear regiones tabulables con nuestro complemento JavaScript de pestañas .

<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 ese mismo HTML, pero use en su .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>

Llena y justifica

Fuerce el .navcontenido de su 's para extender el ancho total disponible en una de las dos clases de modificadores. Para llenar proporcionalmente todo el espacio disponible con su .nav-items, use .nav-fill. Observe que todo el espacio horizontal está ocupado, pero no todos los elementos de navegación tienen el mismo 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>

Al usar una <nav>navegación basada en , puede omitir de manera segura .nav-itemya que solo .nav-linkse requiere para diseñar <a>elementos.

<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 el espacio horizontal estará ocupado por enlaces de navegación, pero a diferencia de lo .nav-fillanterior, cada elemento de navegación tendrá el mismo 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 al .nav-fillejemplo usando una <nav>navegación 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>

Trabajando con utilidades flexibles

Si necesita variaciones de navegación receptivas, considere usar una serie de utilidades flexbox . Si bien son más detalladas, estas utilidades ofrecen una mayor personalización en los puntos de interrupción receptivos. En el ejemplo a continuación, nuestra navegación se apilará en el punto de interrupción más bajo, luego se adaptará a un diseño horizontal que llena el ancho disponible a partir del punto de interrupción pequeño.

<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 cuanto a la accesibilidad

Si está utilizando navs para proporcionar una barra de navegación, asegúrese de agregar role="navigation"al contenedor principal más lógico del <ul>, o ajuste un <nav>elemento alrededor de toda la navegación. No agregue el rol en <ul>sí mismo, ya que esto evitaría que las tecnologías de asistencia lo anuncien como una lista real.

Tenga en cuenta que a las barras de navegación, incluso si tienen un estilo visual como pestañas con la .nav-tabsclase, no se les debe dar ni atributos. Estos solo son apropiados para interfaces con pestañas dinámicas, como se describe en el patrón de pestañas de la Guía de prácticas de creación de ARIA . Consulte el comportamiento de JavaScript para interfaces con pestañas dinámicas en esta sección para ver un ejemplo.role="tablist"role="tab"role="tabpanel"

Usar menús desplegables

Agregue menús desplegables con un poco de HTML adicional y el complemento JavaScript de menús desplegables .

Pestañas con menús 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>

Pastillas con menús 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>

Comportamiento de JavaScript

Use el complemento JavaScript de pestañas, inclúyalo individualmente o a través del archivo compilado bootstrap.js, para ampliar nuestras pestañas y píldoras de navegación para crear paneles de contenido local en los que se pueden tabular.

Si está compilando nuestro JavaScript desde la fuente, requiereutil.js .

Las interfaces con pestañas dinámicas, como se describe en el patrón de pestañas de la Guía de prácticas de creación de ARIArole="tablist" , requieren atributos adicionales para transmitir su estructura, funcionalidad y estado actual a los usuarios de tecnologías de asistencia (como lectores de pantalla). Como práctica recomendada, recomendamos usar elementos para las pestañas, ya que estos son controles que activan un cambio dinámico, en lugar de enlaces que navegan a una nueva página o ubicación.role="tab"role="tabpanel"aria-<button>

Tenga en cuenta que el complemento JavaScript de pestañas no es compatible con las interfaces con pestañas que contienen menús desplegables, ya que provocan problemas de usabilidad y accesibilidad. Desde una perspectiva de usabilidad, el hecho de que el elemento activador de la pestaña que se muestra actualmente no sea visible de inmediato (ya que está dentro del menú desplegable cerrado) puede causar confusión. Desde el punto de vista de la accesibilidad, actualmente no existe una forma sensata de asignar este tipo de construcción a un patrón WAI ARIA estándar, lo que significa que no puede hacerse fácilmente comprensible para los usuarios de tecnologías de asistencia.

Contenido de marcador de posición para el panel de pestañas. Este se relaciona con la pestaña de inicio. Te lleva millas alto, muy alto, porque ella tiene esa sonrisa internacional. Hay un extraño en mi cama, hay un latido en mi cabeza. Oh, no. En otra vida te haría quedar. Porque yo, soy capaz de cualquier cosa. Preparándome para mi batalla final. Solía robar el licor de tus padres y subir al techo. Tonifica, broncea y listo, súbelo porque se está poniendo pesado. Su amor es como una droga. Supongo que olvidé que tenía una opción.

Contenido de marcador de posición para el panel de pestañas. Este se relaciona con la pestaña de perfil. Tienes la mejor arquitectura. Sellos de pasaporte, ella es cosmopolita. Fino, fresco, feroz, lo tenemos en la cerradura. Nunca planeé que algún día te perdería. Ella te come el corazón. Tu beso es cósmico, cada movimiento es mágico. Me refiero a los, me refiero a que ella es la única. Saludos amados, hagamos un viaje. ¡Solo sé dueño de la noche como el 4 de julio! Pero prefieres emborracharte.

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 ayudar a satisfacer sus necesidades, esto funciona con <ul>el marcado basado en -, como se muestra arriba, o con cualquier marcado arbitrario "roll your own". Tenga en cuenta que si está usando <nav>, no debe agregarlo role="tablist"directamente, ya que esto anularía la función nativa del elemento como punto de referencia de navegación. En su lugar, cambia a un elemento alternativo (en el ejemplo a continuación, un simple <div>) y envuélvelo <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>

El complemento de pestañas también funciona con pastillas.

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

Y con pastillas verticales.

Contenido de marcador de posición para el panel de pestañas. Este se relaciona con la pestaña de inicio. Te vi en el centro cantando Blues. Mira cómo circulas por el desagüe. ¿Por qué no me dejas pasar? Pesada es la cabeza que lleva la corona. Sí, hacemos llorar a los ángeles, lloviendo sobre la tierra desde arriba. ¿Quieres ver el espectáculo en 3D, una película. ¿Alguna vez te sientes, te sientes tan delgado como el papel? Es un sí o no, no tal vez.

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>

Uso de atributos de datos

Puede activar una pestaña o una píldora de navegación sin escribir JavaScript simplemente especificando data-toggle="tab"o data-toggle="pill"en un elemento. Utilice estos atributos de datos en .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>

A través de JavaScript

Habilite las pestañas que se pueden tabular a través de JavaScript (cada pestaña debe activarse individualmente):

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

Puede activar pestañas individuales de varias maneras:

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

Para hacer que las pestañas se desvanezcan, agréguelas .fadea cada .tab-pane. El primer panel de pestañas también debe tener .showpara hacer visible el contenido 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

Transiciones y métodos asíncronos

Todos los métodos de API son asíncronos e inician una transición . Vuelven a la persona que llama tan pronto como se inicia la transición, pero antes de que finalice . Además, se ignorará una llamada de método en un componente en transición .

Consulte nuestra documentación de JavaScript para obtener más información .

$().pestaña

Activa un elemento de pestaña y un contenedor de contenido. La pestaña debe tener un atributo data-targeto, si usa un enlace, un hrefatributo dirigido a un nodo contenedor en el 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 pestaña dada y muestra su panel asociado. Cualquier otra pestaña que se haya seleccionado previamente se deselecciona y su panel asociado se oculta. Vuelve a la persona que llama antes de que se haya mostrado realmente el panel de pestañas (es decir, antes de shown.bs.tabque ocurra el evento).

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

.tab('eliminar')

Destruye la pestaña de un elemento.

Eventos

Al mostrar una nueva pestaña, los eventos se activan en el siguiente orden:

hide.bs.tab(en la pestaña activa actual)
show.bs.tab(en la pestaña que se mostrará)
hidden.bs.tab(en la pestaña activa anterior, la misma que para el hide.bs.tabevento)
shown.bs.tab(en la pestaña recién activa recién mostrada, la misma que para el show.bs.tabevento)

Si ninguna pestaña ya estaba activa, los eventos hide.bs.taby hidden.bs.tabno se activarán.

Tipo de evento	Descripción
mostrar.bs.tab	Este evento se activa al mostrar la pestaña, pero antes de que se muestre la nueva pestaña. Use `event.target`y `event.relatedTarget`para apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
mostrado.bs.tab	Este evento se activa en la presentación de pestañas después de que se haya mostrado una pestaña. Use `event.target`y `event.relatedTarget`para apuntar a la pestaña activa y la pestaña activa anterior (si está disponible) respectivamente.
ocultar.bs.tab	Este evento se activa cuando se va a mostrar una nueva pestaña (y, por lo tanto, se va a ocultar la pestaña activa anterior). Use `event.target`y `event.relatedTarget`para apuntar a la pestaña activa actual y la nueva pestaña que pronto estará activa, respectivamente.
oculto.bs.tab	Este evento se activa después de que se muestra una nueva pestaña (y, por lo tanto, se oculta la pestaña activa anterior). Use `event.target`y `event.relatedTarget`para apuntar a la pestaña activa anterior y la nueva pestaña activa, respectivamente.

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