Grupo de lista

Los grupos de listas son un componente flexible y potente para mostrar una serie de contenidos. Modifíquelos y amplíelos para que admitan prácticamente cualquier contenido.

En esta página

Ejemplo básico

El grupo de lista más básico es una lista desordenada con elementos de lista y las clases adecuadas. Construya sobre él con las opciones que siguen, o con su propio CSS según sea necesario.

un artículo
un segundo elemento
un tercer elemento
Un cuarto elemento
y un quinto

html

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Elementos activos

Agregar .activea a .list-group-itempara indicar la selección activa actual.

Un elemento activo
un segundo elemento
un tercer elemento
Un cuarto elemento
y un quinto

html

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

elementos deshabilitados

Agregue .disableda .list-group-itempara que aparezca deshabilitado. Tenga en cuenta que algunos elementos .disabledtambién requerirán JavaScript personalizado para deshabilitar por completo sus eventos de clic (por ejemplo, enlaces).

Un elemento deshabilitado
un segundo elemento
un tercer elemento
Un cuarto elemento
y un quinto

html

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

enlaces y botones

Use <a>s o <button>s para crear elementos de grupo de lista procesable con estados de activación, desactivado y activo agregando .list-group-item-action. Separamos estas pseudoclases para garantizar que los grupos de listas hechos de elementos no interactivos (como <li>s o <div>s) no proporcionen la posibilidad de hacer clic o tocar.

Asegúrese de no utilizar las .btnclases estándar aquí .

El elemento de enlace actual Un segundo elemento de enlace Un tercer elemento de enlace Un cuarto elemento de enlace Un elemento de enlace deshabilitado

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Con <button>s, también puede utilizar el disabledatributo en lugar de la .disabledclase. Lamentablemente, <a>s no admite el atributo deshabilitado.

html

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Enjuagar

Agregue .list-group-flushpara eliminar algunos bordes y esquinas redondeadas para representar los elementos del grupo de listas de borde a borde en un contenedor principal (por ejemplo, tarjetas).

un artículo
un segundo elemento
un tercer elemento
Un cuarto elemento
y un quinto

html

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Numerado

Agregue la .list-group-numberedclase de modificador (y, opcionalmente, use un <ol>elemento) para participar en los elementos del grupo de listas numeradas. Los números se generan a través de CSS (a diferencia de un <ol>estilo de navegador predeterminado) para una mejor ubicación dentro de los elementos del grupo de listas y para permitir una mejor personalización.

Los números son generados por counter-reseten el <ol>, y luego se les da estilo y se colocan con un ::beforepseudo-elemento en el <li>con counter-incrementy content.

Un elemento de la lista
Un elemento de la lista
Un elemento de la lista

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Estos también funcionan muy bien con contenido personalizado.

Subtítulo
Contenido para el elemento de la lista
14
Subtítulo
Contenido para el elemento de la lista
14
Subtítulo
Contenido para el elemento de la lista
14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Horizontal

Agregar .list-group-horizontalpara cambiar el diseño de los elementos del grupo de listas de vertical a horizontal en todos los puntos de interrupción. Como alternativa, elija una variante receptiva .list-group-horizontal-{sm|md|lg|xl|xxl}para hacer que un grupo de listas sea horizontal a partir de ese punto de interrupción min-width. Actualmente , los grupos de listas horizontales no se pueden combinar con grupos de listas al ras.

Consejo profesional: ¿Desea elementos de grupo de lista de igual ancho cuando están en posición horizontal? Agregar .flex-filla cada elemento del grupo de lista.

un artículo
un segundo elemento
un tercer elemento

un artículo
un segundo elemento
un tercer elemento

un artículo
un segundo elemento
un tercer elemento

un artículo
un segundo elemento
un tercer elemento

un artículo
un segundo elemento
un tercer elemento

un artículo
un segundo elemento
un tercer elemento

html

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Clases contextuales

Utilice clases contextuales para aplicar estilo a los elementos de la lista con un fondo y un color con estado.

Un elemento de grupo de lista predeterminado simple
Un elemento de grupo de lista principal simple
Un elemento de grupo de lista secundario simple
Un elemento de grupo de lista de éxito simple
Un elemento de grupo de lista de peligro simple
Un elemento de grupo de lista de advertencia simple
Un elemento de grupo de lista de información simple
Un elemento de grupo de lista de luz simple
Un elemento de grupo de lista oscura simple

html

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Las clases contextuales también funcionan con .list-group-item-action. Tenga en cuenta la adición de los estilos de desplazamiento aquí que no están presentes en el ejemplo anterior. También se apoya el .activeestado; aplicarlo para indicar una selección activa en un elemento de grupo de lista contextual.

Un elemento de grupo de lista predeterminado simple Un elemento de grupo de lista principal simple Un elemento de grupo de lista secundario simple Un elemento de grupo de lista de éxito simple Un elemento de grupo de lista de peligro simple Un elemento de grupo de lista de advertencia simple Un elemento de grupo de lista de información simple Un elemento de grupo de lista de luz simple Un elemento de grupo de lista oscura simple

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Transmitir significado a las tecnologías de asistencia

El uso del color para agregar significado solo proporciona una indicación visual, que no se transmitirá a los usuarios de tecnologías de asistencia, como los lectores de pantalla. Asegúrese de que la información indicada por el color sea obvia a partir del contenido en sí (por ejemplo, el texto visible) o se incluya a través de medios alternativos, como texto adicional oculto con la .visually-hiddenclase.

con insignias

Agregue insignias a cualquier elemento del grupo de listas para mostrar recuentos no leídos, actividad y más con la ayuda de algunas utilidades .

Un elemento de la lista14
Un segundo elemento de la lista2
Un tercer elemento de la lista1

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Contenido personalizado

Agregue casi cualquier HTML dentro, incluso para grupos de listas vinculadas como el que se muestra a continuación, con la ayuda de las utilidades Flexbox .

Encabezado de elemento de grupo de lista

Hace 3 días

Algún contenido de marcador de posición en un párrafo.

Y alguna letra pequeña.

Encabezado de elemento de grupo de lista

Hace 3 días

Algún contenido de marcador de posición en un párrafo.

Y alguna letra pequeña apagada.

Encabezado de elemento de grupo de lista

Hace 3 días

Algún contenido de marcador de posición en un párrafo.

Y alguna letra pequeña apagada.

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

Casillas de verificación y radios

Coloque las casillas de verificación y radios de Bootstrap dentro de los elementos del grupo de listas y personalícelos según sea necesario. Puede usarlos sin <label>s, pero recuerde incluir un aria-labelatributo y un valor para la accesibilidad.

Primera casilla de verificación
Segunda casilla de verificación
Tercera casilla

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

Primera radio
Segunda radio
tercera radio

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Puede usar .stretched-linkon <label>s para hacer que se pueda hacer clic en todo el elemento del grupo de la lista.

Primera casilla de verificación
Segunda casilla de verificación
Tercera casilla

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

Variables

Añadido en v5.2.0

Como parte del enfoque de variables CSS en evolución de Bootstrap, los grupos de listas ahora usan variables CSS locales .list-grouppara mejorar la personalización en tiempo real. Los valores para las variables CSS se establecen a través de Sass, por lo que también se admite la personalización de Sass.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass variables

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

mezclas

Se utiliza en combinación con $theme-colorspara generar las clases de variantes contextuales para .list-group-items.

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Círculo

Bucle que genera las clases de modificador con el list-group-item-variant()mixin.

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

Comportamiento de JavaScript

Use el complemento JavaScript de pestañas, inclúyalo individualmente o a través del archivo compilado bootstrap.js, para ampliar nuestro grupo de listas y crear paneles de contenido local que se puedan tabular.

Hogar Perfil Mensajes Ajustes

Algún contenido de marcador de posición en un párrafo relacionado con "Inicio". Y algo más de contenido, usado aquí solo para rellenar y llenar este panel de pestañas. En producción, obviamente tendrías más contenido real aquí. Y no solo texto. Podría ser cualquier cosa, de verdad. Texto, imágenes, formularios.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Uso de atributos de datos

Puede activar la navegación de un grupo de listas sin escribir JavaScript simplemente especificando data-bs-toggle="list"o en un elemento. Utilice estos atributos de datos en .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

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

A través de JavaScript

Habilite el elemento de la lista con pestañas a través de JavaScript (cada elemento de la lista debe activarse individualmente):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Puede activar elementos de lista individuales de varias maneras:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Efecto de desvanecimiento

Para hacer que el panel de pestañas se desvanezca, agregue .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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</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 .

Activa tu contenido como un elemento de pestaña.

Puede crear una instancia de pestaña con el constructor, por ejemplo:

const bsTab = new bootstrap.Tab('#myTab')

Método	Descripción
`dispose`	Destruye la pestaña de un elemento.
`getInstance`	Método estático que le permite obtener la instancia de pestaña asociada con un elemento DOM, puede usarlo así: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Método estático que devuelve una instancia de pestaña asociada a un elemento DOM o crea una nueva en caso de que no se haya inicializado. Puedes usarlo así: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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.tab`que ocurra el evento).

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
`hide.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.
`hidden.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.
`show.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.
`shown.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.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})