in English

Lys groep

Lysgroepe is 'n buigsame en kragtige komponent om 'n reeks inhoud te vertoon. Verander en brei dit uit om omtrent enige inhoud binne te ondersteun.

Op hierdie bladsy

Basiese voorbeeld

Die mees basiese lysgroep is 'n ongeordende lys met lysitems en die regte klasse. Bou daarop met die opsies wat volg, of met jou eie CSS soos nodig.

N item
'n Tweede item
'n Derde item
'n Vierde item
En 'n vyfde een

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

Aktiewe items

Voeg .activeby 'n .list-group-itemom die huidige aktiewe keuse aan te dui.

'n Aktiewe item
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Gedeaktiveerde items

Voeg .disabledby 'n .list-group-itemom dit gedeaktiveer te laat lyk . Let daarop dat sommige elemente met .disabledook gepasmaakte JavaScript sal vereis om hul klikgebeurtenisse (bv. skakels) ten volle te deaktiveer.

'n Gestremde item
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Skakels en knoppies

Gebruik <a>s of <button>s om uitvoerbare lys groepitems te skep met sweef, gedeaktiveerde en aktiewe toestande deur by te voeg .list-group-item-action. Ons skei hierdie pseudo-klasse om te verseker dat lysgroepe wat van nie-interaktiewe elemente (soos <li>e of <div>s) gemaak is, nie 'n klik of tik bekostigbaarheid bied nie.

Maak seker dat jy nie die standaard .btnklasse hier gebruik nie .

Die huidige skakelitem 'n Tweede skakelitem 'n Derde skakelitem 'n Vierde skakelitem 'n Gedeaktiveerde skakelitem

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

Met <button>s kan jy ook gebruik maak van die disabledkenmerk in plaas van die .disabledklas. Ongelukkig <a>ondersteun s nie die gestremde kenmerk nie.

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

Spoel

Voeg .list-group-flushby om sommige grense en afgeronde hoeke te verwyder om lysgroepitems rand-tot-rand in 'n ouerhouer (bv. kaarte) weer te gee.

N item
'n Tweede item
'n Derde item
'n Vierde item
En 'n vyfde een

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

Genommer

Voeg die .list-group-numberedwysigerklas by (en gebruik opsioneel 'n <ol>element) om in te teken op genommerde lysgroepitems. Getalle word gegenereer via CSS (in teenstelling met 'n <ol>se verstekblaaierstilering) vir beter plasing binne lysgroepitems en om beter aanpassing moontlik te maak.

Getalle word gegenereer deur counter-resetop die <ol>, en dan gestileer en geplaas met 'n ::beforepseudo-element op die <li>met counter-incrementen 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>

Dit werk ook uitstekend met persoonlike inhoud.

Subopskrif
Cras justo odio
14
Subopskrif
Cras justo odio
14
Subopskrif
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>

Horisontaal

Voeg .list-group-horizontalby om die uitleg van lysgroepitems van vertikaal na horisontaal oor alle breekpunte te verander. Alternatiewelik, kies 'n responsiewe variant .list-group-horizontal-{sm|md|lg|xl|xxl}om 'n lysgroep horisontaal te maak wat by daardie breekpunt begin min-width. Tans kan horisontale lysgroepe nie met spoellysgroepe gekombineer word nie.

ProTip: Wil jy groepitems met gelyke breedte lys hê wanneer dit horisontaal is? Voeg .flex-fillby elke lys groep item.

N item
'n Tweede item
'n Derde item

N item
'n Tweede item
'n Derde item

N item
'n Tweede item
'n Derde item

N item
'n Tweede item
'n Derde item

N item
'n Tweede item
'n Derde item

N item
'n Tweede item
'n Derde item

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

Kontekstuele klasse

Gebruik kontekstuele klasse om lysitems met 'n statige agtergrond en kleur te styl.

'n Eenvoudige verstek lys groep item
'n Eenvoudige primêre lys groep item
'n Eenvoudige sekondêre lys groep item
'n Eenvoudige sukseslysgroepitem
'n Eenvoudige gevaarlysgroepitem
'N Eenvoudige waarskuwing lys groep item
'n Eenvoudige inligting lys groep item
'n Eenvoudige ligte lys groep item
'N Eenvoudige donker lys groep item

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

Kontekstuele klasse werk ook met .list-group-item-action. Let op die byvoeging van die sweefstyle wat hier nie in die vorige voorbeeld voorkom nie. Die staat word ook ondersteun .active; pas dit toe om 'n aktiewe seleksie op 'n kontekstuele lysgroepitem aan te dui.

'n Eenvoudige verstek lys groep item 'n Eenvoudige primêre lys groep item 'n Eenvoudige sekondêre lys groep item 'n Eenvoudige sukseslysgroepitem 'n Eenvoudige gevaarlysgroepitem 'N Eenvoudige waarskuwing lys groep item 'n Eenvoudige inligting lys groep item 'n Eenvoudige ligte lys groep item 'N Eenvoudige donker lys groep item

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

Dra betekenis aan ondersteunende tegnologieë oor

Die gebruik van kleur om betekenis toe te voeg, verskaf slegs 'n visuele aanduiding, wat nie aan gebruikers van ondersteunende tegnologieë – soos skermlesers – oorgedra sal word nie. Maak seker dat inligting wat deur die kleur aangedui word óf duidelik uit die inhoud self (bv. die sigbare teks), óf op alternatiewe wyse ingesluit word, soos bykomende teks wat by die .visually-hiddenklas versteek is.

Met kentekens

Voeg kentekens by enige lysgroepitem om ongeleesde tellings, aktiwiteit en meer te wys met behulp van sommige nutsprogramme .

'n Lysitem14
'n Tweede lysitem2
'n Derde lysitem1

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

Pasgemaakte inhoud

Voeg byna enige HTML binne, selfs vir gekoppelde lysgroepe soos die een hieronder, met behulp van flexbox-nutsprogramme .

Lys groepitem opskrif

3 dae gelede

Sommige plekhouer-inhoud in 'n paragraaf.

En 'n klein skrif.

Lys groepitem opskrif

3 dae gelede

Sommige plekhouer-inhoud in 'n paragraaf.

En 'n gedempte kleinskrif.

Lys groepitem opskrif

3 dae gelede

Sommige plekhouer-inhoud in 'n paragraaf.

En 'n gedempte kleinskrif.

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

Merkblokkies en radio's

Plaas Bootstrap se merkblokkies en radio's binne lys groepitems en pasmaak soos nodig. Jy kan hulle sonder <label>s gebruik, maar onthou asseblief om 'n aria-labelkenmerk en waarde vir toeganklikheid in te sluit.

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

En as jy <label>s wil hê as die .list-group-itemvir groot trefareas, kan jy dit ook doen.

<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

Veranderlikes

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

Mengsels

Gebruik in kombinasie met $theme-colorsom die kontekstuele variantklasse vir .list-group-items te genereer.

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

Lus

Lus wat die wysigerklasse genereer met die 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 gedrag

Gebruik die oortjie JavaScript-inprop—sluit dit individueel of deur die saamgestelde bootstrap.jslêer in—om ons lysgroep uit te brei om oortjies van plaaslike inhoud te skep.

Tuis Profiel Boodskappe Instellings

Sommige plekhouer-inhoud in 'n paragraaf wat met "Tuis" verband hou. En nog 'n bietjie inhoud, wat hier net gebruik word om hierdie oortjiepaneel uit te vul en te vul. In produksie sou jy natuurlik meer werklike inhoud hier hê. En nie net teks nie. Dit kan enigiets wees, regtig. Teks, beelde, vorms.

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>

Die gebruik van data-kenmerke

Jy kan 'n lysgroepnavigasie aktiveer sonder om enige JavaScript te skryf deur bloot 'n element te spesifiseer data-bs-toggle="list"of op 'n element. Gebruik hierdie data-kenmerke op .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>

Via JavaScript

Aktiveer tabbare lysitem via JavaScript (elke lysitem moet individueel geaktiveer word):

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

Jy kan individuele lysitem op verskeie maniere aktiveer:

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

Vervaag effek

Om oortjiespaneel te laat vervaag, voeg .fadeby elke .tab-pane. Die eerste oortjie-venster moet ook .showdie aanvanklike inhoud sigbaar maak.

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

Metodes

constructor

Aktiveer 'n lysitemelement en inhoudhouer. Tab moet óf 'n data-bs-targetóf 'n hrefteiken 'n houer nodus in die DOM hê.

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

Wys

Kies die gegewe lysitem en wys die gepaardgaande paneel. Enige ander lysitem wat voorheen gekies is, word ongeselekteer en die gepaardgaande paneel word versteek. Keer terug na die beller voordat die oortjie-venster werklik gewys is (byvoorbeeld voor die shown.bs.tabgebeurtenis plaasvind).

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

  tab.show()

wegdoen

Vernietig 'n element se oortjie.

getInstance

Statiese metode waarmee u die oortjie-instansie kan kry wat met 'n DOM-element geassosieer word

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

getOrCreateInstance

Statiese metode wat jou toelaat om die oortjie-instansie te kry wat met 'n DOM-element geassosieer word, of 'n nuwe een te skep ingeval dit nie geïnisialiseer is nie

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

Gebeurtenisse

Wanneer 'n nuwe oortjie gewys word, begin die gebeure in die volgende volgorde:

hide.bs.tab(op die huidige aktiewe oortjie)
show.bs.tab(op die om te wys-oortjie)
hidden.bs.tab(op die vorige aktiewe oortjie, dieselfde een as vir die hide.bs.tabgeleentheid)
shown.bs.tab(op die nuut-aktiewe oortjie wat pas gewys is, dieselfde een as vir die show.bs.tabgeleentheid)

As geen oortjie reeds aktief was nie, sal die hide.bs.taben hidden.bs.tabgebeure nie geaktiveer word nie.

Soort gebeurtenis	Beskrywing
`show.bs.tab`	Hierdie gebeurtenis begin op oortjievertoning, maar voordat die nuwe oortjie gewys is. Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
`shown.bs.tab`	Hierdie gebeurtenis begin op oortjievertoning nadat 'n oortjie gewys is. Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die aktiewe oortjie en die vorige aktiewe oortjie (indien beskikbaar) te teiken.
`hide.bs.tab`	Hierdie gebeurtenis begin wanneer 'n nuwe oortjie gewys moet word (en dus moet die vorige aktiewe oortjie versteek word). Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die huidige aktiewe oortjie en die nuwe wat binnekort aktief sal wees, te teiken.
`hidden.bs.tab`	Hierdie gebeurtenis begin nadat 'n nuwe oortjie gewys is (en dus word die vorige aktiewe oortjie versteek). Gebruik `event.target`en `event.relatedTarget`om onderskeidelik die vorige aktiewe oortjie en die nuwe aktiewe oortjie te teiken.

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