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

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>

Aktiiviset kohteet

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

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

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>

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

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>

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

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>

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

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>

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

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>

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.

Luettelon kohde
Luettelon kohde
Luettelon kohde

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>

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

Alaotsikko
Luettelokohteen sisältö
14
Alaotsikko
Luettelokohteen sisältö
14
Alaotsikko
Luettelokohteen sisältö
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>

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

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>

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

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>

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

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>

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

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>

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

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>

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

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>

Ensimmäinen radio
Toinen radio
Kolmas 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>

Voit käyttää .stretched-links <label>-näppäintä tehdäksesi koko luetteloryhmän kohteen napsautettavaksi.

Ensimmäinen valintaruutu
Toinen valintaruutu
Kolmas valintaruutu

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

Muuttujat

Lisätty versioon 5.2.0

Osana Bootstrapin kehittyvää CSS-muuttujien lähestymistapaa luetteloryhmät käyttävät nyt paikallisia CSS-muuttujia .list-grouptehostaakseen reaaliaikaista räätälöintiä. CSS-muuttujien arvot asetetaan Sassin kautta, joten myös Sass-räätälöinti on edelleen tuettu.

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

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

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

Voit aktivoida yksittäisen luettelokohteen useilla tavoilla:

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

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

Asynkroniset menetelmät ja siirtymät

Kaikki API - menetelmät ovat asynkronisia ja aloittavat siirtymän . He palaavat soittajan luo heti siirtymisen alkaessa, mutta ennen sen päättymistä . Lisäksi siirtyvän komponentin menetelmäkutsu jätetään huomioimatta .

Katso lisätietoja JavaScript - dokumentaatiostamme .

Aktivoi sisältösi välilehtielementiksi.

Voit luoda välilehden esiintymän rakentajalla, esimerkiksi:

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

Menetelmä	Kuvaus
`dispose`	Tuhoaa elementin välilehden.
`getInstance`	Staattinen menetelmä, jonka avulla voit saada DOM-elementtiin liittyvän välilehden esiintymän, voit käyttää sitä seuraavasti: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Staattinen menetelmä, joka palauttaa DOM-elementtiin liitetyn välilehden esiintymän tai luo uuden, jos sitä ei ole alustettu. Voit käyttää sitä näin: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Valitsee välilehden ja näyttää siihen liittyvän ruudun. Kaikki muut aiemmin valitut välilehdet jäävät valitsemattomiksi ja niihin liittyvä ruutu piilotetaan. Palaa soittajalle ennen kuin välilehtiruutu on todella näytetty (eli ennen `shown.bs.tab`tapahtumaa).

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

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