in English

Sąrašo grupė

Sąrašų grupės yra lankstus ir galingas komponentas, skirtas rodyti turinio seriją. Modifikuokite ir išplėskite juos, kad palaikytumėte beveik bet kokį turinį.

Šiame puslapyje

Pagrindinis pavyzdys

Paprasčiausia sąrašų grupė yra netvarkingas sąrašas su sąrašo elementais ir tinkamomis klasėmis. Kurkite jį naudodami toliau pateiktas parinktis arba, jei reikia, naudodami savo CSS.

Daiktas
Antras elementas
Trečias daiktas
Ketvirtas elementas
Ir penktą

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

Aktyvūs elementai

Pridėti .activeprie a .list-group-item, kad nurodytumėte dabartinį aktyvų pasirinkimą.

Aktyvus elementas
A second item
A third item
A fourth item
And a fifth one

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

Išjungti elementai

Pridėkite .disabledprie a .list-group-item, kad jis atrodytų išjungtas. Atminkite, kad kai kuriems elementams .disabledtaip pat reikės tinkinto „JavaScript“, kad būtų visiškai išjungti jų paspaudimų įvykiai (pvz., nuorodos).

Išjungtas daiktas
A second item
A third item
A fourth item
And a fifth one

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

Nuorodos ir mygtukai

Naudokite <a>s arba <button>s, kad sukurtumėte veiksmingus sąrašo grupės elementus su užvedimo žymekliu, išjungta ir aktyvia būsena, pridėdami .list-group-item-action. Atskiriame šias pseudoklases, kad sąrašų grupės, sudarytos iš neinteraktyvių elementų (pvz., <li>s arba <div>s), nesuteiktų paspaudimų ar bakstelėjimo galimybių.

Įsitikinkite, kad čia nenaudokite standartinių .btnklasių .

Dabartinis nuorodos elementas Antras nuorodos elementas Trečias nuorodos elementas Ketvirtasis nuorodos elementas Išjungtas nuorodos elementas

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

Naudodami <button>s taip pat galite naudoti disabledatributą, o ne .disabledklasę. Deja, <a>jis nepalaiko neįgaliojo atributo.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Nuplaukite

Pridėti .list-group-flush, kad pašalintumėte kai kurias kraštines ir suapvalintus kampus, kad sąrašo grupės elementai būtų pateikti nuo krašto iki krašto pirminiame konteineryje (pvz., kortelėse).

Daiktas
Antras elementas
Trečias daiktas
Ketvirtas elementas
Ir penktą

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

Sunumeruoti

Pridėkite .list-group-numberedmodifikatoriaus klasę (ir pasirinktinai naudokite <ol>elementą), kad pasirinktumėte sunumeruotus sąrašo grupės elementus. Skaičiai generuojami naudojant CSS (priešingai nei <ol>numatytasis naršyklės stilius), kad būtų geriau išdėstyti sąrašo grupės elementai ir būtų galima geriau tinkinti.

Skaičiai generuojami naudojant counter-reset, <ol>o tada stilizuojami ir pateikiami ::beforepseudoelementu <li>su counter-incrementir content.

Sąrašo elementas
Sąrašo elementas
Sąrašo elementas

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

Tai puikiai veikia ir su tinkintu turiniu.

Paantraštė
Sąrašo elemento turinys
14
Paantraštė
Sąrašo elemento turinys
14
Paantraštė
Sąrašo elemento turinys
14

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Horizontaliai

Pridėti .list-group-horizontal, kad pakeistumėte sąrašo grupės elementų išdėstymą iš vertikalaus į horizontalų visuose lūžio taškuose. Arba pasirinkite interaktyvų variantą .list-group-horizontal-{sm|md|lg|xl|xxl}, kad sąrašo grupė būtų horizontali, pradedant nuo tos pertraukos taško min-width. Šiuo metu horizontalių sąrašų grupės negali būti derinamos su įprastų sąrašų grupėmis.

ProTip: Norite vienodo pločio sąrašo elementų grupavimo horizontaliai? Pridėti .flex-fillprie kiekvieno sąrašo grupės elemento.

Daiktas
Antras elementas
Trečias daiktas

Daiktas
Antras elementas
Trečias daiktas

Daiktas
Antras elementas
Trečias daiktas

Daiktas
Antras elementas
Trečias daiktas

Daiktas
Antras elementas
Trečias daiktas

Daiktas
Antras elementas
Trečias daiktas

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

Kontekstinės klasės

Naudokite kontekstines klases, kad sudarytumėte stilių sąrašo elementus, turinčius būseną ir spalvą.

Paprastas numatytasis sąrašo grupės elementas
Paprastas pirminio sąrašo grupės elementas
Paprastas antrinio sąrašo grupės elementas
Paprastas sėkmės sąrašo grupės elementas
Paprastas pavojų sąrašo grupės elementas
Paprastas įspėjimų sąrašo grupės elementas
Paprastas informacijos sąrašo grupės elementas
Paprastas šviesos sąrašo grupės elementas
Paprastas tamsaus sąrašo grupės elementas

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

Kontekstinės klasės taip pat veikia su .list-group-item-action. Atkreipkite dėmesį į tai, kad čia pridedami užvedimo stiliai, kurių ankstesniame pavyzdyje nėra. Taip pat remiama .activevalstybė; pritaikykite jį norėdami nurodyti aktyvų pasirinkimą kontekstinio sąrašo grupės elemente.

Paprastas numatytasis sąrašo grupės elementas Paprastas pirminio sąrašo grupės elementas Paprastas antrinio sąrašo grupės elementas Paprastas sėkmės sąrašo grupės elementas Paprastas pavojų sąrašo grupės elementas Paprastas įspėjimų sąrašo grupės elementas Paprastas informacijos sąrašo grupės elementas Paprastas šviesos sąrašo grupės elementas Paprastas tamsaus sąrašo grupės elementas

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

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .visually-hiddenklasėje.

Su ženkleliais

Pridėkite ženklelių prie bet kurio sąrašo grupės elemento, kad parodytumėte neskaitytų skaičių, veiklą ir daugiau, naudodami kai kurias priemones .

Sąrašo elementas14
Antras sąrašo elementas2
Trečias sąrašo elementas1

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

Pasirinktinis turinys

Naudodami „ flexbox “ priemones, pridėkite beveik bet kokį HTML, net ir susietose sąrašų grupėse, kaip nurodyta toliau .

Sąrašo grupės elemento antraštė

prieš 3 dienas

Tam tikras rezervuotos vietos turinys pastraipoje.

Ir šiek tiek smulkaus šrifto.

Sąrašo grupės elemento antraštė

prieš 3 dienas

Tam tikras rezervuotos vietos turinys pastraipoje.

Ir šiek tiek nutildyto mažo šrifto.

Sąrašo grupės elemento antraštė

prieš 3 dienas

Tam tikras rezervuotos vietos turinys pastraipoje.

Ir šiek tiek nutildyto mažo šrifto.

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

Žymės langeliai ir radijo imtuvai

Įdėkite „Bootstrap“ žymimuosius laukelius ir radijas į sąrašo grupės elementus ir, jei reikia, tinkinkite. Galite juos naudoti be <label>s, bet nepamirškite įtraukti aria-labelatributo ir pritaikymo neįgaliesiems reikšmės.

Pirmas žymės langelis
Antrasis žymės langelis
Trečias žymės langelis
Ketvirtasis langelis
Penktasis žymimasis langelis

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

Ir jei norite <label>, kad jis būtų .list-group-itemskirtas didelėms paveiktoms sritims, galite tai padaryti.

Pirmas žymės langelis Antrasis žymės langelis Trečias žymės langelis Ketvirtasis langelis Penktasis žymimasis langelis

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

Sass

Kintamieji

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

Mišiniai

Naudojamas kartu su s kontekstinių variantų klasėms$theme-colors generuoti ..list-group-item

@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;
      }
    }
  }
}

Kilpa

Ciklas, generuojantis modifikatorių klases su 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);
}

JavaScript elgesys

Naudokite skirtuko „JavaScript“ papildinį (įtraukite jį atskirai arba per sudarytą bootstrap.jsfailą), kad išplėstumėte sąrašo grupę ir sukurtumėte vietinio turinio skirtukų sritis.

Namai Profilis Žinutės Nustatymai

Tam tikras rezervuotos vietos turinys pastraipoje, susijusioje su „Pagrindinis“. Ir dar šiek tiek turinio, kuris čia naudojamas tik šiam skirtuko skydeliui užpildyti ir užpildyti. Gamindami čia turėtumėte daugiau tikro turinio. Ir ne tik tekstas. Tai gali būti bet kas, tikrai. Tekstas, vaizdai, formos.

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>

Duomenų atributų naudojimas

Galite suaktyvinti sąrašo grupės naršymą neįrašydami jokio „JavaScript“, tiesiog nurodydami data-bs-toggle="list"elementą arba ant jo. Naudokite šiuos duomenų atributus .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>

Per JavaScript

Įgalinti skirtukų sąrašo elementą naudojant „JavaScript“ (kiekvieną sąrašo elementą reikia suaktyvinti atskirai):

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

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

Galite suaktyvinti atskirą sąrašo elementą keliais būdais:

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

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Išblukimo efektas

Jei norite, kad skirtukų skydelis išnyktų, pridėkite .fadeprie kiekvieno .tab-pane. Pirmojo skirtuko srityje taip pat turi būti .showmatomas pradinis turinys.

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

Metodai

constructor

Suaktyvina sąrašo elemento elementą ir turinio konteinerį. Skirtuko lape turi būti a data-bs-targetarba hrefDOM sudėtinio rodinio mazgas.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

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

  firstTab.show()
</script>

Rodyti

Parenka nurodytą sąrašo elementą ir parodo su juo susijusią sritį. Bet koks kitas sąrašo elementas, kuris buvo anksčiau pasirinktas, bus nepažymėtas ir su juo susijusi sritis paslėpta. Grįžta į skambinantįjį, kol skirtuko sritis iš tikrųjų nebuvo parodyta (pavyzdžiui, prieš shown.bs.tabįvykį).

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

  tab.show()

disponuoti

Sunaikina elemento skirtuką.

getInstance

Statinis metodas, leidžiantis gauti skirtuko egzempliorių, susietą su DOM elementu

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

getOrCreateInstance

Statinis metodas, leidžiantis gauti skirtuko egzempliorių, susietą su DOM elementu, arba sukurti naują, jei jis nebuvo inicijuotas

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

Renginiai

Kai rodomas naujas skirtukas, įvykiai suaktyvinami tokia tvarka:

hide.bs.tab(dabartiniame aktyviame skirtuke)
show.bs.tab(skirtuke, kurį reikia rodyti)
hidden.bs.tab(ankstesniame aktyviame skirtuke tas pats, kaip ir hide.bs.tabįvykio)
shown.bs.tab(naujai suaktyvintame, ką tik parodytame skirtuke, tas pats kaip ir show.bs.tabįvykio)

Jei joks skirtukas dar nebuvo aktyvus, hide.bs.tabir hidden.bs.tabįvykiai nebus suaktyvinti.

Renginio tipas	apibūdinimas
`show.bs.tab`	Šis įvykis suaktyvinamas rodant skirtuką, bet anksčiau nei rodomas naujas skirtukas. Naudokite `event.target`ir `event.relatedTarget`, kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra).
`shown.bs.tab`	Šis įvykis suaktyvinamas rodant skirtuką, kai rodomas skirtukas. Naudokite `event.target`ir `event.relatedTarget`, kad nukreiptumėte atitinkamai į aktyvų skirtuką ir ankstesnį aktyvų skirtuką (jei yra).
`hide.bs.tab`	Šis įvykis suaktyvinamas, kai turi būti rodomas naujas skirtukas (taigi, ankstesnis aktyvus skirtukas turi būti paslėptas). Naudokite `event.target`ir `event.relatedTarget`, kad nukreiptumėte atitinkamai į dabartinį aktyvų skirtuką ir į naują, kuris netrukus bus aktyvus.
`hidden.bs.tab`	Šis įvykis suaktyvinamas, kai parodomas naujas skirtukas (taigi ankstesnis aktyvus skirtukas yra paslėptas). Naudokite `event.target`ir `event.relatedTarget`, kad nukreiptumėte atitinkamai į ankstesnį aktyvų ir naują aktyvų skirtuką.

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