Gå til hovedinnhold Hopp til dokumentnavigering
in English

Listegruppe

Listegrupper er en fleksibel og kraftig komponent for å vise en rekke innhold. Endre og utvide dem til å støtte omtrent alt innhold i dem.

På denne siden

Grunnleggende eksempel

Den mest grunnleggende listegruppen er en uordnet liste med listeelementer og de riktige klassene. Bygg videre på det med alternativene som følger, eller med din egen CSS etter behov.

  • En ting
  • Et annet element
  • Et tredje element
  • Et fjerde element
  • Og en femte
<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 elementer

Legg .activetil en .list-group-itemfor å angi gjeldende aktive valg.

  • Et aktivt element
  • 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>

Deaktiverte elementer

Legg .disabledtil en .list-group-itemfor å få den til å virke deaktivert. Merk at noen elementer med .disabledogså vil kreve tilpasset JavaScript for å deaktivere klikkhendelsene deres (f.eks. koblinger).

  • Et deaktivert element
  • 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>

Bruk <a>s eller <button>s for å lage handlingsbare listegruppeelementer med hover, deaktivert og aktive tilstander ved å legge til .list-group-item-action. Vi skiller disse pseudoklassene for å sikre at listegrupper laget av ikke-interaktive elementer (som <li>s eller <div>s) ikke gir et klikk eller trykk.

Pass på at du ikke bruker standardklassene .btnher .

Gjeldende lenkeelement Et annet lenkeelement Et tredje lenkeelement Et fjerde lenkeelement Et deaktivert koblingselement 
<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>

Med <button>s kan du også bruke disabledattributtet i stedet for .disabledklassen. Dessverre <a>støtter s ikke attributtet deaktivert.

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

Skyll

Legg .list-group-flushtil for å fjerne noen kanter og avrundede hjørner for å gjengi listegruppeelementer kant-til-kant i en overordnet beholder (f.eks. kort).

  • En ting
  • Et annet element
  • Et tredje element
  • Et fjerde element
  • Og en femte
<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>

Nummerert

Legg til .list-group-numberedmodifikatorklassen (og bruk eventuelt et <ol>element) for å velge nummererte listegruppeelementer. Tall genereres via CSS (i motsetning til en <ol>standard nettleserstil) for bedre plassering i listegruppeelementer og for bedre tilpasning.

Tall genereres av counter-resetpå <ol>, og deretter styles og plasseres med et ::beforepseudo-element på <li>med counter-incrementog content.

  1. Cras justo odio
  2. Cras justo odio
  3. 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>

Disse fungerer også utmerket med tilpasset innhold.

  1. Underoverskrift
    Cras justo odio
    14
  2. Underoverskrift
    Cras justo odio
    14
  3. Underoverskrift
    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>

Horisontal

Legg .list-group-horizontaltil for å endre oppsettet til listegruppeelementer fra vertikal til horisontal på tvers av alle bruddpunkter. Alternativt kan du velge en responsiv variant .list-group-horizontal-{sm|md|lg|xl|xxl}for å gjøre en listegruppe horisontal som starter ved det bruddpunktet min-width. Foreløpig kan horisontale listegrupper ikke kombineres med flushlistegrupper.

ProTip: Vil du ha lik breddelistegruppeelementer når de er horisontale? Legg .flex-filltil hvert listegruppeelement.

  • En ting
  • Et annet element
  • Et tredje element
  • En ting
  • Et annet element
  • Et tredje element
  • En ting
  • Et annet element
  • Et tredje element
  • En ting
  • Et annet element
  • Et tredje element
  • En ting
  • Et annet element
  • Et tredje element
  • En ting
  • Et annet element
  • Et tredje element
<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>

Kontekstuelle klasser

Bruk kontekstuelle klasser for å style listeelementer med en statisk bakgrunn og farge.

  • Et enkelt standard listegruppeelement
  • Et enkelt element i primærlistegruppen
  • Et enkelt sekundært listegruppeelement
  • Et enkelt gruppeelement for suksessliste
  • Et enkelt gruppeelement for fareliste
  • Et enkelt gruppeelement på en advarselsliste
  • En enkel informasjonslistegruppeelement
  • Et enkelt lyslistegruppeelement
  • Et enkelt gruppeelement på mørk liste
<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>

Kontekstuelle klasser jobber også med .list-group-item-action. Legg merke til tillegget av svevestilene her som ikke er til stede i forrige eksempel. Også støttet er .activestaten; bruk den for å indikere et aktivt valg på et kontekstuell listegruppeelement.

Et enkelt standard listegruppeelement Et enkelt element i primærlistegruppen Et enkelt sekundært listegruppeelement Et enkelt gruppeelement for suksessliste Et enkelt gruppeelement for fareliste Et enkelt gruppeelement på en advarselsliste En enkel informasjonslistegruppeelement Et enkelt lyslistegruppeelement Et enkelt gruppeelement på mørk liste 
<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>
Formidle mening til hjelpeteknologier

Å bruke farger for å legge til mening gir bare en visuell indikasjon, som ikke vil bli formidlet til brukere av hjelpeteknologier – for eksempel skjermlesere. Sørg for at informasjon angitt med fargen enten er åpenbar fra selve innholdet (f.eks. den synlige teksten), eller er inkludert på alternative måter, for eksempel ekstra tekst skjult i .visually-hiddenklassen.

Med merker

Legg til merker til et hvilket som helst listegruppeelement for å vise antall uleste, aktivitet og mer ved hjelp av noen verktøy .

  • Et listeelement14
  • Et annet listeelement2
  • Et tredje listeelement1 
<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>

Egendefinert innhold

Legg til nesten hvilken som helst HTML innenfor, selv for koblede listegrupper som den nedenfor, ved hjelp av flexbox-verktøy .

Listegruppeelementoverskrift
3 dager siden

Noe plassholderinnhold i et avsnitt.

Og litt liten skrift.
Listegruppeelementoverskrift
3 dager siden

Noe plassholderinnhold i et avsnitt.

Og litt dempet liten skrift.
Listegruppeelementoverskrift
3 dager siden

Noe plassholderinnhold i et avsnitt.

Og litt dempet liten skrift. 
<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>

Avmerkingsbokser og radioer

Plasser Bootstraps avmerkingsbokser og radioer i listegruppeelementer og tilpass etter behov. Du kan bruke dem uten <label>s, men husk å inkludere et aria-labelattributt og verdi for tilgjengelighet.

  • Første avmerkingsboks
  • Andre avmerkingsboks
  • Tredje avmerkingsboks
  • Fjerde avmerkingsboks
  • Femte avmerkingsboks
<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>

Og hvis du vil ha <label>s som .list-group-itemfor store treffområder, kan du også gjøre det.

<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

Variabler

$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

Brukes i kombinasjon med $theme-colorsfor å generere de kontekstuelle variantklassene for .list-group-items.

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

Løkke

Sløyfe som genererer modifikatorklassene med 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-adferd

Bruk JavaScript-plugin-fanen – inkluder den individuelt eller gjennom den kompilerte bootstrap.jsfilen – for å utvide listegruppen vår til å lage tabulatorer med lokalt innhold.

Noe plassholderinnhold i et avsnitt relatert til "Hjem". Og litt mer innhold, brukt her bare for å fylle ut og fylle dette fanepanelet. I produksjon ville du åpenbart hatt mer ekte innhold her. Og ikke bare tekst. Det kan være hva som helst, egentlig. Tekst, bilder, skjemaer.

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>

Bruk av dataattributter

Du kan aktivere en listegruppenavigasjon uten å skrive noe JavaScript ved å spesifisere data-bs-toggle="list"eller på et element. Bruk disse dataattributtene på .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

Aktiver tabulatorlisteelement via JavaScript (hvert listeelement må aktiveres individuelt):

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

Du kan aktivere individuelle listeelementer på flere måter:

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

For å få fanepanelet til å tone inn, legg .fadetil hver .tab-pane. Den første faneruten må også .showgjøre det opprinnelige innholdet synlig.

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

Metoder

constructor

Aktiverer et listeelementelement og innholdsbeholder. Tab skal ha enten en data-bs-targeteller en hrefmålrettet beholdernode i 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>

forestilling

Velger det gitte listeelementet og viser tilhørende rute. Ethvert annet listeelement som tidligere ble valgt, blir opphevet og tilhørende rute er skjult. Går tilbake til den som ringer før faneruten faktisk har blitt vist (for eksempel før shown.bs.tabhendelsen inntreffer).

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

  tab.show()

kaste

Ødelegger et elements fane.

getInstance

Statisk metode som lar deg få tabulatorforekomsten knyttet til et DOM-element

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

getOrCreateInstance

Statisk metode som lar deg få tabulatorforekomsten knyttet til et DOM-element, eller opprette en ny i tilfelle den ikke ble initialisert

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

arrangementer

Når du viser en ny fane, utløses hendelsene i følgende rekkefølge:

  1. hide.bs.tab(på gjeldende aktive fane)
  2. show.bs.tab(på fanen som skal vises)
  3. hidden.bs.tab(på den forrige aktive fanen, den samme som for hide.bs.tabarrangementet)
  4. shown.bs.tab(på den nylig aktive fanen som nettopp er vist, den samme som for show.bs.tabarrangementet)

Hvis ingen fane allerede var aktiv, vil ikke hide.bs.tabog hidden.bs.tab-hendelsene bli utløst.

Hendelsestype Beskrivelse
show.bs.tab Denne hendelsen utløses på fanevisning, men før den nye fanen har blitt vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
shown.bs.tab Denne hendelsen utløses på fanevisning etter at en fane er vist. Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den aktive fanen og den forrige aktive fanen (hvis tilgjengelig).
hide.bs.tab Denne hendelsen utløses når en ny fane skal vises (og dermed skal den forrige aktive fanen skjules). Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den gjeldende aktive fanen og den nye snart-aktive fanen.
hidden.bs.tab Denne hendelsen utløses etter at en ny fane vises (og dermed er den forrige aktive fanen skjult). Bruk event.targetog event.relatedTargetfor å målrette henholdsvis den forrige aktive fanen og den nye aktive fanen. 
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
  })
}