Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
in English

Lëscht Grupp

Lëschtgruppen sinn e flexibelen a mächtege Bestanddeel fir eng Serie vun Inhalter ze weisen. Änneren a verlängeren se fir bal all Inhalt bannen z'ënnerstëtzen.

Op dëser Säit

Basis Beispill

Déi meescht Basis Lëscht Grupp ass eng ongeuerdnet Lëscht mat Lëscht Artikelen an déi richteg Klassen. Baut op et mat den Optiounen déi verfollegen, oder mat Ärem eegene CSS wéi néideg.

  • En Artikel
  • En zweeten Element
  • En drëtten Element
  • E véierten Element
  • An e fënneften
<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>

Aktiv Elementer

Add .activeto a .list-group-itemfir déi aktuell aktiv Auswiel unzeginn.

  • En aktiven Element
  • En zweeten Element
  • En drëtten Element
  • E véierten Element
  • An e fënneften
<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>

Behënnert Elementer

Füügt .disabledzu engem .list-group-itemfir datt et behënnert schéngt . Notéiert datt e puer Elementer mat .disabledoch personaliséiert JavaScript erfuerderen fir hir Klickevenementer komplett auszeschalten (zB Linken).

  • E behënnert Element
  • En zweeten Element
  • En drëtten Element
  • E véierten Element
  • An e fënneften
<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>

Benotzt <a>s oder <button>s fir handlungsfäeg Lëschtegrupp Elementer mat Hover, behënnert an aktive Staaten ze kreéieren andeems Dir .list-group-item-action. Mir trennen dës Pseudo-Klassen fir sécherzestellen datt Lëschtegruppen aus net-interaktiven Elementer (wéi <li>s oder <div>s) keng Klick oder Klick leeschten.

Ginn sécher net de Standard .btnKlassen hei ze benotzen .

Den aktuelle Link Element En zweete Link Element En drëtte Link Element E véierte Link Element Eng behënnert Link Element 
<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>

Mat <button>s kënnt Dir och d' disabledAttributer benotzen amplaz vun der .disabledKlass. Leider <a>ënnerstëtzen s net de behënnerte Attribut.

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

Spull

Füügt .list-group-flushfir e puer Grenzen a gerundeten Ecker ze läschen fir d'Lëscht vun Gruppeartikelen Rand-zu-Rand an engem Elterendeel Container ze maachen (zB Kaarten).

  • En Artikel
  • En zweeten Element
  • En drëtten Element
  • E véierten Element
  • An e fënneften
<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>

Nummeréiert

Füügt d' .list-group-numberedModifikateur Klass (a benotzt optional en <ol>Element) fir op nummeréiert Lëscht Grupp Elementer opzemaachen. D'Zuele ginn iwwer CSS generéiert (am Géigesaz zu engem <ol>Standardbrowser-Styling) fir eng besser Plazéierung bannent Lëschtegruppartikelen a fir eng besser Personnalisatioun z'erméiglechen.

Zuelen sinn generéiert vun counter-resetop der <ol>, an dann stylesch a mat engem ::beforePseudo-Element op der <li>mat counter-incrementan gesat 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>

Dës funktionnéieren och gutt mat personaliséierten Inhalt.

  1. Ënnertitel
    Cras justo Odio
    14
  2. Ënnertitel
    Cras justo Odio
    14
  3. Ënnertitel
    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>

Horizontal

Füügt .list-group-horizontalfir de Layout vun de Lëschtegruppartikele vu vertikal op horizontal iwwer all Breakpunkten z'änneren. Alternativ, wielt eng reaktiounsfäeger Variant .list-group-horizontal-{sm|md|lg|xl|xxl}fir eng Lëschtgrupp horizontal ze maachen, ugefaange bei deem Breakpoint min-width. Aktuell horizontal Lëscht Gruppen kënnen net mat Spulllëscht Gruppen kombinéiert ginn.

ProTip: Wëllt gläich-Breet Lëscht Grupp Elementer wann horizontal? Füügt .flex-fillop all Lëscht Grupp Element.

  • En Artikel
  • En zweeten Element
  • En drëtten Element
  • En Artikel
  • En zweeten Element
  • En drëtten Element
  • En Artikel
  • En zweeten Element
  • En drëtten Element
  • En Artikel
  • En zweeten Element
  • En drëtten Element
  • En Artikel
  • En zweeten Element
  • En drëtten Element
  • En Artikel
  • En zweeten Element
  • En drëtten 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>

Kontextuell Klassen

Benotzt kontextuell Klassen fir Artikele mat engem statesche Hannergrond a Faarf ze stiléieren.

  • Eng einfach Standard Lëscht Grupp Element
  • Eng einfach Primärlëscht Grupp Element
  • En einfache Secondaire Lëscht Grupp Element
  • Eng einfach Erfolleg Lëscht Grupp Element
  • Eng einfach Gefor Lëscht Grupp Element
  • Eng einfach Warnung Lëscht Grupp Element
  • Eng einfach Info Lëscht Grupp Element
  • Eng einfach Luucht Lëscht Grupp Element
  • Eng einfach donkel Lëscht Grupp Element
<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>

Kontext Klassen schaffen och mat .list-group-item-action. Notéiert d'Zousatz vun den Hover-Stiler hei net am virege Beispill präsent. Och ënnerstëtzt gëtt de .activeStaat; gëllen et fir eng aktiv Auswiel op engem kontextuellen Lëscht Grupp Element unzeginn.

Eng einfach Standard Lëscht Grupp Element Eng einfach Primärlëscht Grupp Element En einfache Secondaire Lëscht Grupp Element Eng einfach Erfolleg Lëscht Grupp Element Eng einfach Gefor Lëscht Grupp Element Eng einfach Warnung Lëscht Grupp Element Eng einfach Info Lëscht Grupp Element Eng einfach Luucht Lëscht Grupp Element Eng einfach donkel Lëscht Grupp Element 
<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>
Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .visually-hiddenKlass.

Mat Schëlder

Füügt Badges un all Lëscht Grupp Element fir ongelies Zuelen, Aktivitéit, a méi mat der Hëllef vun e puer Utilities ze weisen .

  • Eng Lëscht Element14
  • Eng zweet Lëscht Element2
  • Eng drëtt Lëscht Element1 
<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>

Benotzerdefinéiert Inhalt

Füügt bal all HTML bannent, och fir verlinkte Lëschtgruppen wéi déi hei ënnen, mat der Hëllef vu Flexbox Utilities .

Lëscht Grupp Element Rubrik
3 Deeg virun

E puer Plazhalter Inhalt an engem Paragraph.

An e puer kleng Drécken.
Lëscht Grupp Element Rubrik
3 Deeg virun

E puer Plazhalter Inhalt an engem Paragraph.

An e puer gedämpft Klengdruck.
Lëscht Grupp Element Rubrik
3 Deeg virun

E puer Plazhalter Inhalt an engem Paragraph.

An e puer gedämpft Klengdruck. 
<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>

Checkboxen a Radioen

Place Bootstrap d'Checkboxen a Radios bannent Lëscht Grupp Elementer a personaliséiere wéi néideg. Dir kënnt se ouni <label>s benotzen, awer erënnert weg datt Dir en aria-labelAttribut a Wäert fir Accessibilitéit enthält.

  • Éischt Checkbox
  • Zweet Checkbox
  • Drëtt Checkbox
  • Véiert Checkbox
  • Fënneften Checkbox
<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>

A wann Dir wëllt <label>s wéi de .list-group-itemfir grouss Hit Beräicher, Dir kënnt dat och maachen.

<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

Variablen

$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

Benotzt a Kombinatioun mat $theme-colorsder Kontext Variant Klassen fir .list-group-items Generéiere.

@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 déi d'Modifier Klassen mam list-group-item-variant()Mixin generéiert.

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

Benotzt d'Tab JavaScript Plugin - enthält se individuell oder duerch déi kompiléiert bootstrap.jsDatei - fir eis Lëschtegrupp ze verlängeren fir Tabbar Panels vum lokalen Inhalt ze kreéieren.

E puer Plazhalterinhalt an engem Paragraf betreffend "Home". An e puer méi Inhalter, hei benotzt just fir dës Tab Panel auszefëllen an auszefëllen. An der Produktioun hätt Dir offensichtlech méi realen Inhalt hei. An net nëmmen Text. Et kéint alles sinn, wierklech. Text, Biller, Formen.

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>

Benotzt Daten Attributer

Dir kënnt eng Lëscht Grupp Navigatioun aktivéieren ouni JavaScript ze schreiwen andeems Dir einfach spezifizéiert data-bs-toggle="list"oder op en Element. Benotzt dës Donnéeën Attributer 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>

Iwwer JavaScript

Aktivéiert Tabbar Lëscht Element iwwer JavaScript (all Lëscht Element muss individuell aktivéiert ginn):

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

Dir kënnt eenzel Lëscht Element op verschidde Manéieren aktivéieren:

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

Fir d'Tabs Panel ze verschwannen, füügt .fadeall .tab-pane. Déi éischt Tab-Säit muss och .showden initialen Inhalt siichtbar maachen.

<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

constructor

Aktivéiert e Lëscht Element Element an Inhalt Container. Tab soll entweder en data-bs-targetoder e hrefgezielt e Container Node am DOM hunn.

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

weisen

Wielt de gegebene Lëschtpunkt a weist seng assoziéiert Fënster. All aner Lëscht Element, déi virdru gewielt gouf, gëtt net ausgewielt a seng assoziéiert Fënster ass verstoppt. Gëtt zréck op den Uruffer ier d'Tab Panel tatsächlech gewisen gouf (zum Beispill ier d' shown.bs.tabEvenement geschitt ass).

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

  tab.show()

entsuergen

Zerstéiert den Tab vun engem Element.

getInstanz

Statesch Method déi Iech erlaabt d'Tab Instanz mat engem DOM Element assoziéiert ze kréien

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

getOrCreateInstance

Statesch Method déi Iech erlaabt d'Tab-Instanz mat engem DOM-Element assoziéiert ze kréien, oder eng nei ze kreéieren am Fall wou se net initialiséiert gouf

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

Evenementer

Wann Dir en neien Tab weist, brennen d'Evenementer an der folgender Uerdnung:

  1. hide.bs.tab(op der aktueller aktiver Tab)
  2. show.bs.tab(op der Tab ze weisen)
  3. hidden.bs.tab(op der viregter aktiver Tab, déi selwecht wéi fir den hide.bs.tabEvent)
  4. shown.bs.tab(op der nei-aktive just-gewise Tab, déi selwecht wéi fir den show.bs.tabEvent)

Wa keng Tab schonn aktiv war, ginn d' hide.bs.taban hidden.bs.tabEventer net ofgeschaaft.

Event Typ Beschreiwung
show.bs.tab Dëst Event brennt op Tab Show, awer ier déi nei Tab gewisen gouf. Benotzt event.targeta event.relatedTargetfir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.
shown.bs.tab Dëst Event brennt op Tab Show nodeems eng Tab gewisen gouf. Benotzt event.targeta event.relatedTargetfir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.
hide.bs.tab Dëst Event brennt wann en neien Tab soll ugewise ginn (an dofir ass de fréiere aktive Tab verstoppt). Benotzt event.targeta event.relatedTargetfir den aktuellen aktive Tab an déi nei geschwënn aktiv Tab, respektiv.
hidden.bs.tab Dësen Event brennt nodeems en neien Tab ugewise gëtt (an domat ass de fréiere aktive Tab verstoppt). Benotzt event.targeta event.relatedTargetfir déi viregt aktive Tab an déi nei aktiv Tab ze zielen, respektiv. 
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
  })
}