in English

List groep

Listgroepen binne in fleksibele en krêftige komponint foar it werjaan fan in searje ynhâld. Feroarje en útwreidzje se om sawat elke ynhâld binnen te stypjen.

Op dizze side

Basis foarbyld

De meast basale listgroep is in net-oardere list mei listitems en de juste klassen. Bou derop mei de folgjende opsjes, of mei jo eigen CSS as nedich.

In item
In twadde item
In tredde item
In fjirde item
En in fyfde

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

Aktive items

Taheakje .activeoan in .list-group-itemom de aktive seleksje oan te jaan.

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

Utskeakele items

Taheakje .disabledoan in .list-group-itemfoar in meitsje it ferskine útskeakele. Tink derom dat guon eleminten mei .disabledek oanpast JavaSkript nedich binne om har klikeveneminten (bygelyks keppelings) folslein út te skeakeljen.

In útskeakele 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>

Links en knoppen

Brûk <a>s of <button>s om aksjebere listgroepitems te meitsjen mei hover, útskeakele en aktive steaten troch ta te foegjen .list-group-item-action. Wy skiede dizze pseudo-klassen om te soargjen dat listgroepen makke fan net-ynteraktive eleminten (lykas <li>s of <div>s) gjin klik of tik leverje.

Wês wis dat jo de standertklassen .btnhjir net brûke .

It hjoeddeiske keppeling item In twadde link item In tredde link item In fjirde link item In útskeakele keppeling item

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

Mei <button>s kinne jo ek gebrûk meitsje fan it disabledattribút ynstee fan de .disabledklasse. Spitigernôch, <a>s net stypje de útskeakele attribút.

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

Flush

Foegje .list-group-flushta om guon grinzen en rûne hoeken te ferwiderjen om listgroepitems râne-oan-râne yn in âlderkontener (bgl. kaarten) te meitsjen.

In item
In twadde item
In tredde item
In fjirde item
En in fyfde

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

Nûmere

Foegje de .list-group-numberedmodifier-klasse ta (en brûk opsjoneel in <ol>elemint) om te kiezen foar nûmere listgroepitems. Sifers wurde generearre fia CSS (yn tsjinstelling ta a<ol> s standert browser styling) foar bettere pleatsing binnen list groep items en te tastean foar bettere maatwurk.

Sifers wurde oanmakke troch counter-resetop de <ol>, en dan styled en pleatst mei in ::beforepseudo-elemint op de <li>mei counter-incrementen content.

In list item
In list item
In list item

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

Dizze wurkje ek geweldich mei oanpaste ynhâld.

Subheading
Ynhâld foar list item
14
Subheading
Ynhâld foar list item
14
Subheading
Ynhâld foar list item
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>

Horizontaal

Foegje .list-group-horizontalta om de yndieling fan listgroepitems te feroarjen fan fertikaal nei horizontaal oer alle brekpunten. As alternatyf, kies in responsive fariant .list-group-horizontal-{sm|md|lg|xl|xxl}om in listgroep horizontaal te meitsjen begjinnend by dat brekpunt min-width. Op it stuit kinne horizontale listgroepen net kombineare wurde mei flushlistgroepen.

ProTip: Wolle jo groepitems mei lykweardige breedte as jo horizontaal binne? Taheakje .flex-filloan elk list groep item.

In item
In twadde item
In tredde item

In item
In twadde item
In tredde item

In item
In twadde item
In tredde item

In item
In twadde item
In tredde item

In item
In twadde item
In tredde item

In item
In twadde item
In tredde 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 klassen

Brûk kontekstuele klassen om list items te stylearjen mei in steatlike eftergrûn en kleur.

In ienfâldich standert list groep item
In ienfâldich primêre list groep item
In ienfâldich sekondêr listgroepitem
In ienfâldige súkseslist groep item
In ienfâldich groep item foar gefaarlist
In ienfâldige warskôgingslist groep item
In ienfâldich ynfo list groep item
In ienfâldich ljocht list groep item
In ienfâldich donkere list 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 klassen wurkje ek mei .list-group-item-action. Tink derom dat de tafoeging fan de hoverstilen hjir net oanwêzich is yn it foarige foarbyld. Ek stipe wurdt de .activesteat; tapasse it om in aktive seleksje oan te jaan op in kontekstuele listgroepitem.

In ienfâldich standert list groep item In ienfâldich primêre list groep item In ienfâldich sekondêr listgroepitem In ienfâldige súkseslist groep item In ienfâldich groep item foar gefaarlist In ienfâldige warskôgingslist groep item In ienfâldich ynfo list groep item In ienfâldich ljocht list groep item In ienfâldich donkere list 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>

Betsjutting oerbringe oan assistinte technologyen

It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .visually-hiddenklasse.

Mei badges

Foegje badges ta oan elk listgroepitem om net-lêzen tellen, aktiviteit en mear te sjen mei help fan guon nutsbedriuwen .

In list item14
In twadde list item2
In tredde list item1

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

Oanpaste ynhâld

Foegje hast elke HTML ta binnen, sels foar keppele listgroepen lykas de hjirûnder, mei help fan flexbox-helpprogramma's .

List groep item heading

3 dagen lyn

Guon plakhâlder ynhâld yn in paragraaf.

En wat lytse printsjes.

List groep item heading

3 dagen lyn

Guon plakhâlder ynhâld yn in paragraaf.

En wat gedempte lytse letters.

List groep item heading

3 dagen lyn

Guon plakhâlder ynhâld yn in paragraaf.

En wat gedempte lytse letters.

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

Checkboxes en radio's

Plak Bootstrap's karfakjes en radio's binnen listgroep items en oanpasse as nedich. Jo kinne se brûke sûnder <label>s, mar tink om in aria-labelattribút en wearde foar tagonklikens op te nimmen.

<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 jo wolle <label>s as de .list-group-itemfoar grutte hit gebieten, do kinst dwaan dat, te.

<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

Fariabelen

$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

Brûkt yn kombinaasje mei om de kontekstuele fariantklassen foar s $theme-colorste generearjen ..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;
      }
    }
  }
}

Loop

Loop dy't generearret de modifier klassen mei de 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 gedrach

Brûk it ljepblêd JavaScript-plugin-ynklusyf it yndividueel as fia it kompilearre bootstrap.jsbestân-om ús listgroep út te wreidzjen om ljepblêden fan lokale ynhâld te meitsjen.

Thús Profyl Berjochten Ynstellings

Guon plakhâlder ynhâld yn in paragraaf oangeande "Thús". En wat mear ynhâld, brûkt hjir gewoan om dit ljepblêd út te foljen en te foljen. Yn produksje soene jo hjir fansels mear echte ynhâld hawwe. En net allinnich tekst. It kin fan alles wêze, echt. Tekst, bylden, formulieren.

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>

Gebrûk fan gegevensattributen

Jo kinne in listgroepnavigaasje aktivearje sûnder JavaScript te skriuwen troch gewoan oan te jaan data-bs-toggle="list"of op in elemint. Brûk dizze gegevens attributen 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>

Fia JavaScript

Skeakelje ljepperlist item yn fia JavaScript (elk listitem moat yndividueel aktivearre wurde):

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

Jo kinne yndividuele listitem op ferskate manieren aktivearje:

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 effekt

Om it ljepblêdpaniel te fade yn, foegje .fadeoan elk ta .tab-pane. It earste ljepblêd moat ek .showde earste ynhâld sichtber meitsje moatte.

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

Metoaden

constructor

Aktivearret in list item elemint en ynhâld container. De ljepper moat in data-bs-targetof in hrefrjochte op in kontenerknooppunt hawwe yn 'e DOM.

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

sjen litte

Selekteart it opjûne listitem en lit it byhearrende paniel sjen. Elk oar listitem dat earder selektearre is wurdt net selektearre en it byhearrende paniel wurdt ferburgen. Keart werom nei de beller foardat it ljepblêd wirklik werjûn is (bygelyks foardat it shown.bs.tabevenemint bart).

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

  tab.show()

disponearje

Fernielet in ljepper fan in elemint.

getInstance

Statyske metoade wêrmei jo de ljeppereksimplaar kinne krije ferbûn mei in DOM-elemint

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

getOrCreateInstance

Statyske metoade wêrmei jo de ljeppereksimplaar kinne krije dy't assosjeare is mei in DOM-elemint, of in nij oanmeitsje foar it gefal dat it net inisjalisearre is

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

Eveneminten

By it werjaan fan in nije ljepper, de barrens fjoer yn 'e folgjende folchoarder:

hide.bs.tab(op it aktive ljepblêd)
show.bs.tab(op it te sjen ljepblêd)
hidden.bs.tab(op 'e foarige aktive ljepper, deselde as foar it hide.bs.tabevenemint)
shown.bs.tab(op it krekt-aktive ljepblêd, deselde as foar it show.bs.tabevenemint)

As gjin ljepper wie al aktyf, de hide.bs.taben hidden.bs.tabeveneminten wurde net ûntslein.

Event type	Beskriuwing
`show.bs.tab`	Dit evenemint ûntspringt op ljeppershow, mar foardat de nije ljepper is werjûn. Brûk `event.target`en `event.relatedTarget`om respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
`shown.bs.tab`	Dit evenemint ûntspringt op ljepper sjen nei in ljepper is werjûn. Brûk `event.target`en `event.relatedTarget`om respektivelik de aktive ljepper en de foarige aktive ljepper (as beskikber) te rjochtsjen.
`hide.bs.tab`	Dit barren ûntspringt as in nije ljepper werjûn wurde moat (en dus moat de foarige aktive ljepper ferburgen wurde). Brûk `event.target`en `event.relatedTarget`om respektivelik de aktive ljepper te rjochtsjen en de nije ljepper dy't gau aktyf is.
`hidden.bs.tab`	Dit barren ûntspringt neidat in nije ljepper wurdt werjûn (en dus is de foarige aktive ljepper ferburgen). Brûk `event.target`en `event.relatedTarget`om respektivelik de foarige aktive ljepper en de nije aktive ljepper te rjochtsjen.

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