Seznam skupine

Skupine seznamov so prilagodljiva in zmogljiva komponenta za prikaz niza vsebin. Spremenite in razširite jih tako, da podpirajo skoraj vsako vsebino znotraj.

Na tej strani

Osnovni primer

Najosnovnejša skupina seznamov je neurejen seznam s postavkami seznama in ustreznimi razredi. Nadgradite ga z možnostmi, ki sledijo, ali po potrebi s svojim lastnim CSS.

Stvar
Drugi predmet
Tretji predmet
Četrta postavka
In še peti

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>

Aktivni predmeti

Dodajte .activek a .list-group-item, da označite trenutno aktivno izbiro.

Aktiven predmet
Drugi predmet
Tretji predmet
Četrta postavka
In še peti

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>

Onemogočeni predmeti

Dodajte .disabledv a .list-group-item, da bo videti onemogočeno. Upoštevajte, da .disabledbodo nekateri elementi z zahtevali tudi JavaScript po meri, da v celoti onemogočijo dogodke klikov (npr. povezave).

Onemogočen element
Drugi predmet
Tretji predmet
Četrta postavka
In še peti

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>

Povezave in gumbi

Uporabite <a>s ali <button>s za ustvarjanje uporabnih elementov skupine seznamov s stanjem lebdenja, onemogočenega in aktivnega, tako da dodate.list-group-item-action . Te psevdorazrede ločimo, da zagotovimo, da skupine seznamov, sestavljene iz neinteraktivnih elementov (kot <li>je s ali <div>s), ne nudijo možnosti klika ali dotika.

Pazite, da tukaj ne uporabljate standardnih .btnrazredov .

Trenutni element povezave Druga povezava Tretja povezava Četrta povezava Onemogočen element povezave

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>

Z <button>s lahko uporabite tudi disabledatribut namesto .disabledrazreda. Na žalost <a>s ne podpira atributa disabled.

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>

Izperite

Dodajte .list-group-flush, da odstranite nekatere obrobe in zaobljene vogale za upodabljanje elementov skupine seznama od roba do roba v nadrejenem vsebniku (npr. kartice).

Stvar
Drugi predmet
Tretji predmet
Četrta postavka
In še peti

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>

Oštevilčeno

Dodajte .list-group-numberedmodifikatorski razred (in po želji uporabite <ol>element), da omogočite oštevilčene elemente skupine seznamov. Številke so ustvarjene s pomočjo CSS (v nasprotju <ol>s slogom privzetega brskalnika) za boljšo umestitev znotraj elementov skupine seznamov in omogočanje boljšega prilagajanja.

Številke generira counter-resetna <ol>, nato pa jih oblikuje in postavi s ::beforepsevdoelementom na <li>z counter-incrementin content.

Element seznama
Element seznama
Element seznama

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>

Odlično delujejo tudi z vsebino po meri.

Podnaslov
Vsebina za element seznama
14
Podnaslov
Vsebina za element seznama
14
Podnaslov
Vsebina za element seznama
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>

Vodoravno

Dodaj .list-group-horizontal, če želite spremeniti postavitev elementov skupine seznamov iz navpične v vodoravno na vseh prelomnih točkah. Druga možnost je, da izberete odzivno različico .list-group-horizontal-{sm|md|lg|xl|xxl}, da bo skupina seznamov vodoravna, začenši na tej prelomni točki min-width. Skupin horizontalnih seznamov trenutno ni mogoče kombinirati s skupinami seznamov za izpiranje.

Strokovni nasvet: želite enako široke elemente skupine seznamov, ko so vodoravni? Dodajte .flex-fillvsakemu elementu skupine seznama.

Stvar
Drugi predmet
Tretji predmet

Stvar
Drugi predmet
Tretji predmet

Stvar
Drugi predmet
Tretji predmet

Stvar
Drugi predmet
Tretji predmet

Stvar
Drugi predmet
Tretji predmet

Stvar
Drugi predmet
Tretji predmet

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>

Kontekstualni razredi

Uporabite kontekstualne razrede za oblikovanje elementov seznama z ozadjem in barvo, ki spremlja stanje.

Preprost privzeti element skupine seznama
Preprost element primarne skupine seznama
Preprost sekundarni element skupine seznama
Enostaven element skupine na seznamu uspehov
Preprost element skupine nevarnosti
Enostaven element skupine opozorilnih seznamov
Enostaven element skupine informacijskega seznama
Enostaven lahek seznam skupine elementov
Preprost element skupine temnega seznama

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>

Kontekstualni razredi delujejo tudi z .list-group-item-action. Upoštevajte dodatek slogov lebdenja, ki tukaj niso prisotni v prejšnjem primeru. Podprta je tudi .activedržava; uporabite za označevanje aktivnega izbora na elementu kontekstualne skupine seznama.

Preprost privzeti element skupine seznama Preprost element primarne skupine seznama Preprost sekundarni element skupine seznama Enostaven element skupine na seznamu uspehov Preprost element skupine nevarnosti Enostaven element skupine opozorilnih seznamov Enostaven element skupine informacijskega seznama Enostaven lahek seznam skupine elementov Preprost element skupine temnega seznama

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>

Prenos pomena za podporne tehnologije

Uporaba barve za dodajanje pomena zagotavlja le vizualno indikacijo, ki ne bo posredovana uporabnikom podpornih tehnologij – kot so bralniki zaslona. Zagotovite, da so informacije, označene z barvo, očitne iz same vsebine (npr. vidno besedilo) ali pa so vključene z alternativnimi sredstvi, kot je dodatno besedilo, skrito z .visually-hiddenrazredom.

Z značkami

Dodajte značke kateremu koli elementu skupine na seznamu, da prikažete število neprebranih, dejavnost in drugo s pomočjo nekaterih pripomočkov .

Element seznama14
Drugi element seznama2
Tretji element seznama1

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>

Vsebina po meri

Dodajte skoraj kateri koli HTML znotraj, tudi za skupine povezanih seznamov, kot je ta spodaj, s pomočjo pripomočkov flexbox .

Naslov elementa skupine seznama

pred 3 dnevi

Nekaj nadomestne vsebine v odstavku.

In nekaj drobnega tiska.

Naslov elementa skupine seznama

pred 3 dnevi

Nekaj nadomestne vsebine v odstavku.

In nekaj zamolklega drobnega tiska.

Naslov elementa skupine seznama

pred 3 dnevi

Nekaj nadomestne vsebine v odstavku.

In nekaj zamolklega drobnega tiska.

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>

Potrditvena polja in radijski sprejemniki

Postavite potrditvena polja in radijske postaje Bootstrap v elemente skupine seznamov in jih po potrebi prilagodite. Lahko jih uporabite brez <label>s, vendar ne pozabite vključiti aria-labelatributa in vrednosti za dostopnost.

Prvo potrditveno polje
Drugo potrditveno polje
Tretje potrditveno polje

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>

Prvi radio
Drugi radio
Tretji 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>

Uporabite lahko .stretched-linkna <label>s, da omogočite klikanje celotnega elementa skupine seznama.

Prvo potrditveno polje
Drugo potrditveno polje
Tretje potrditveno polje

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

Spremenljivke

Dodano v v5.2.0

Kot del Bootstrapovega razvijajočega se pristopa spremenljivk CSS skupine seznamov zdaj uporabljajo lokalne spremenljivke CSS .list-groupza izboljšano prilagajanje v realnem času. Vrednosti za spremenljivke CSS so nastavljene prek Sass, tako da je še vedno podprto tudi prilagajanje Sass.

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

Sass spremenljivke

$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

Uporablja se v kombinaciji z $theme-colorsza ustvarjanje razredov kontekstualnih različic za .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;
      }
    }
  }
}

Zanka

Zanka, ki generira modifikatorske razrede z list-group-item-variant()mixinom.

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

obnašanje JavaScripta

Uporabite vtičnik JavaScript za zavihke – vključite ga posamično ali prek prevedene bootstrap.jsdatoteke – da razširite našo skupino seznamov in ustvarite podokna lokalne vsebine z zavihki.

domov Profil Sporočila nastavitve

Nekaj nadomestne vsebine v odstavku, ki se nanaša na »Domov«. In še nekaj vsebine, ki se tukaj uporablja samo za izpolnitev in zapolnitev te plošče z zavihki. V produkciji bi imeli tukaj očitno več prave vsebine. In ne samo besedilo. Lahko bi bilo karkoli, res. Besedilo, slike, obrazci.

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>

Uporaba podatkovnih atributov

Navigacijo po skupinah seznamov lahko aktivirate brez pisanja JavaScripta tako, da preprosto določite data-bs-toggle="list"ali na elementu. Uporabite te atribute podatkov na .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>

Prek JavaScripta

Omogoči element seznama, ki ga je mogoče zavihkati, prek JavaScripta (vsak element seznama je treba aktivirati posebej):

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

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

Posamezen element seznama lahko aktivirate na več načinov:

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

Učinek bledenja

.fadeČe želite, da podokno z zavihki zbledi, vsakemu dodajte .tab-pane. V prvem podoknu z zavihki mora biti .showvidna tudi začetna vsebina.

<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

Asinhrone metode in prehodi

Vse metode API so asinhrone in začnejo prehod . K klicatelju se vrnejo takoj, ko se prehod začne, vendar preden se konča . Poleg tega bo prezrt klic metode prehodne komponente .

Za več informacij si oglejte našo dokumentacijo JavaScript .

Aktivira vašo vsebino kot element zavihka.

Primerek zavihka lahko ustvarite s konstruktorjem, na primer:

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

Metoda	Opis
`dispose`	Uniči zavihek elementa.
`getInstance`	Statično metodo, ki vam omogoča pridobitev primerka zavihka, povezanega z elementom DOM, lahko uporabite takole: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statična metoda, ki vrne primerek zavihka, povezanega z elementom DOM, ali ustvari novega, če ni bil inicializiran. Uporabite ga lahko takole: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Izbere dani zavihek in prikaže povezano podokno. Kateri koli drug zavihek, ki je bil prej izbran, postane neizbran in njegovo povezano podokno je skrito. Vrne se klicatelju, preden je podokno z zavihki dejansko prikazano (tj. preden `shown.bs.tab`pride do dogodka).

Dogodki

Pri prikazu novega zavihka se dogodki sprožijo v naslednjem vrstnem redu:

hide.bs.tab(na trenutno aktivnem zavihku)
show.bs.tab(na zavihku za prikaz)
hidden.bs.tab(na prejšnjem aktivnem zavihku, enak kot za hide.bs.tabdogodek)
shown.bs.tab(na novoaktivnem pravkar prikazanem zavihku, isti kot za show.bs.tabdogodek)

Če noben zavihek še ni bil aktiven, se dogodki hide.bs.tabin hidden.bs.tabne bodo sprožili.

Vrsta dogodka	Opis
`hide.bs.tab`	Ta dogodek se sproži, ko je treba prikazati nov zavihek (in tako naj bi bil prejšnji aktivni zavihek skrit). Uporabite `event.target`in `event.relatedTarget`za ciljanje na trenutni aktivni zavihek oziroma novi zavihek, ki bo kmalu aktiven.
`hidden.bs.tab`	Ta dogodek se sproži, ko je prikazan nov zavihek (in tako je prejšnji aktivni zavihek skrit). Uporabite `event.target`in `event.relatedTarget`za ciljanje prejšnjega aktivnega zavihka oziroma novega aktivnega zavihka.
`show.bs.tab`	Ta dogodek se sproži ob prikazu zavihka, vendar preden je prikazan nov zavihek. Uporabite `event.target`in `event.relatedTarget`za ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo).
`shown.bs.tab`	Ta dogodek se sproži na prikazu zavihkov po prikazu zavihka. Uporabite `event.target`in `event.relatedTarget`za ciljanje na aktivni zavihek oziroma prejšnji aktivni zavihek (če je na voljo).

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