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

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>

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

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>

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

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>

Linken a Knäppercher

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

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>

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

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>

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

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>

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.

Eng Lëscht Element
Eng Lëscht Element
Eng Lëscht Element

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>

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

Ënnertitel
Inhalt fir Lëscht Element
14
Ënnertitel
Inhalt fir Lëscht Element
14
Ënnertitel
Inhalt fir Lëscht Element
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>

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

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>

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

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>

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

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>

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

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>

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.

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>

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

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>

Éischt Radio
Zweet Radio
Drëtte 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>

Dir kënnt .stretched-linkop <label>s benotzen fir de ganze Lëscht Grupp Element klicktbar ze maachen.

Éischt Checkbox
Zweet Checkbox
Drëtt Checkbox

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

Variablen

Dobäi an v5.2.0

Als Deel vun der Entwécklung vu Bootstrap CSS Variablen Approche, benotze Lëschtgruppen elo lokal CSS Variablen op .list-groupfir eng verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

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

Doheem Profil Messagen Astellungen

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

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

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

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

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

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

Asynchron Methoden an Iwwergäng

All API Methoden sinn asynchron a starten en Iwwergang . Si ginn zréck op den Uruffer soubal den Iwwergang ugefaang ass, awer ier en eriwwer ass . Zousätzlech gëtt e Methodruff op eng Iwwergangskomponent ignoréiert .

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

Aktivéiert Ären Inhalt als Tab Element.

Dir kënnt eng Tab Instanz mam Konstruktor erstellen, zum Beispill:

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

Method	Beschreiwung
`dispose`	Zerstéiert den Tab vun engem Element.
`getInstance`	Statesch Method déi Iech erlaabt d'Tab Instanz mat engem DOM Element assoziéiert ze kréien, Dir kënnt et esou benotzen: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statesch Method déi eng Tab-Instanz zréckginn, déi mat engem DOM-Element assoziéiert ass oder eng nei erstellt am Fall wou se net initialiséiert gouf. Dir kënnt et esou benotzen `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	Wielt déi uginn Tab a weist seng assoziéiert Fënster. All aner Tab, 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-Pane tatsächlech gewisen gouf (dh ier d' `shown.bs.tab`Evenement geschitt ass).

Evenementer

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

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

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

Event Typ	Beschreiwung
`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.target`a `event.relatedTarget`fir 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.target`a `event.relatedTarget`fir déi viregt aktive Tab an déi nei aktiv Tab ze zielen, respektiv.
`show.bs.tab`	Dëst Event brennt op Tab Show, awer ier déi nei Tab gewisen gouf. Benotzt `event.target`a `event.relatedTarget`fir 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.target`a `event.relatedTarget`fir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.

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