Grupo de listas

Os grupos de listas son un compoñente flexible e poderoso para mostrar unha serie de contidos. Modifícaos e estendeos para admitir case calquera contido.

Nesta páxina

Exemplo básico

O grupo de listas máis básico é unha lista sen ordenar con elementos de lista e as clases adecuadas. Constrúeo coas opcións que seguen ou co teu propio CSS segundo sexa necesario.

Un elemento
Un segundo elemento
Un terceiro elemento
Un cuarto elemento
E 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

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

Un elemento activo
Un segundo elemento
Un terceiro elemento
Un cuarto elemento
E 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 desactivados

Engade .disableda un .list-group-itempara que pareza desactivado. Teña en conta que algúns elementos con .disabledtamén precisarán JavaScript personalizado para desactivar completamente os seus eventos de clic (por exemplo, ligazóns).

Un elemento desactivado
Un segundo elemento
Un terceiro elemento
Un cuarto elemento
E 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>

Ligazóns e botóns

Engadindo . <a>_ <button>_ _ _ .list-group-item-actionSeparamos estas pseudoclases para asegurarnos de que os grupos de listas feitos de elementos non interactivos (como <li>s ou <div>s) non ofrezan un clic ou toque.

Asegúrate de non usar aquí as clases estándar.btn .

O elemento da ligazón actual Un segundo elemento de ligazón Un terceiro elemento de ligazón Un cuarto elemento de ligazón Un elemento de ligazón desactivado

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, tamén podes facer uso do disabledatributo en lugar da .disabledclase. Lamentablemente, <a>s non admite o atributo desactivado.

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>

Fluxado

Engadir .list-group-flushpara eliminar algúns bordos e cantos redondeados para renderizar os elementos do grupo da lista de bordo a bordo nun contenedor principal (por exemplo, tarxetas).

Un elemento
Un segundo elemento
Un terceiro elemento
Un cuarto elemento
E 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

Engade a .list-group-numberedclase modificadora (e, opcionalmente, utiliza un <ol>elemento) para optar por elementos do grupo de listas numeradas. Os números xéranse a través de CSS (en oposición ao <ol>estilo de navegador predeterminado) para unha mellor colocación dentro dos elementos do grupo da lista e para permitir unha mellor personalización.

Os números xéranse por counter-resetsobre o <ol>, e despois son estilizados e colócanse cun ::beforepseudoelemento sobre <li>con counter-incremente content.

Un elemento da lista
Un elemento da lista
Un elemento da 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>

Estes funcionan moi ben con contido personalizado tamén.

Subtítulo
Contido para o elemento da lista
14
Subtítulo
Contido para o elemento da lista
14
Subtítulo
Contido para o elemento da 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

Engadir .list-group-horizontalpara cambiar o deseño dos elementos do grupo da lista de vertical a horizontal en todos os puntos de interrupción. Alternativamente, escolla unha variante receptiva .list-group-horizontal-{sm|md|lg|xl|xxl}para facer un grupo de listas horizontal comezando no punto de interrupción dese punto min-width. Actualmente , os grupos de listas horizontais non se poden combinar con grupos de listas vaciadas.

ProTip: Queres elementos do grupo da lista de ancho igual cando están horizontais? Engadir .flex-filla cada elemento do grupo da lista.

Un elemento
Un segundo elemento
Un terceiro elemento

Un elemento
Un segundo elemento
Un terceiro elemento

Un elemento
Un segundo elemento
Un terceiro elemento

Un elemento
Un segundo elemento
Un terceiro elemento

Un elemento
Un segundo elemento
Un terceiro elemento

Un elemento
Un segundo elemento
Un terceiro 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 contextuais

Use clases contextuais para dar estilo aos elementos da lista cun fondo e cor con estado.

Un simple elemento de grupo de lista predeterminado
Un simple elemento de grupo de lista principal
Un elemento de grupo de lista secundario sinxelo
Un simple elemento de grupo da lista de éxitos
Un simple elemento de grupo da lista de perigos
Un simple elemento de grupo de lista de avisos
Un simple elemento de grupo de lista de información
Un simple elemento de grupo de lista de luz
Un simple elemento de grupo de lista escura

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>

As clases contextuais tamén funcionan con .list-group-item-action. Teña en conta a adición dos estilos de hover aquí non presentes no exemplo anterior. Tamén se apoia o .activeEstado; aplícao para indicar unha selección activa nun elemento de grupo de lista contextual.

Un simple elemento de grupo de lista predeterminado Un simple elemento de grupo de lista principal Un elemento de grupo de lista secundario sinxelo Un simple elemento de grupo da lista de éxitos Un simple elemento de grupo da lista de perigos Un simple elemento de grupo de lista de avisos Un simple elemento de grupo de lista de información Un simple elemento de grupo de lista de luz Un simple elemento de grupo de lista escura

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 ás tecnoloxías de asistencia

Usar cor para engadir significado só proporciona unha indicación visual, que non se transmitirá aos usuarios de tecnoloxías auxiliares, como lectores de pantalla. Asegúrese de que a información indicada pola cor sexa obvia desde o propio contido (por exemplo, o texto visible) ou se inclúa a través de medios alternativos, como o texto adicional oculto coa .visually-hiddenclase.

Con distintivos

Engade insignias a calquera elemento do grupo da lista para mostrar contas non lidas, actividade e moito máis coa axuda dalgunhas utilidades .

Un elemento da lista14
Un segundo elemento da lista2
Un terceiro elemento da 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>

Contido personalizado

Engade case calquera HTML dentro, mesmo para grupos de listas vinculadas como o seguinte, coa axuda das utilidades de flexbox .

Encabezamento do elemento do grupo da lista

hai 3 días

Algún contido de marcador de posición nun parágrafo.

E algunha letra pequena.

Encabezamento do elemento do grupo da lista

hai 3 días

Algún contido de marcador de posición nun parágrafo.

E algunhas letras pequenas silenciadas.

Encabezamento do elemento do grupo da lista

hai 3 días

Algún contido de marcador de posición nun parágrafo.

E algunhas letras pequenas silenciadas.

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>

Caixas de verificación e radios

Coloca as caixas de verificación e as radios de Bootstrap dentro dos elementos do grupo da lista e personalízaas segundo sexa necesario. Podes usalos sen <label>s, pero recorda incluír un aria-labelatributo e un valor para a accesibilidade.

Primeira caixa de verificación
Segunda caixa de verificación
Terceira caixa de verificación

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>

Primeira radio
Segunda radio
Terceira 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>

Podes usar .stretched-linkon <label>s para facer clic en todo o elemento do grupo da lista.

Primeira caixa de verificación
Segunda caixa de verificación
Terceira caixa de verificación

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

Engadido na v5.2.0

Como parte do enfoque de variables CSS en evolución de Bootstrap, os grupos de listas usan agora variables CSS locais activadas .list-grouppara mellorar a personalización en tempo real. Os valores para as variables CSS establécense a través de Sass, polo que a personalización de Sass tamén se admite.

  --#{$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};

Variables Sass

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

Mixins

Usado en combinación con $theme-colorspara xerar as clases de variantes contextuais 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;
      }
    }
  }
}

Bucle

Loop que xera as clases modificadoras co 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);
}

Comportamento de JavaScript

Use o complemento de JavaScript da pestana (inclúeo individualmente ou a través do bootstrap.jsficheiro compilado) para ampliar o noso grupo de listas e crear paneis con pestanas de contido local.

Casa Perfil Mensaxes Configuración

Algún contido de marcador de posición nun parágrafo relacionado con "Inicio". E algo máis de contido, usado aquí só para completar e encher este panel de pestanas. Na produción, obviamente terías máis contido real aquí. E non só texto. Pode ser calquera cousa, de verdade. Textos, imaxes, 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>

Usando atributos de datos

Pode activar unha navegación de grupo de lista sen escribir JavaScript simplemente especificando data-bs-toggle="list"ou nun elemento. Use estes 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>

Vía JavaScript

Activa o elemento da lista con tabulacións mediante JavaScript (cada elemento da 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()
  })
})

Podes activar un elemento de lista individual de varias maneiras:

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 desvanecemento

Para que o panel de pestanas se desvanece, engádeo .fadea cada un .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">...</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

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 .

Activa o teu contido como elemento de pestana.

Podes crear unha instancia de pestana co construtor, por exemplo:

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

Método	Descrición
`dispose`	Destrúe a pestana dun elemento.
`getInstance`	Método estático que che permite obter a instancia da pestana asociada a un elemento DOM, podes usalo así: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Método estático que devolve unha instancia de tabulación asociada a un elemento DOM ou crea unha nova no caso de que non se inicializou. Podes usalo así: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	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.tab`que se produza o evento).

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
`hide.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.
`show.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 apuntar á pestana activa e á pestana activa anterior (se está dispoñible) respectivamente.
`shown.bs.tab`	Este evento desenvólvese na mostra de pestanas despois de que se mostrase unha pestana. Use `event.target`e `event.relatedTarget`para apuntar á pestana activa e á pestana activa anterior (se está dispoñible) 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
  })
})