Grup de llista

Els grups de llistes són un component flexible i potent per mostrar una sèrie de contingut. Modifiqueu-los i amplieu-los per admetre gairebé qualsevol contingut.

En aquesta pàgina

Exemple bàsic

El grup de llista més bàsic és una llista no ordenada amb elements de llista i les classes adequades. Construeix-hi amb les opcions següents o amb el teu propi CSS segons sigui necessari.

Un element
Un segon element
Un tercer element
Un quart element
I un cinquè

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>

Elements actius

Afegeix .activea a .list-group-itemper indicar la selecció activa actual.

Un element actiu
Un segon element
Un tercer element
Un quart element
I un cinquè

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>

Elements desactivats

Afegeix .disableda .list-group-itema perquè sembli desactivat. Tingueu en compte que alguns elements amb .disabledtambé requeriran JavaScript personalitzat per desactivar completament els seus esdeveniments de clic (p. ex., enllaços).

Un element inhabilitat
Un segon element
Un tercer element
Un quart element
I un cinquè

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>

Enllaços i botons

Utilitzeu <a>s o <button>s per crear elements de grup de llista accionables amb estats de desplaçament, desactivat i actiu afegint .list-group-item-action. Separem aquestes pseudoclasses per assegurar-nos que els grups de llista fets d'elements no interactius (com ara <li>s o <div>s) no proporcionen un clic o un toc.

Assegureu-vos de no utilitzar les .btnclasses estàndard aquí .

L'element d'enllaç actual Un segon element d'enllaç Un tercer element d'enllaç Un quart element d'enllaç Un element d'enllaç desactivat

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>

Amb <button>s, també podeu fer ús de l' disabledatribut en lloc de la .disabledclasse. Malauradament, <a>s no admet l'atribut desactivat.

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>

Rubor

Afegeix .list-group-flushper eliminar algunes vores i cantonades arrodonides per representar els elements del grup de la llista de vora a vora en un contenidor principal (p. ex., targetes).

Un element
Un segon element
Un tercer element
Un quart element
I un cinquè

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>

Numerat

Afegiu la .list-group-numberedclasse modificadora (i, opcionalment, utilitzeu un <ol>element) per optar als elements del grup de la llista numerada. Els números es generen mitjançant CSS (a diferència de l' <ol>estil predeterminat d'un navegador) per a una millor col·locació dins dels elements del grup de la llista i per permetre una millor personalització.

Els nombres es generen per counter-reseta <ol>, i després s'estilen i es col·loquen amb un ::beforepseudoelement a <li>amb counter-incrementi content.

Un element de llista
Un element de llista
Un element de llista

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>

També funcionen molt bé amb contingut personalitzat.

Subtítol
Contingut per a l'element de la llista
14
Subtítol
Contingut per a l'element de la llista
14
Subtítol
Contingut per a l'element de la llista
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>

Horitzontal

Afegeix .list-group-horizontalper canviar la disposició dels elements del grup de llista de vertical a horitzontal en tots els punts d'interrupció. Alternativament, escolliu una variant responsiva .list-group-horizontal-{sm|md|lg|xl|xxl}per fer un grup de llista horitzontal començant en el punt d'interrupció d'aquest punt min-width. Actualment , els grups de llistes horitzontals no es poden combinar amb els grups de llistes envàs.

ProTip: voleu elements de grup de llista d'amplada igual quan siguin horitzontals? Afegeix .flex-filla cada element de grup de llista.

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

Un element
Un segon element
Un tercer element

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>

Classes contextuals

Utilitzeu classes contextuals per estilitzar els elements de la llista amb un fons i un color amb estat.

Un element de grup de llista predeterminat senzill
Un element de grup de llista principal senzill
Un element de grup de llista secundari senzill
Un element senzill de grup de llista d'èxits
Un element de grup de llista de perill senzill
Un element de grup de llista d'avís senzill
Un element senzill de grup de llista d'informació
Un element senzill de grup de llista lleugera
Un element de grup de llista fosca senzilla

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>

Les classes contextuals també funcionen amb .list-group-item-action. Tingueu en compte l'addició d'estils de flotació aquí no presents a l'exemple anterior. També es recolza l' .activeestat; apliqueu-lo per indicar una selecció activa en un element de grup de llista contextual.

Un element de grup de llista predeterminat senzill Un element de grup de llista principal senzill Un element de grup de llista secundari senzill Un element senzill de grup de llista d'èxits Un element de grup de llista de perill senzill Un element de grup de llista d'avís senzill Un element senzill de grup de llista d'informació Un element senzill de grup de llista lleugera Un element de grup de llista fosca senzilla

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>

Transmetre significat a les tecnologies d'assistència

L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .visually-hiddenclasse.

Amb distintius

Afegiu insígnies a qualsevol element de grup de llista per mostrar els recomptes no llegits, l'activitat i més amb l'ajuda d'algunes utilitats .

Un element de llista14
Un segon element de la llista2
Un tercer element de la llista1

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>

Contingut personalitzat

Afegiu gairebé qualsevol HTML dins, fins i tot per a grups de llistes enllaçades com el següent, amb l'ajuda de les utilitats flexbox .

Encapçalament d'elements del grup de llista

fa 3 dies

Algun contingut de marcador de posició en un paràgraf.

I alguna lletra petita.

Encapçalament d'elements del grup de llista

fa 3 dies

Algun contingut de marcador de posició en un paràgraf.

I alguna lletra petita silenciada.

Encapçalament d'elements del grup de llista

fa 3 dies

Algun contingut de marcador de posició en un paràgraf.

I alguna lletra petita silenciada.

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>

Caselles de selecció i ràdios

Col·loqueu les caselles de selecció i les ràdios de Bootstrap dins dels elements del grup de la llista i personalitzeu-les segons sigui necessari. Podeu utilitzar-los sense <label>s, però recordeu incloure un aria-labelatribut i un valor per a l'accessibilitat.

Primera casella de selecció
Segona casella de selecció
Tercera casella de selecció

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 ràdio
Segona ràdio
Tercera ràdio

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>

Podeu utilitzar .stretched-linkon <label>s per fer clic a tot l'element del grup de la llista.

Primera casella de selecció
Segona casella de selecció
Tercera casella de selecció

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

Les variables

Afegit a la v5.2.0

Com a part de l'enfocament de les variables CSS en evolució de Bootstrap, els grups de llista ara utilitzen variables CSS locals activades per .list-groupa una personalització millorada en temps real. Els valors de les variables CSS s'estableixen mitjançant Sass, de manera que la personalització de Sass encara és compatible.

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

S'utilitza en combinació amb $theme-colorsper generar les classes de variants contextuals per a .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

Bucle que genera les classes modificadores amb 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);
}

Comportament de JavaScript

Utilitzeu el connector de JavaScript de la pestanya (incloeu-lo individualment o mitjançant el bootstrap.jsfitxer compilat) per ampliar el nostre grup de llista i crear panells amb pestanyes de contingut local.

Casa Perfil Missatges Configuració

Alguns continguts de marcador de posició en un paràgraf relacionat amb "Inici". I una mica més de contingut, que s'utilitza aquí només per completar i omplir aquest panell de pestanyes. En producció, òbviament tindries més contingut real aquí. I no només text. Podria ser qualsevol cosa, de veritat. Text, imatges, formularis.

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>

Ús d'atributs de dades

Podeu activar una navegació per grups de llista sense escriure cap JavaScript simplement especificant data-bs-toggle="list"o en un element. Utilitzeu aquests atributs de dades a .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>

Mitjançant JavaScript

Habilita l'element de la llista amb tabulació mitjançant JavaScript (cada element de la llista s'ha d'activar individualment):

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

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

Podeu activar un element de llista individual de diverses maneres:

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

Efecte esvaït

Per fer que el tauler de pestanyes s'esvaeixi, afegiu -lo .fadea cadascun .tab-pane. El primer panell de pestanyes també ha .showde fer visible el contingut 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ètodes

Mètodes asíncrons i transicions

Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .

Consulteu la nostra documentació de JavaScript per obtenir més informació .

Activa el teu contingut com a element de pestanya.

Podeu crear una instància de pestanya amb el constructor, per exemple:

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

Mètode	Descripció
`dispose`	Destrueix la pestanya d'un element.
`getInstance`	Mètode estàtic que us permet obtenir la instància de la pestanya associada a un element DOM, podeu utilitzar-lo així: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Mètode estàtic que retorna una instància de pestanya associada a un element DOM o en crea una de nova en cas que no s'hagi inicialitzat. Podeu utilitzar-lo així: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selecciona la pestanya donada i mostra el seu panell associat. Qualsevol altra pestanya que s'hagi seleccionat anteriorment es desactiva i el seu panell associat s'amaga. Torna a la persona que truca abans que s'hagi mostrat realment el panell de pestanyes (és a dir, abans `shown.bs.tab`que es produeixi l'esdeveniment).

Esdeveniments

Quan es mostra una pestanya nova, els esdeveniments es desencadenen en l'ordre següent:

hide.bs.tab(a la pestanya activa actual)
show.bs.tab(a la pestanya per mostrar)
hidden.bs.tab(a la pestanya activa anterior, la mateixa que per a l' hide.bs.tabesdeveniment)
shown.bs.tab(a la pestanya recentment activa que s'acaba de mostrar, la mateixa que per a l' show.bs.tabesdeveniment)

Si no hi havia cap pestanya activa, els esdeveniments hide.bs.tabi hidden.bs.tabno s'activaran.

Tipus d'esdeveniment	Descripció
`hide.bs.tab`	Aquest esdeveniment s'activa quan s'ha de mostrar una pestanya nova (i, per tant, s'ha d'amagar la pestanya activa anterior). Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa actual i la nova pestanya que s'activarà aviat, respectivament.
`hidden.bs.tab`	Aquest esdeveniment s'activa després que es mostri una pestanya nova (i, per tant, s'amaga la pestanya activa anterior). Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa anterior i la nova pestanya activa, respectivament.
`show.bs.tab`	Aquest esdeveniment s'activa a la pestanya mostra, però abans que s'hagi mostrat la nova pestanya. Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.
`shown.bs.tab`	Aquest esdeveniment s'activa a la mostra de pestanyes després que s'hagi mostrat una pestanya. Utilitzeu `event.target`i `event.relatedTarget`per orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament.

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