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ą

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>

Aktyvūs elementai

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

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

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>

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
Antras elementas
Trečias daiktas
Ketvirtas elementas
Ir penktą

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>

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

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>

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

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>

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ą

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

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>

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.

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>

Ž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

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>

Pirmasis radijas
Antrasis radijas
Trečias radijas

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>

Galite naudoti .stretched-links <label>, kad visą sąrašo grupės elementą būtų galima spustelėti.

Pirmas žymės langelis
Antrasis žymės langelis
Trečias žymės langelis

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

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, sąrašų grupės dabar naudoja vietinius CSS kintamuosius, .list-groupkad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

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

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

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

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

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

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

Asinchroniniai metodai ir perėjimai

Visi API metodai yra asinchroniniai ir pradeda perėjimą . Jie grįžta pas skambinantįjį, kai tik prasideda perėjimas, bet jam nepasibaigus . Be to, pereinamojo komponento metodo iškvietimas bus ignoruojamas .

Daugiau informacijos rasite mūsų JavaScript dokumentacijoje .

Suaktyvina turinį kaip skirtuko elementą.

Galite sukurti skirtuko egzempliorių naudodami konstruktorių, pavyzdžiui:

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

Metodas	apibūdinimas
`dispose`	Sunaikina elemento skirtuką.
`getInstance`	Statinis metodas, leidžiantis gauti skirtuko egzempliorių, susietą su DOM elementu, galite jį naudoti taip: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statinis metodas, kuris grąžina skirtuko egzempliorių, susietą su DOM elementu, arba sukuria naują, jei jis nebuvo inicijuotas. Galite naudoti taip: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Parenka nurodytą skirtuką ir parodo su juo susijusią sritį. Bet kuris kitas anksčiau pasirinktas skirtukas bus nepažymėtas, o su juo susijusi sritis paslėpta. Grįžta į skambinantįjį, kol skirtuko sritis iš tikrųjų nebuvo parodyta (ty prieš `shown.bs.tab`įvykį).

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
`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ą.
`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).

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