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

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>

Aktive items

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

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

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>

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
In twadde item
In tredde item
In fjirde item
En in fyfde

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

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

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>

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.

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>

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

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>

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 oanmakke fia CSS (yn tsjinstelling ta in <ol>s standert blêder 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

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>

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

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

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

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>

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

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>

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

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>

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

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>

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.

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>

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.

Earste karfakje
Twadde karfakje
Tredde karfakje

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>

Earste radio
Twadde radio
Tredde 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>

Jo kinne .stretched-linkop <label>s brûke om it hiele listgroepitem klikber te meitsjen.

Earste karfakje
Twadde karfakje
Tredde karfakje

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

Fariabelen

Taheakke yn v5.2.0

As ûnderdiel fan Bootstrap's evoluearjende oanpak fan CSS-fariabelen, brûke listgroepen no lokale CSS-fariabelen op .list-groupfoar ferbettere real-time oanpassing. Wearden foar de CSS-fariabelen wurde ynsteld fia Sass, sadat Sass-oanpassing ek noch stipe wurdt.

  --#{$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 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):

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

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

Jo kinne yndividuele listitem op ferskate manieren aktivearje:

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

Asynchrone metoaden en transysjes

Alle API-metoaden binne asynchrone en begjinne in oergong . Se komme werom nei de beller sa gau as de oergong is begon, mar foardat it einiget . Derneist sil in metoadeoprop op in oergongskomponint wurde negearre .

Sjoch ús JavaScript-dokumintaasje foar mear ynformaasje .

Aktivearret jo ynhâld as in ljepper elemint.

Jo kinne in ljeppereksimplaar oanmeitsje mei de konstruktor, bygelyks:

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

Metoade	Beskriuwing
`dispose`	Fernielet in ljepper fan in elemint.
`getInstance`	Statyske metoade wêrmei jo de ljeppereksimplaar kinne krije ferbûn mei in DOM-elemint, jo kinne it sa brûke: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statyske metoade dy't in ljeppereksimplaar werombringt dy't assosjeare is mei in DOM-elemint of in nij oanmeitsje yn gefal it net inisjalisearre is. Jo kinne it sa brûke: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Selekteart de opjûne ljepper en lit it byhearrende paniel sjen. Elke oare ljepper dy't earder selektearre is wurdt net selektearre en it byhearrende paniel is ferburgen. Keart werom nei de beller foardat it ljepblêd wirklik werjûn is (dus foardat it `shown.bs.tab`barren bart).

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 der gjin ljepper wie al aktyf, dan sil de hide.bs.taben hidden.bs.tabeveneminten net ûntslein wurde.

Event type	Beskriuwing
`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.
`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.

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