in English

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

<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

<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

<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

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

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

<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

<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

<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

<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

<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

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

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

<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
Cuarta casilla de verificación
Quinta casilla

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

Y si desea <label>s .list-group-itempara áreas de gran impacto, también puede hacerlo.

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

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Hablar con descaro a

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

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Puede activar elementos de lista individuales de varias maneras:

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

var 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

constructor

Activa un elemento de elemento de lista y un contenedor de contenido. La pestaña debe tener un data-bs-targeto un hrefnodo contenedor en el DOM.

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

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

<script>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

mostrar

Selecciona el elemento de la lista dada y muestra su panel asociado. Cualquier otro elemento de la lista que se seleccionó 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 (por ejemplo, antes de shown.bs.tabque ocurra el evento).

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

disponer

Destruye la pestaña de un elemento.

obtener Instancia

Método estático que le permite obtener la instancia de pestaña asociada con un elemento DOM

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

Método estático que le permite obtener la instancia de pestaña asociada con un elemento DOM, o crear una nueva en caso de que no se haya inicializado

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

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

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