in English

Listaa ryhmä

Luetteloryhmät ovat joustava ja tehokas komponentti sisältösarjan näyttämiseen. Muokkaa ja laajenna niitä tukemaan lähes mitä tahansa sisältöä.

Tällä sivulla

Perusesimerkki

Kaikkein peruslistaryhmä on järjestämätön lista, jossa on luettelokohteet ja oikeat luokat. Rakenna sitä seuraavilla vaihtoehdoilla tai tarvittaessa omalla CSS:lläsi.

Esine
Toinen kohde
Kolmas kohde
Neljäs kohta
Ja viidennen

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

Aktiiviset kohteet

Lisää .activekohtaan a .list-group-itemosoittaaksesi nykyisen aktiivisen valinnan.

Aktiivinen kohde
Toinen kohde
Kolmas kohde
Neljäs kohta
Ja viidennen

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

Käytöstä poistetut kohteet

Lisää .disabledkohtaan a .list-group-item, jotta se näyttää pois käytöstä. Huomaa, että jotkin elementit .disabledvaativat myös mukautetun JavaScriptin napsautustapahtumat (esim. linkit) poistamiseksi kokonaan käytöstä.

Estetty kohde
Toinen kohde
Kolmas kohde
Neljäs kohta
Ja viidennen

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

Linkkejä ja painikkeita

Käytä <a>s- tai <button>s-näppäimiä luodaksesi toimivia luetteloryhmän kohteita, joissa on hiiri, pois käytöstä ja aktiivinen tila lisäämällä .list-group-item-action. Erottelemme nämä näennäisluokat varmistaaksemme, että ei-interaktiivisista elementeistä (kuten <li>s tai <div>s) koostuvat luetteloryhmät eivät tarjoa napsautus- tai napautushintaa.

Älä käytä vakioluokkia .btntäällä .

Nykyinen linkkikohde Toinen linkkikohde Kolmas linkkikohde Neljäs linkkikohde Poistettu linkkikohde

<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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

S: llä <button>voit myös käyttää disabledattribuuttia .disabledluokan sijaan. Valitettavasti <a>s eivät tue attribuuttia pois käytöstä.

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

Huuhtele

Lisäämällä .list-group-flushvoit poistaa joitakin reunuksia ja pyöristettyjä kulmia, jotta luetteloryhmän kohteet hahmonnetaan reunasta reunaan ylätason säilössä (esim. kortit).

Esine
Toinen kohde
Kolmas kohde
Neljäs kohta
Ja viidennen

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

Numeroitu

Lisää .list-group-numberedmuokkausluokka (ja käytä valinnaisesti <ol>elementtiä) valitaksesi numeroidut luetteloryhmän kohteet. Numerot luodaan CSS: <ol>n kautta (toisin kuin selaimen oletustyyli), jotta ne sijoittuvat paremmin luetteloryhmän kohteisiin ja mahdollistavat paremman mukauttamisen.

Numerot luodaan counter-reset, <ol>ja sitten tyyli ja sijoitetaan ::beforepseudo-elementillä <li>kanssa counter-incrementja content.

Cras justo odio
Cras justo odio
Cras justo odio

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Nämä toimivat hyvin myös mukautetun sisällön kanssa.

Alaotsikko
Cras justo odio
14
Alaotsikko
Cras justo odio
14
Alaotsikko
Cras justo odio
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>
      Cras justo odio
    </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>
      Cras justo odio
    </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>
      Cras justo odio
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Vaakasuora

Lisää .list-group-horizontalmuuttaaksesi luetteloryhmän kohteiden asettelua pystysuorasta vaakasuuntaiseksi kaikissa keskeytyspisteissä. Vaihtoehtoisesti voit valita responsiivisen muunnelman .list-group-horizontal-{sm|md|lg|xl|xxl}tehdäksesi luetteloryhmästä vaakasuuntaisen kyseisestä keskeytyskohdasta alkaen min-width. Tällä hetkellä vaakasuuntaisia luetteloryhmiä ei voi yhdistää huuhteluluetteloryhmiin.

ProTip: Haluatko yhtä leveitä luettelokohteita vaakasuorassa? Lisää .flex-filljokaiseen luetteloryhmän kohde.

Esine
Toinen kohde
Kolmas kohde

Esine
Toinen kohde
Kolmas kohde

Esine
Toinen kohde
Kolmas kohde

Esine
Toinen kohde
Kolmas kohde

Esine
Toinen kohde
Kolmas kohde

Esine
Toinen kohde
Kolmas kohde

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

Kontekstuaaliset luokat

Käytä kontekstuaalisia luokkia muotoillaksesi luettelokohteita, joissa on tilallinen tausta ja väri.

Yksinkertainen oletusluetteloryhmäkohde
Yksinkertainen ensisijaisen luettelon ryhmäkohde
Yksinkertainen toissijainen luetteloryhmäkohde
Yksinkertainen menestysluettelon ryhmäkohde
Yksinkertainen vaaraluettelon kohde
Yksinkertainen varoitusluettelon ryhmäkohde
Yksinkertainen tietoluetteloryhmäkohde
Yksinkertainen kevyt luetteloryhmäkohde
Yksinkertainen pimeän listan ryhmäkohde

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

Kontekstuaaliset luokat toimivat myös .list-group-item-action. Huomaa, että tähän on lisätty hover-tyylejä, joita ei ollut edellisessä esimerkissä. Myös .activevaltio tukee; Käytä sitä ilmaisemaan aktiivisen valinnan kontekstuaalisen luetteloryhmän alkiossa.

Yksinkertainen oletusluetteloryhmäkohde Yksinkertainen ensisijaisen luettelon ryhmäkohde Yksinkertainen toissijainen luetteloryhmäkohde Yksinkertainen menestysluettelon ryhmäkohde Yksinkertainen vaaraluettelon kohde Yksinkertainen varoitusluettelon ryhmäkohde Yksinkertainen tietoluetteloryhmäkohde Yksinkertainen kevyt luetteloryhmäkohde Yksinkertainen pimeän listan ryhmäkohde

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

Tarkoituksen välittäminen avustaville tekniikoille

Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .visually-hiddenluokan mukana piilotettu lisäteksti.

Merkkien kanssa

Lisää merkkejä mihin tahansa luetteloryhmän kohteeseen näyttääksesi lukemattomat määrät, toiminnan ja paljon muuta joidenkin apuohjelmien avulla .

Luettelon kohde14
Toinen listan kohta2
Kolmas listakohta1

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

Mukautettu sisältö

Lisää flexbox-apuohjelmien avulla lähes mikä tahansa HTML-koodi, jopa linkitetyissä luetteloryhmissä, kuten alla .

Luetteloryhmän kohteen otsikko

3 päivää sitten

Jotain paikkamerkkisisältöä kappaleessa.

Ja pientä tekstiä.

Luetteloryhmän kohteen otsikko

3 päivää sitten

Jotain paikkamerkkisisältöä kappaleessa.

Ja vähän vaimennettua pientä tekstiä.

Luetteloryhmän kohteen otsikko

3 päivää sitten

Jotain paikkamerkkisisältöä kappaleessa.

Ja vähän vaimennettua pientä tekstiä.

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

Valintaruudut ja radiot

Sijoita Bootstrapin valintaruudut ja radiot luetteloryhmän kohteisiin ja mukauta niitä tarpeen mukaan. Voit käyttää niitä ilman <label>s-kirjainta, mutta muista lisätä aria-labelattribuutti ja saavutettavuuden arvo.

Ensimmäinen valintaruutu
Toinen valintaruutu
Kolmas valintaruutu
Neljäs valintaruutu
Viides valintaruutu

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

Ja jos haluat <label>s:n .list-group-itemsuurille osumaalueille, voit tehdä sen myös.

Ensimmäinen valintaruutu Toinen valintaruutu Kolmas valintaruutu Neljäs valintaruutu Viides valintaruutu

<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

Muuttujat

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

Seokset

Käytetään yhdessä kanssa $theme-colorsluomaan kontekstuaaliset muunnelmaluokat s :lle .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;
      }
    }
  }
}

Silmukka

Silmukka, joka luo modifiointiluokat list-group-item-variant()mixinin kanssa.

// 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-käyttäytyminen

Käytä välilehden JavaScript-laajennusta – sisällytä se yksittäin tai käännetyn bootstrap.jstiedoston kautta – laajentaaksesi luetteloryhmäämme luomaan välilehtiruutuja paikallisesta sisällöstä.

Koti Profiili Viestit asetukset

Jotkin paikkamerkkisisällöt kappaleessa, joka liittyy "Etusivulle". Ja muuta sisältöä, jota käytetään tässä vain välilehtipaneelin täyttämiseen ja täyttämiseen. Tuotannossa sinulla olisi ilmeisesti enemmän todellista sisältöä täällä. Eikä vain tekstiä. Se voi olla oikeastaan mitä tahansa. Tekstiä, kuvia, lomakkeita.

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>

Tietoattribuuttien käyttäminen

Voit aktivoida luetteloryhmän navigoinnin kirjoittamatta JavaScriptiä yksinkertaisesti määrittämällä data-bs-toggle="list"tai elementin päälle. Käytä näitä tietomääritteitä .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>

JavaScriptin kautta

Ota välilehtiluettelo käyttöön JavaScriptin kautta (jokainen luettelokohde on aktivoitava erikseen):

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

Voit aktivoida yksittäisen luettelokohteen useilla tavoilla:

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

Häivytysefekti

Voit saada välilehdet-paneelin hämärtymään lisäämällä .fadekuhunkin .tab-pane. Ensimmäisen välilehtiruudun on myös .showtehtävä alkuperäinen sisältö näkyväksi.

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

menetelmät

constructor

Aktivoi luettelokohdeelementin ja sisältösäiliön. Välilehdellä tulee olla joko a data-bs-targettai hrefkohdistava säilön solmu DOM:ssa.

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

näytä

Valitsee tietyn luettelokohteen ja näyttää siihen liittyvän ruudun. Kaikki muut aiemmin valitut luettelokohteet jäävät valitsemattomiksi ja niihin liittyvä ruutu piilotetaan. Palaa soittajalle ennen kuin välilehtiruutu on todella näytetty (esimerkiksi ennen shown.bs.tabtapahtumaa).

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

  tab.show()

hävittää

Tuhoaa elementin välilehden.

getInstance

Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän välilehden esiintymän

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

getOrCreateInstance

Staattinen menetelmä, jonka avulla voit saada välilehden esiintymän, joka liittyy DOM-elementtiin, tai luoda uuden, jos sitä ei alustettu

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

Tapahtumat

Kun uusi välilehti näytetään, tapahtumat käynnistyvät seuraavassa järjestyksessä:

hide.bs.tab(nykyisellä aktiivisella välilehdellä)
show.bs.tab(näytettävissä välilehdellä)
hidden.bs.tab(edellisellä aktiivisella välilehdellä, sama kuin hide.bs.tabtapahtumalla)
shown.bs.tab(äskettäin aktiivisella juuri näytetyllä välilehdellä, sama kuin show.bs.tabtapahtumassa)

Jos mikään välilehti ei ollut jo aktiivinen, hide.bs.tabja hidden.bs.tabtapahtumia ei käynnistetä.

Tapahtumatyyppi	Kuvaus
`show.bs.tab`	Tämä tapahtuma käynnistyy välilehtien näyttämisen yhteydessä, mutta ennen kuin uusi välilehti on näytetty. Käytä `event.target`ja `event.relatedTarget`kohdistaaksesi aktiiviseen välilehteen ja edelliseen aktiiviseen välilehteen (jos saatavilla).
`shown.bs.tab`	Tämä tapahtuma käynnistyy välilehden näyttämisen yhteydessä, kun välilehti on näytetty. Käytä `event.target`ja `event.relatedTarget`kohdistaaksesi aktiiviseen välilehteen ja edelliseen aktiiviseen välilehteen (jos saatavilla).
`hide.bs.tab`	Tämä tapahtuma käynnistyy, kun uusi välilehti näytetään (ja siten edellinen aktiivinen välilehti piilotetaan). Käytä `event.target`ja `event.relatedTarget`kohdistaaksesi nykyiseen aktiiviseen välilehteen ja uuteen pian aktiiviseen välilehteen.
`hidden.bs.tab`	Tämä tapahtuma käynnistyy, kun uusi välilehti näytetään (ja siten edellinen aktiivinen välilehti piilotetaan). Käytä `event.target`ja `event.relatedTarget`kohdistaaksesi edelliseen aktiiviseen välilehteen ja uuteen aktiiviseen välilehteen.

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