Lijst groep

Lijstgroepen zijn een flexibel en krachtig onderdeel voor het weergeven van een reeks inhoud. Pas ze aan en breid ze uit om zo ongeveer alle inhoud te ondersteunen.

Op deze pagina

Basis voorbeeld

De meest elementaire lijstgroep is een ongeordende lijst met lijstitems en de juiste klassen. Bouw erop voort met de opties die volgen, of met uw eigen CSS indien nodig.

Een item
Een tweede item
Een derde item
Een vierde item
En een vijfde

html

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

Actieve items

Toevoegen .activeaan a .list-group-itemom de huidige actieve selectie aan te geven.

Een actief item
Een tweede item
Een derde item
Een vierde item
En een vijfde

html

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

Uitgeschakelde items

Toevoegen .disabledaan a .list-group-itemom het uitgeschakeld te laten lijken . Merk op dat sommige elementen met .disabledook aangepast JavaScript nodig hebben om hun klikgebeurtenissen (bijv. links) volledig uit te schakelen.

Een uitgeschakeld item
Een tweede item
Een derde item
Een vierde item
En een vijfde

html

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

Links en knoppen

Gebruik <a>s of <button>s om bruikbare lijstgroepsitems te maken met zwevende, uitgeschakelde en actieve statussen door toe te voegen .list-group-item-action. We scheiden deze pseudo-klassen om ervoor te zorgen dat lijstgroepen die zijn gemaakt van niet-interactieve elementen (zoals <li>s of <div>s) geen klik- of tikprijs bieden.

Zorg ervoor dat u hier niet de standaardklassen .btngebruikt .

Het huidige linkitem Een tweede linkitem Een derde linkitem Een vierde linkitem Een uitgeschakeld linkitem

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Met <button>s kun je ook gebruik maken van het disabledattribuut in plaats van de .disabledklasse. Helaas <a>ondersteunen s het kenmerk uitgeschakeld niet.

html

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second button item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

doorspoelen

Toevoegen .list-group-flushom enkele randen en afgeronde hoeken te verwijderen om lijstgroepitems van rand tot rand in een bovenliggende container weer te geven (bijv. kaarten).

Een item
Een tweede item
Een derde item
Een vierde item
En een vijfde

html

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

Genummerd

Voeg de .list-group-numberedmodificatieklasse toe (en gebruik optioneel een <ol>element) om u aan te melden voor genummerde lijstgroepsitems. Nummers worden gegenereerd via CSS (in tegenstelling tot <ol>de standaard browserstijl) voor een betere plaatsing in lijstgroepitems en om betere aanpassingen mogelijk te maken.

Nummers worden gegenereerd door counter-resetop de <ol>, en vervolgens gestyled en geplaatst met een ::beforepseudo-element op de <li>met counter-incrementen content.

Een lijstitem
Een lijstitem
Een lijstitem

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Deze werken ook prima met aangepaste inhoud.

Ondertitel
Inhoud voor lijstitem
14
Ondertitel
Inhoud voor lijstitem
14
Ondertitel
Inhoud voor lijstitem
14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Horizontaal

Toevoegen .list-group-horizontalom de lay-out van lijstgroepitems te wijzigen van verticaal naar horizontaal voor alle onderbrekingspunten. U kunt ook een responsieve variant kiezen .list-group-horizontal-{sm|md|lg|xl|xxl}om een lijstgroep horizontaal te maken vanaf het breekpunt van dat breekpunt min-width. Momenteel kunnen horizontale lijstgroepen niet worden gecombineerd met doorspoellijstgroepen.

ProTip: Wilt u lijstgroepitems van gelijke breedte als ze horizontaal zijn? Voeg toe .flex-fillaan elk lijstgroepsitem.

Een item
Een tweede item
Een derde item

Een item
Een tweede item
Een derde item

Een item
Een tweede item
Een derde item

Een item
Een tweede item
Een derde item

Een item
Een tweede item
Een derde item

Een item
Een tweede item
Een derde item

html

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Contextuele lessen

Gebruik contextuele klassen om lijstitems op te maken met een stateful achtergrond en kleur.

Een eenvoudig standaardlijstgroepsitem
Een eenvoudig primair lijstgroepsitem
Een eenvoudig secundair lijstgroepsitem
Een eenvoudig groepsitem van de succeslijst
Een eenvoudig groepsitem op de gevarenlijst
Een eenvoudig groepsitem op de waarschuwingslijst
Een eenvoudig groepsitem in de infolijst
Een eenvoudig groepsitem voor de lichtlijst
Een eenvoudig groepsitem op een donkere lijst

html

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Contextuele lessen werken ook met .list-group-item-action. Let op de toevoeging van de zweefstijlen die hier niet aanwezig waren in het vorige voorbeeld. Ook ondersteund wordt de .activestaat; pas het toe om een actieve selectie op een contextueel lijstgroepsitem aan te geven.

Een eenvoudig standaardlijstgroepsitem Een eenvoudig primair lijstgroepsitem Een eenvoudig secundair lijstgroepsitem Een eenvoudig groepsitem van de succeslijst Een eenvoudig groepsitem op de gevarenlijst Een eenvoudig groepsitem op de waarschuwingslijst Een eenvoudig groepsitem in de infolijst Een eenvoudig groepsitem voor de lichtlijst Een eenvoudig groepsitem op een donkere lijst

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Betekenis overbrengen aan ondersteunende technologieën

Het gebruik van kleur om betekenis toe te voegen geeft alleen een visuele indicatie, die niet wordt overgebracht aan gebruikers van ondersteunende technologieën, zoals schermlezers. Zorg ervoor dat informatie die wordt aangegeven met de kleur ofwel duidelijk is uit de inhoud zelf (bijv. de zichtbare tekst), of op alternatieve manieren wordt opgenomen, zoals extra tekst die verborgen is bij de .visually-hiddenklasse.

Met insignes

Voeg badges toe aan elk lijstgroepitem om ongelezen tellingen, activiteit en meer te tonen met behulp van enkele hulpprogramma's .

Een lijstitem14
Een tweede lijstitem2
Een derde lijstitem1

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Aangepaste inhoud

Voeg bijna elke HTML toe, zelfs voor gekoppelde lijstgroepen zoals die hieronder, met behulp van flexbox-hulpprogramma's .

Kop van groepsitem weergeven

3 dagen geleden

Sommige tijdelijke inhoud in een alinea.

En wat kleine lettertjes.

Kop van groepsitem weergeven

3 dagen geleden

Sommige tijdelijke inhoud in een alinea.

En wat gedempte kleine lettertjes.

Kop van groepsitem weergeven

3 dagen geleden

Sommige tijdelijke inhoud in een alinea.

En wat gedempte kleine lettertjes.

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

Selectievakjes en radio's

Plaats de selectievakjes en radio's van Bootstrap in lijstgroepitems en pas deze naar wens aan. Je kunt ze gebruiken zonder <label>s, maar vergeet niet om een aria-labelattribuut en waarde voor toegankelijkheid op te nemen.

Eerste selectievakje
Tweede selectievakje
Derde selectievakje

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

eerste radio
tweede radio
derde radio

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

U kunt .stretched-linkop <label>s gebruiken om het hele lijstgroepitem klikbaar te maken.

Eerste selectievakje
Tweede selectievakje
Derde selectievakje

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

Variabelen

Toegevoegd in v5.2.0

Als onderdeel van Bootstrap's evoluerende benadering van CSS-variabelen, gebruiken lijstgroepen nu lokale CSS .list-group-variabelen voor verbeterde realtime aanpassingen. Waarden voor de CSS-variabelen worden ingesteld via Sass, dus Sass-aanpassing wordt ook nog steeds ondersteund.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass-variabelen

$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

Gebruikt in combinatie met $theme-colorsom de contextuele variantklassen voor .list-group-items te genereren.

@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

Loop die de modifier-klassen genereert met 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-gedrag

Gebruik de JavaScript-plug-in voor tabbladen - neem deze afzonderlijk of via het gecompileerde bootstrap.jsbestand op - om onze lijstgroep uit te breiden om tabbare vensters met lokale inhoud te maken.

Huis Profiel Berichten Instellingen

Sommige tijdelijke inhoud in een paragraaf met betrekking tot "Home". En wat meer inhoud, hier gebruikt om dit tabbladpaneel op te vullen en te vullen. In productie zou je hier natuurlijk meer echte inhoud hebben. En niet alleen tekst. Het kan van alles zijn, echt. Tekst, afbeeldingen, 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>

Gegevenskenmerken gebruiken

U kunt een lijstgroepnavigatie activeren zonder JavaScript te schrijven door simpelweg data-bs-toggle="list"of op een element te specificeren. Gebruik deze gegevensattributen 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

Lijstitem met tabs inschakelen via JavaScript (elk lijstitem moet afzonderlijk worden geactiveerd):

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

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

U kunt individuele lijstitems op verschillende manieren activeren:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Fade-effect

Als u het tabbladenpaneel wilt laten infaden, voegt u .fadeaan elk toe .tab-pane. Het eerste tabblad moet ook .showde initiële inhoud zichtbaar maken.

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

Methoden:

Asynchrone methoden en overgangen

Alle API-methoden zijn asynchroon en starten een transitie . Ze keren terug naar de beller zodra de overgang is gestart maar voordat deze eindigt . Bovendien wordt een methodeaanroep op een overgangscomponent genegeerd .

Zie onze JavaScript-documentatie voor meer informatie .

Activeert uw inhoud als een tabbladelement.

U kunt een tabbladinstantie maken met de constructor, bijvoorbeeld:

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

Methode	Beschrijving
`dispose`	Vernietigt het tabblad van een element.
`getInstance`	Statische methode waarmee u de tab-instantie kunt koppelen aan een DOM-element, u kunt deze als volgt gebruiken: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statische methode die een tab-instantie retourneert die is gekoppeld aan een DOM-element of een nieuwe maakt voor het geval deze niet is geïnitialiseerd. Je kunt het als volgt gebruiken: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selecteert het gegeven tabblad en toont het bijbehorende paneel. Elk ander tabblad dat eerder was geselecteerd, wordt gedeselecteerd en het bijbehorende paneel wordt verborgen. Keert terug naar de beller voordat het tabblad daadwerkelijk is weergegeven (dwz voordat de `shown.bs.tab`gebeurtenis plaatsvindt).

Evenementen

Wanneer een nieuw tabblad wordt weergegeven, worden de gebeurtenissen in de volgende volgorde geactiveerd:

hide.bs.tab(op het huidige actieve tabblad)
show.bs.tab(op het te tonen tabblad)
hidden.bs.tab(op het vorige actieve tabblad, hetzelfde als voor het hide.bs.tabevenement)
shown.bs.tab(op het nieuw actieve tabblad dat zojuist is weergegeven, dezelfde als voor de show.bs.tabgebeurtenis)

Als er al geen tabblad actief was, worden de gebeurtenissen hide.bs.taben hidden.bs.tabniet geactiveerd.

Evenementtype	Beschrijving
`hide.bs.tab`	Deze gebeurtenis wordt geactiveerd wanneer een nieuw tabblad moet worden weergegeven (en dus het vorige actieve tabblad moet worden verborgen). Gebruik `event.target`en om respectievelijk `event.relatedTarget`het huidige actieve tabblad en het nieuwe binnenkort actieve tabblad te targeten.
`hidden.bs.tab`	Deze gebeurtenis wordt geactiveerd nadat een nieuw tabblad is weergegeven (en dus het vorige actieve tabblad is verborgen). Gebruik `event.target`en `event.relatedTarget`om respectievelijk het vorige actieve tabblad en het nieuwe actieve tabblad te targeten.
`show.bs.tab`	Deze gebeurtenis wordt geactiveerd bij tabshow, maar voordat het nieuwe tabblad is weergegeven. Gebruik `event.target`en `event.relatedTarget`om respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.
`shown.bs.tab`	Deze gebeurtenis wordt geactiveerd bij tabshow nadat een tabblad is weergegeven. Gebruik `event.target`en `event.relatedTarget`om respectievelijk het actieve tabblad en het vorige actieve tabblad (indien beschikbaar) te targeten.

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})