in English

Lista grupului

Grupurile de liste sunt o componentă flexibilă și puternică pentru afișarea unei serii de conținut. Modificați-le și extindeți-le pentru a sprijini aproape orice conținut din interior.

Pe aceasta pagina

Exemplu de bază

Cel mai elementar grup de liste este o listă neordonată cu elemente de listă și clasele adecvate. Construiți pe el cu opțiunile care urmează sau cu propriul dvs. CSS, după cum este necesar.

Un obiect
Un al doilea articol
Un al treilea articol
Un al patrulea articol
Și un al cincilea

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>

Elemente active

Adăugați .activela a .list-group-itempentru a indica selecția activă curentă.

Un articol activ
Un al doilea articol
Un al treilea articol
Un al patrulea articol
Și un al cincilea

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>

Articole dezactivate

Adăugați .disabledla a .list-group-itempentru ca acesta să pară dezactivat. Rețineți că unele elemente cu .disabledvor necesita, de asemenea, JavaScript personalizat pentru a dezactiva complet evenimentele de clic (de exemplu, linkuri).

Un articol dezactivat
Un al doilea articol
Un al treilea articol
Un al patrulea articol
Și un al cincilea

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>

Legături și butoane

Utilizați <a>s sau <button>s pentru a crea elemente de grup de listă acționabile cu stări de trecere, dezactivat și activ, adăugând .list-group-item-action. Separăm aceste pseudo-clase pentru a ne asigura că grupurile de liste formate din elemente neinteractive (cum ar fi <li>s sau <div>s) nu oferă un clic sau atingere.

Asigurați-vă că nu utilizați clasele standard.btn aici .

Elementul de link curent Un al doilea articol de legătură Un al treilea articol de legătură Un al patrulea articol de legătură Un articol de link dezactivat

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>

Cu <button>s, puteți folosi și disabledatributul în locul .disabledclasei. Din păcate, <a>s nu acceptă atributul dezactivat.

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>

Culoare

Adăugați .list-group-flushpentru a elimina unele margini și colțuri rotunjite pentru a reda elementele din grupul listei de la margine la margine într-un container părinte (de exemplu, carduri).

Un obiect
Un al doilea articol
Un al treilea articol
Un al patrulea articol
Și un al cincilea

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>

Numerotat

Adăugați .list-group-numberedclasa modificatoare (și opțional utilizați un <ol>element) pentru a opta pentru elementele grupului de listă numerotate. Numerele sunt generate prin CSS (spre deosebire de <ol>stilul implicit al browserului) pentru o mai bună plasare în elementele grupului de listă și pentru a permite o mai bună personalizare.

Numerele sunt generate de counter-resetpe <ol>, și apoi stilate și plasate cu un ::beforepseudo-element pe <li>cu counter-incrementși content.

Un articol din listă
Un articol din listă
Un articol din listă

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>

Acestea funcționează excelent și cu conținut personalizat.

Subtitlu
Conținut pentru elementul din listă
14
Subtitlu
Conținut pentru elementul din listă
14
Subtitlu
Conținut pentru elementul din listă
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>

Orizontală

Adăugați .list-group-horizontalpentru a modifica aspectul elementelor grupului de liste de la vertical la orizontal în toate punctele de întrerupere. Ca alternativă, alegeți o variantă receptivă .list-group-horizontal-{sm|md|lg|xl|xxl}pentru a face un grup de liste orizontal, începând de la punctul de întrerupere respectiv min-width. În prezent , grupurile de liste orizontale nu pot fi combinate cu grupurile de liste de culoare.

Sfat: doriți elemente de grup de listă cu lățime egală când sunt orizontale? Adăugați .flex-fillla fiecare element de grup din listă.

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

Un obiect
Un al doilea articol
Un al treilea articol

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>

Clasele contextuale

Utilizați clase contextuale pentru a stila elementele listei cu un fundal și o culoare cu stare.

Un element simplu de grup de listă implicit
Un element simplu de grup de listă primară
Un simplu element secundar de grup de listă
Un element simplu de grup din lista de succes
Un element simplu de grup din lista de pericole
Un element simplu de grup din lista de avertizare
Un element simplu de grup din lista de informații
Un simplu element de grup de listă luminoasă
Un simplu element de grup din lista întunecată

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>

Clasele contextuale funcționează și cu .list-group-item-action. Rețineți că adăugarea stilurilor de hover aici nu este prezentă în exemplul anterior. De asemenea, este sprijinit .activestatul; aplicați-l pentru a indica o selecție activă pe un element de grup de listă contextuală.

Un element simplu de grup de listă implicit Un element simplu de grup de listă primară Un simplu element secundar de grup de listă Un element simplu de grup din lista de succes Un element simplu de grup din lista de pericole Un element simplu de grup din lista de avertizare Un element simplu de grup din lista de informații Un simplu element de grup de listă luminoasă Un simplu element de grup din lista întunecată

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>

Transmiterea sensului tehnologiilor de asistență

Folosirea culorii pentru a adăuga sens oferă doar o indicație vizuală, care nu va fi transmisă utilizatorilor de tehnologii de asistență, cum ar fi cititoarele de ecran. Asigurați-vă că informațiile notate de culoare sunt fie evidente din conținutul în sine (de exemplu, textul vizibil), fie sunt incluse prin mijloace alternative, cum ar fi textul suplimentar ascuns cu .visually-hiddenclasa.

Cu insigne

Adăugați insigne la orice element din grupul de listă pentru a afișa numărătoarele necitite, activitatea și multe altele, cu ajutorul unor utilitare .

Un articol din listă14
Un al doilea articol din listă2
Un al treilea element din listă1

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>

Conținut personalizat

Adăugați aproape orice HTML în interior, chiar și pentru grupurile de liste legate, cum ar fi cel de mai jos, cu ajutorul utilitarelor flexbox .

Listează titlul articolului de grup

acum 3 zile

Un conținut de substituent dintr-un paragraf.

Și niște litere mici.

Listează titlul articolului de grup

acum 3 zile

Un conținut de substituent dintr-un paragraf.

Și niște litere mici dezactivate.

Listează titlul articolului de grup

acum 3 zile

Un conținut de substituent dintr-un paragraf.

Și niște litere mici dezactivate.

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>

Casete de selectare și radiouri

Plasați casetele de selectare și radiourile Bootstrap în elementele grupului de listă și personalizați după cum este necesar. Le puteți folosi fără <label>s, dar nu uitați să includeți un aria-labelatribut și o valoare pentru accesibilitate.

Prima casetă de selectare
A doua casetă de selectare
A treia casetă de selectare

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>

Primul radio
Al doilea radio
Al treilea 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>

Puteți folosi .stretched-linkon <label>s pentru a face clic pe întregul element al grupului din listă.

Prima casetă de selectare
A doua casetă de selectare
A treia casetă de selectare

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

Variabile

Adăugat în v5.2.0

Ca parte a abordării în evoluție a variabilelor CSS a Bootstrap, grupurile de liste folosesc acum variabile CSS locale activate .list-grouppentru personalizare îmbunătățită în timp real. Valorile pentru variabilele CSS sunt setate prin Sass, astfel încât personalizarea Sass este încă acceptată.

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

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

Mixine

Folosit în combinație cu $theme-colorspentru a genera clasele de variante contextuale pentru .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;
      }
    }
  }
}

Buclă

Buclă care generează clasele modificatoare cu list-group-item-variant()mixin-ul.

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

Comportamentul JavaScript

Utilizați pluginul JavaScript pentru filă - includeți-l individual sau prin bootstrap.jsfișierul compilat - pentru a extinde grupul nostru de listă pentru a crea panouri de conținut local cu tabele.

Acasă Profil Mesaje Setări

Un conținut de substituent într-un paragraf referitor la „Acasă”. Și încă ceva conținut, folosit aici doar pentru a completa și completa acest panou cu file. În producție, ați avea, evident, mai mult conținut real aici. Și nu doar text. Ar putea fi orice, într-adevăr. Text, imagini, formulare.

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>

Utilizarea atributelor de date

Puteți activa o navigare în grup de listă fără a scrie JavaScript, prin simpla specificare data-bs-toggle="list"sau pe un element. Utilizați aceste atribute de date pe .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>

Prin JavaScript

Activați elementul din listă cu tabele prin JavaScript (fiecare element din listă trebuie activat individual):

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

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

Puteți activa un element individual din listă în mai multe moduri:

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

Efect de estompare

Pentru a face ca panoul de file să dispară, adăugați .fadela fiecare .tab-pane. De asemenea, primul panou de file trebuie .showsă facă vizibil conținutul inițial.

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

Metode

Metode și tranziții asincrone

Toate metodele API sunt asincrone și încep o tranziție . Ei revin la apelant imediat ce tranziția este începută, dar înainte ca aceasta să se încheie . În plus, un apel de metodă pentru o componentă de tranziție va fi ignorat .

Consultați documentația noastră JavaScript pentru mai multe informații .

Activează conținutul dvs. ca element de filă.

Puteți crea o instanță de filă cu constructorul, de exemplu:

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

Metodă	Descriere
`dispose`	Distruge fila unui element.
`getInstance`	Metodă statică care vă permite să obțineți instanța file asociată cu un element DOM, o puteți utiliza astfel: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Metodă statică care returnează o instanță de tab asociată unui element DOM sau creează una nouă în cazul în care nu a fost inițializată. Îl poți folosi astfel: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selectează fila dată și arată panoul asociat. Orice altă filă care a fost selectată anterior devine neselectată, iar panoul asociat este ascuns. Revine la apelant înainte ca panoul de file să fie afișat efectiv (adică înainte de apariția `shown.bs.tab`evenimentului).

Evenimente

Când se afișează o filă nouă, evenimentele se declanșează în următoarea ordine:

hide.bs.tab(în fila activă curentă)
show.bs.tab(pe fila de afișat)
hidden.bs.tab(pe fila activă anterioară, aceeași ca pentru hide.bs.tabeveniment)
shown.bs.tab(în fila nou-activă tocmai afișată, aceeași ca și pentru show.bs.tabeveniment)

Dacă nicio filă nu era deja activă, atunci evenimentele hide.bs.tabși hidden.bs.tabnu vor fi declanșate.

Tip de eveniment	Descriere
`hide.bs.tab`	Acest eveniment se declanșează atunci când trebuie afișată o filă nouă (și astfel fila activă anterioară trebuie să fie ascunsă). Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă curentă și, respectiv, noua filă care va fi activă în curând.
`hidden.bs.tab`	Acest eveniment se declanșează după ce este afișată o nouă filă (și astfel fila activă anterioară este ascunsă). Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă anterioară și, respectiv, noua filă activă.
`show.bs.tab`	Acest eveniment se declanșează în afișarea filelor, dar înainte ca noua filă să fie afișată. Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).
`shown.bs.tab`	Acest eveniment se declanșează în afișarea filelor după ce a fost afișată o filă. Utilizați `event.target`și `event.relatedTarget`pentru a viza fila activă și, respectiv, fila activă anterioară (dacă este disponibilă).

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