Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
in English

Listacsoport

A listacsoportok rugalmas és hatékony komponensek egy sor tartalom megjelenítéséhez. Módosítsa és bővítse őket, hogy szinte bármilyen tartalmat támogassanak.

Ezen az oldalon

Alap példa

A legalapvetőbb listacsoport egy rendezetlen lista listaelemekkel és a megfelelő osztályokkal. Építsen rá a következő opciókkal, vagy szükség szerint saját CSS-jével.

  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Egy negyedik tétel
  • És egy ötödik
<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>

Aktív elemek

Hozzáadás .activeaz a .list-group-item-hoz az aktuális aktív kijelölés jelzéséhez.

  • Aktív elem
  • Egy második tétel
  • Egy harmadik tétel
  • Egy negyedik tétel
  • És egy ötödik
<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>

Letiltott elemek

Adja hozzá .disabledaz a .list-group-item-hoz, hogy letiltottnak tűnjön . Vegye figyelembe, hogy egyes elemekhez .disabledegyéni JavaScriptre is szükség van a kattintási események (pl. linkek) teljes letiltásához.

  • Letiltott elem
  • Egy második tétel
  • Egy harmadik tétel
  • Egy negyedik tétel
  • És egy ötödik
<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>

Használja az <a>s vagy <button>s billentyűket, hogy hozzon létre használható listaelemeket lebegtető, letiltott és aktív állapotú hozzáadásával .list-group-item-action. Elválasztjuk ezeket a pszeudoosztályokat annak biztosítására, hogy a nem interaktív elemekből (például <li>s vagy <div>s) álló listacsoportok ne biztosítsanak kattintási vagy koppintási lehetőséget.

Ügyeljen arra, hogy itt ne használja a szabványos .btnosztályokat .

Az aktuális linkelem Egy második linkelem Egy harmadik linkelem Negyedik linkelem Letiltott linkelem 
<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>

Az <button>s segítségével az attribútumot is használhatja az osztály disabledhelyett . .disabledSajnos <a>s nem támogatja a letiltott attribútumot.

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

Öblítés

Hozzáadás .list-group-flushnéhány szegély és lekerekített sarkok eltávolításához, hogy a listacsoport elemeit egy szülőtárolóban (pl. kártyák) éltől szélig jelenítse meg.

  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Egy negyedik tétel
  • És egy ötödik
<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>

Számozott

Adja hozzá a .list-group-numberedmódosító osztályt (és opcionálisan használjon egy <ol>elemet) a számozott listaelemek felvételéhez. A számok CSS-en keresztül generálódnak (szemben az <ol>alapértelmezett böngészőstílussal), hogy jobb elhelyezést biztosítsanak a listacsoport elemeiben, és lehetővé tegyék a jobb testreszabást.

A számokat counter-reseta <ol>, majd a stílus generálja, és egy ::beforepszeudoelemmel helyezi el a <li>-val counter-incrementés -vel content.

  1. Egy listaelem
  2. Egy listaelem
  3. Egy listaelem
<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>

Ezek remekül működnek egyedi tartalommal is.

  1. Alcím
    A listaelem tartalma
    14
  2. Alcím
    A listaelem tartalma
    14
  3. Alcím
    A listaelem tartalma
    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>

Vízszintes

A Hozzáadás .list-group-horizontalgombbal módosíthatja a listacsoport elemeinek elrendezését függőlegesről vízszintesre az összes törésponton. Alternatív megoldásként válasszon egy adaptív változatot .list-group-horizontal-{sm|md|lg|xl|xxl}, hogy egy listacsoportot vízszintessé tegye az adott törésponttól kezdve min-width. Jelenleg a vízszintes listacsoportok nem kombinálhatók öblítési listacsoportokkal.

ProTip: Egyenlő szélességű listaelemeket szeretne vízszintesen? Adjon .flex-fillhozzá minden listacsoport elemet.

  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
  • Elem
  • Egy második tétel
  • Egy harmadik tétel
<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>

Kontextuális osztályok

Használjon kontextus szerinti osztályokat állapotjelző háttérrel és színnel rendelkező listaelemek stílusozásához.

  • Egy egyszerű alapértelmezett listacsoport elem
  • Egy egyszerű elsődleges listacsoport elem
  • Egy egyszerű másodlagos listacsoport elem
  • Egy egyszerű sikerlista-csoport elem
  • Egy egyszerű veszélylista-csoport elem
  • Egy egyszerű figyelmeztető listaelem
  • Egy egyszerű információs listaelem
  • Egy egyszerű könnyű lista csoport elem
  • Egy egyszerű sötét lista elem
<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>

A kontextuális osztályok a -val is működnek .list-group-item-action. Vegye figyelembe a lebegtetési stílusok hozzáadását, amelyek az előző példában nem szerepeltek. Az állam is támogatott .active; Alkalmazza egy aktív kijelölés jelzésére egy kontextus szerinti listacsoport elemen.

Egy egyszerű alapértelmezett listacsoport elem Egy egyszerű elsődleges listacsoport elem Egy egyszerű másodlagos listacsoport elem Egy egyszerű sikerlista-csoport elem Egy egyszerű veszélylista-csoport elem Egy egyszerű figyelmeztető listaelem Egy egyszerű információs listaelem Egy egyszerű könnyű lista csoport elem Egy egyszerű sötét lista elem 
<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>
Jelentést adni a kisegítő technológiáknak

A szín használata a jelentés hozzáadására csak vizuális jelzést ad, amelyet nem közvetítenek a kisegítő technológiák – például a képernyőolvasók – felhasználói számára. Győződjön meg arról, hogy a színnel jelölt információ vagy magából a tartalomból (pl. a látható szövegből) nyilvánvaló, vagy alternatív módon, például az .visually-hiddenosztályba rejtett kiegészítő szöveggel szerepel.

Jelvényekkel

Adjon hozzá jelvényeket a listacsoport bármely eleméhez az olvasatlan számok, tevékenységek és egyebek megjelenítéséhez bizonyos segédprogramok segítségével .

  • Egy listaelem14
  • Egy második listaelem2
  • Egy harmadik listaelem1 
<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>

Egyedi tartalom

Szinte bármilyen HTML-kódot hozzáadhat a flexbox segédprogramok segítségével, még a linkelt listacsoportokhoz is, például az alábbihoz .

Listacsoport elem fejléce
3 napja

Néhány helyőrző tartalom egy bekezdésben.

És kis betűkkel.
Listacsoport elem fejléce
3 napja

Néhány helyőrző tartalom egy bekezdésben.

És némi tompa kisbetűs.
Listacsoport elem fejléce
3 napja

Néhány helyőrző tartalom egy bekezdésben.

És némi tompa kisbetűs. 
<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>

Jelölőnégyzetek és rádiók

Helyezze a Bootstrap jelölőnégyzeteit és rádióit a listacsoport elemei közé, és szükség szerint szabja testre. Használhatja őket <label>s nélkül is, de ne felejtsen el megadni egy aria-labelattribútumot és értéket az akadálymentesítés érdekében.

  • Első jelölőnégyzet
  • Második jelölőnégyzet
  • Harmadik jelölőnégyzet
  • Negyedik jelölőnégyzet
  • Ötödik jelölőnégyzet
<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>

És ha azt szeretné <label>, hogy .list-group-itema nagy slágerterületeket használja, akkor ezt is megteheti.

<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

Változók

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Mixins

A -val együtt használatos az s kontextuális változatosztályainak$theme-colors generálására ..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;
      }
    }
  }
}

Hurok

Cikk , amely a módosító osztályokat generálja a list-group-item-variant()mixinnel.

// 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 viselkedés

Használja a lap JavaScript beépülő modulját (egyenként vagy a lefordított bootstrap.jsfájlon keresztül) a listacsoport kiterjesztéséhez helyi tartalom lapozható ablaktábláinak létrehozásához.

Néhány helyőrző tartalom a „Kezdőlap”-hoz kapcsolódó bekezdésben. És még néhány tartalom, amelyet itt csak a lappanel kitöltésére és kitöltésére használunk. A gyártásban itt nyilván több valódi tartalom lenne. És nem csak szöveges. Tényleg bármi lehet. Szöveg, képek, űrlapok.

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>

Adatattribútumok használata

A listacsoportos navigációt JavaScript írása nélkül is aktiválhatja, ha egyszerűen megad data-bs-toggle="list"egy elemet vagy egy elemen. Használja ezeket az adatattribútumokat itt: .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>

JavaScripten keresztül

Lapozható listaelem engedélyezése JavaScripten keresztül (minden listaelemet külön kell aktiválni):

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

Az egyes listaelemeket többféleképpen is aktiválhatja:

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

Fade hatás

A lapok paneljének elhalványulásához adja hozzá .fademindegyikhez a .tab-pane. Az első lappanelnek is .showláthatóvá kell tennie a kezdeti tartalmat.

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

Mód

constructor

Aktivál egy listaelem elemet és tartalomtárolót. A lapon egy data-bs-targetvagy egy tárolócsomópontot kell hrefcélozni a DOM-ban.

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

előadás

Kijelöli az adott listaelemet, és megjeleníti a hozzá tartozó panelt. A korábban kiválasztott egyéb listaelemek kijelölése megszűnik, és a hozzá tartozó panel elrejtődik. A lappanel tényleges megjelenítése előtt visszatér a hívóhoz (például az shown.bs.tabesemény bekövetkezte előtt).

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

  tab.show()

eldob

Megsemmisíti egy elem lapját.

getInstance

Statikus módszer, amely lehetővé teszi a DOM-elemhez társított lappéldány lekérését

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

getOrCreateInstance

Statikus módszer, amely lehetővé teszi a tabulátorpéldány DOM-elemhez társítását, vagy új létrehozását, ha nem inicializálták

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

Események

Új lap megjelenítésekor az események a következő sorrendben aktiválódnak:

  1. hide.bs.tab(az aktuális aktív lapon)
  2. show.bs.tab(a megjelenítendő lapon)
  3. hidden.bs.tab(az előző aktív lapon ugyanaz, mint az hide.bs.tabeseménynél)
  4. shown.bs.tab(az újonnan aktív, most megjelenő lapon ugyanaz, mint az show.bs.tabeseménynél)

Ha még nem volt aktív lap, a hide.bs.tabés hidden.bs.tabesemények nem aktiválódnak.

Esemény típus Leírás
show.bs.tab Ez az esemény a lap megjelenítésekor aktiválódik, de az új lap megjelenítése előtt. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
shown.bs.tab Ez az esemény lapmegjelenítéskor aktiválódik, miután egy lap megjelenik. Használja a event.targetés event.relatedTargetaz aktív lapot, illetve az előző aktív lapot (ha elérhető) célozza meg.
hide.bs.tab Ez az esemény akkor aktiválódik, amikor új lapot kell megjeleníteni (és így az előző aktív lapot el kell rejteni). Használja a event.targetés event.relatedTargetaz aktuális aktív lapot, illetve a hamarosan aktívvá váló új lapot.
hidden.bs.tab Ez az esemény egy új lap megjelenítése után aktiválódik (és így az előző aktív lap el van rejtve). Használja a event.targetés event.relatedTargetaz előző aktív lapot, illetve az új aktív lapot. 
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
  })
}