in English

Listegruppe

Listegrupper er en fleksibel og kraftfuld komponent til at vise en række indhold. Rediger og udvid dem til at understøtte stort set alt indhold indeni.

På denne side

Grundlæggende eksempel

Den mest grundlæggende listegruppe er en uordnet liste med listeelementer og de rigtige klasser. Byg videre på det med de muligheder, der følger, eller med din egen CSS efter behov.

En genstand
En anden genstand
Et tredje punkt
Et fjerde punkt
Og en femte

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 genstande

Tilføj .activetil a .list-group-itemfor at angive det aktuelle aktive valg.

Et aktivt element
En anden genstand
Et tredje punkt
Et fjerde punkt
Og en femte

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>

Deaktiverede varer

Tilføj .disabledtil en .list-group-itemfor at få den til at se deaktiveret ud. Bemærk, at nogle elementer med .disabledogså vil kræve tilpasset JavaScript for fuldt ud at deaktivere deres klikhændelser (f.eks. links).

En deaktiveret genstand
En anden genstand
Et tredje punkt
Et fjerde punkt
Og en femte

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

Brug <a>s eller <button>s til at oprette handlingsbare listegruppeelementer med svævende, deaktiveret og aktive tilstande ved at tilføje .list-group-item-action. Vi adskiller disse pseudoklasser for at sikre, at listegrupper lavet af ikke-interaktive elementer (som <li>s eller <div>s) ikke giver et klik eller tryk.

Sørg for ikke at bruge standardklasserne .btnher .

Det aktuelle linkelement Et andet linkelement Et tredje linkelement Et fjerde linkelement Et deaktiveret linkelement

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>

Med <button>s kan du også gøre brug af disabledattributten i stedet for .disabledklassen. Desværre <a>understøtter s ikke attributten deaktiveret.

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

Tilføj .list-group-flushfor at fjerne nogle kanter og afrundede hjørner for at gengive listegruppeelementer kant-til-kant i en overordnet container (f.eks. kort).

En genstand
En anden genstand
Et tredje punkt
Et fjerde punkt
Og en femte

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>

Nummereret

Tilføj .list-group-numberedmodifikatorklassen (og brug eventuelt et <ol>element) for at tilmelde dig nummererede listegruppeelementer. Numre genereres via CSS (i modsætning til en <ol>standardbrowserstil) for bedre placering i listegruppeelementer og for at give mulighed for bedre tilpasning.

Tal genereres af counter-resetpå <ol>, og derefter styles og placeres med et ::beforepseudo-element på <li>med counter-incrementog content.

Et listeelement
Et listeelement
Et listeelement

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>

Disse fungerer også godt med tilpasset indhold.

Underoverskrift
Indhold til listeelement
14
Underoverskrift
Indhold til listeelement
14
Underoverskrift
Indhold til listeelement
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>

Vandret

Tilføj .list-group-horizontalfor at ændre layoutet af listegruppeelementer fra lodret til vandret på tværs af alle brudpunkter. Alternativt kan du vælge en responsiv variant .list-group-horizontal-{sm|md|lg|xl|xxl}for at gøre en listegruppe vandret, der starter ved det pågældende brudpunkt min-width. I øjeblikket kan horisontale listegrupper ikke kombineres med flush-listegrupper.

ProTip: Vil du have samme bredde listegruppeelementer, når de er vandrette? Tilføj .flex-filltil hvert listegruppeelement.

En genstand
En anden genstand
Et tredje punkt

En genstand
En anden genstand
Et tredje punkt

En genstand
En anden genstand
Et tredje punkt

En genstand
En anden genstand
Et tredje punkt

En genstand
En anden genstand
Et tredje punkt

En genstand
En anden genstand
Et tredje punkt

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>

Kontekstuelle klasser

Brug kontekstuelle klasser til at style listeelementer med en tilstandsfuld baggrund og farve.

Et simpelt standardlistegruppeemne
Et simpelt element i primær listegruppe
Et simpelt sekundært listegruppeemne
Et simpelt gruppeelement på en succesliste
Et simpelt gruppeelement på en fareliste
Et simpelt gruppeelement på en advarselsliste
Et simpelt gruppeelement på en infoliste
Et simpelt lyslistegruppeemne
Et simpelt gruppeemne på mørk liste

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>

Kontekstuelle klasser arbejder også med .list-group-item-action. Bemærk tilføjelsen af svævestilene her, som ikke er til stede i det foregående eksempel. Også støttet er .activestaten; anvende det for at angive et aktivt valg på et kontekstuel listegruppeemne.

Et simpelt standardlistegruppeemne Et simpelt element i primær listegruppe Et simpelt sekundært listegruppeemne Et simpelt gruppeelement på en succesliste Et simpelt gruppeelement på en fareliste Et simpelt gruppeelement på en advarselsliste Et simpelt gruppeelement på en infoliste Et simpelt lyslistegruppeemne Et simpelt gruppeemne på mørk liste

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>

Formidle mening til hjælpeteknologier

Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .visually-hiddenklassen.

Med badges

Føj badges til ethvert listegruppeelement for at vise ulæste optællinger, aktivitet og mere ved hjælp af nogle hjælpeprogrammer .

Et listeelement14
Et andet listepunkt2
Et tredje punkt på listen1

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>

Tilpasset indhold

Tilføj næsten enhver HTML indeni, selv for linkede listegrupper som den nedenfor, ved hjælp af flexbox-værktøjer .

Listegruppeelementoverskrift

3 dage siden

Noget pladsholderindhold i et afsnit.

Og lidt småt.

Listegruppeelementoverskrift

3 dage siden

Noget pladsholderindhold i et afsnit.

Og noget dæmpet småt.

Listegruppeelementoverskrift

3 dage siden

Noget pladsholderindhold i et afsnit.

Og noget dæmpet småt.

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>

Afkrydsningsfelter og radioer

Placer Bootstraps afkrydsningsfelter og radioer i listegruppeelementer og tilpas efter behov. Du kan bruge dem uden <label>s, men husk at inkludere en aria-labelegenskab og værdi for tilgængelighed.

Første afkrydsningsfelt
Andet afkrydsningsfelt
Tredje afkrydsningsfelt

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>

Første radio
Anden radio
Tredje 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>

Du kan bruge .stretched-linkpå <label>s til at gøre hele listegruppeelementet klikbart.

Første afkrydsningsfelt
Andet afkrydsningsfelt
Tredje afkrydsningsfelt

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

Variabler

Tilføjet i v5.2.0

Som en del af Bootstraps udviklende CSS-variabletilgang bruger listegrupper nu lokale CSS-variabler .list-grouptil forbedret realtidstilpasning. Værdier for CSS-variablerne indstilles via Sass, så Sass-tilpasning understøttes også stadig.

  --#{$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 variable

$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

Bruges i kombination med $theme-colorstil at generere de kontekstuelle variantklasser 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

Loop, der genererer modifikatorklasserne 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 adfærd

Brug fanebladet JavaScript-plugin - inkluder det individuelt eller gennem den kompilerede bootstrap.jsfil - til at udvide vores listegruppe til at oprette faneblade med lokalt indhold.

Hjem Profil Beskeder Indstillinger

Noget pladsholderindhold i et afsnit, der vedrører "Hjem". Og noget mere indhold, brugt her bare til at udfylde og udfylde dette fanepanel. I produktionen ville du naturligvis have mere reelt indhold her. Og ikke kun tekst. Det kan være hvad som helst, virkelig. Tekst, billeder, formularer.

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>

Brug af dataattributter

Du kan aktivere en listegruppenavigation uden at skrive JavaScript ved blot at angive data-bs-toggle="list"eller på et element. Brug disse dataattributter 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 skal aktiveres individuelt):

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

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

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

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

For at få fanepanelet til at tone ind, skal du tilføje .fadetil hver .tab-pane. Den første fanerude skal også .showgøre det oprindelige indhold synligt.

<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

Asynkrone metoder og overgange

Alle API - metoder er asynkrone og starter en overgang . De vender tilbage til den, der ringer, så snart overgangen er startet, men før den slutter . Derudover vil et metodekald på en overgangskomponent blive ignoreret .

Se vores JavaScript-dokumentation for mere information .

Aktiverer dit indhold som et faneelement.

Du kan oprette en faneforekomst med konstruktøren, for eksempel:

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

Metode	Beskrivelse
`dispose`	Ødelægger et elements fane.
`getInstance`	Statisk metode, som giver dig mulighed for at få fane-forekomsten tilknyttet et DOM-element, du kan bruge det sådan her: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statisk metode, som returnerer en tabulatorforekomst, der er knyttet til et DOM-element, eller opretter et nyt, hvis det ikke blev initialiseret. Du kan bruge det sådan her: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Vælger den givne fane og viser dens tilhørende rude. Enhver anden fane, der tidligere er valgt, bliver fravalgt, og dens tilknyttede rude er skjult. Vender tilbage til den, der ringer, før faneruden faktisk er blevet vist (dvs. før `shown.bs.tab`hændelsen indtræffer).

Begivenheder

Når du viser en ny fane, udløses begivenhederne i følgende rækkefølge:

hide.bs.tab(på den aktuelle aktive fane)
show.bs.tab(på fanen der skal vises)
hidden.bs.tab(på den forrige aktive fane, den samme som for hide.bs.tabbegivenheden)
shown.bs.tab(på det nyligt aktive faneblad, det samme som for show.bs.tabbegivenheden)

Hvis ingen fane allerede var aktiv, vil begivenhederne hide.bs.tabog hidden.bs.tabikke blive udløst.

Begivenhedstype	Beskrivelse
`hide.bs.tab`	Denne hændelse udløses, når en ny fane skal vises (og dermed skal den tidligere aktive fane skjules). Brug `event.target`og `event.relatedTarget`til at målrette henholdsvis den aktuelle aktive fane og den nye snart-aktive fane.
`hidden.bs.tab`	Denne hændelse udløses, efter at en ny fane er vist (og dermed er den tidligere aktive fane skjult). Brug `event.target`og `event.relatedTarget`til at målrette henholdsvis den forrige aktive fane og den nye aktive fane.
`show.bs.tab`	Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug `event.target`og `event.relatedTarget`til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).
`shown.bs.tab`	Denne begivenhed udløses på faneshow, efter at en fane er blevet vist. Brug `event.target`og `event.relatedTarget`til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig).

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