in English

Gruppe auflisten

Listengruppen sind eine flexible und leistungsstarke Komponente zum Anzeigen einer Reihe von Inhalten. Ändern und erweitern Sie sie, um nahezu jeden Inhalt darin zu unterstützen.

Auf dieser Seite

Einfaches Beispiel

Die einfachste Listengruppe ist eine ungeordnete Liste mit Listenelementen und den richtigen Klassen. Bauen Sie mit den folgenden Optionen oder bei Bedarf mit Ihrem eigenen CSS darauf auf.

Ein Gegenstand
Ein zweiter Artikel
Ein dritter Artikel
Ein vierter Artikel
Und eine fünfte

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 Artikel

Zu a hinzufügen .active, .list-group-itemum die derzeit aktive Auswahl anzugeben.

Ein aktives Element
Ein zweiter Artikel
Ein dritter Artikel
Ein vierter Artikel
Und eine fünfte

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>

Deaktivierte Elemente

Zu a hinzufügen .disabled, .list-group-itemdamit es deaktiviert erscheint . Beachten Sie, dass einige Elemente mit .disabledauch benutzerdefiniertes JavaScript erfordern, um ihre Klickereignisse (z. B. Links) vollständig zu deaktivieren.

Ein deaktiviertes Element
Ein zweiter Artikel
Ein dritter Artikel
Ein vierter Artikel
Und eine fünfte

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 und Schaltflächen

Verwenden Sie <a>s oder <button>s, um umsetzbare Listengruppenelemente mit Hover-, Deaktiviert- und Aktiv-Status zu erstellen, indem Sie hinzufügen .list-group-item-action. Wir trennen diese Pseudoklassen, um sicherzustellen, dass Listengruppen aus nicht interaktiven Elementen (wie <li>s oder <div>s) kein Klick- oder Tippangebot bieten.

Achten Sie darauf, hier nicht die Standardklassen .btnzu verwenden .

Das aktuelle Link-Element Ein zweites Link-Item Ein drittes Link-Item Ein viertes Link-Item Ein deaktiviertes 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>

Bei <button>s können Sie disabledstatt der .disabledKlasse auch das Attribut verwenden. Leider unterstützen <a>s das Attribut disabled nicht.

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>

Spülen

Hinzufügen .list-group-flush, um einige Ränder und abgerundete Ecken zu entfernen, um Listengruppenelemente in einem übergeordneten Container (z. B. Karten) von Kante zu Kante zu rendern.

Ein Gegenstand
Ein zweiter Artikel
Ein dritter Artikel
Ein vierter Artikel
Und eine fünfte

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>

Nummeriert

Fügen Sie die .list-group-numberedModifikatorklasse hinzu (und verwenden Sie optional ein <ol>Element), um sich für nummerierte Listengruppenelemente zu entscheiden. Zahlen werden über CSS generiert (im Gegensatz zum <ol>Standard-Browserstil eines s), um sie besser in Listengruppenelementen zu platzieren und eine bessere Anpassung zu ermöglichen.

Zahlen werden durch counter-resetauf dem generiert <ol>und dann mit einem ::beforePseudo-Element auf dem <li>mit counter-incrementund formatiert und platziert content.

Ein Listenelement
Ein Listenelement
Ein Listenelement

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>

Diese funktionieren auch hervorragend mit benutzerdefinierten Inhalten.

Untertitel
Inhalt für Listenelement
14
Untertitel
Inhalt für Listenelement
14
Untertitel
Inhalt für Listenelement
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

Hinzufügen .list-group-horizontal, um das Layout der Listengruppenelemente über alle Haltepunkte hinweg von vertikal in horizontal zu ändern. Wählen Sie alternativ eine reaktionsschnelle Variante .list-group-horizontal-{sm|md|lg|xl|xxl}, um eine Listengruppe horizontal beginnend an diesem Haltepunkt zu erstellen min-width. Derzeit können horizontale Listengruppen nicht mit bündigen Listengruppen kombiniert werden.

Profi- Tipp: Möchten Sie Listenelemente mit gleicher Breite horizontal gruppieren? .flex-fillZu jedem Listengruppenelement hinzufügen .

Ein Gegenstand
Ein zweiter Artikel
Ein dritter Artikel

Ein Gegenstand
Ein zweiter Artikel
Ein dritter Artikel

Ein Gegenstand
Ein zweiter Artikel
Ein dritter Artikel

Ein Gegenstand
Ein zweiter Artikel
Ein dritter Artikel

Ein Gegenstand
Ein zweiter Artikel
Ein dritter Artikel

Ein Gegenstand
Ein zweiter Artikel
Ein dritter Artikel

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>

Kontextbezogener Unterricht

Verwenden Sie kontextabhängige Klassen, um Listenelemente mit einem zustandsbehafteten Hintergrund und einer zustandsbehafteten Farbe zu gestalten.

Ein einfaches Standardlistengruppenelement
Ein einfaches primäres Listengruppenelement
Ein einfaches sekundäres Listengruppenelement
Ein einfaches Erfolgslisten-Gruppenelement
Ein einfaches Gruppenelement der Gefahrenliste
Ein einfaches Warnlisten-Gruppenelement
Ein einfaches Infolisten-Gruppenelement
Ein einfaches Gruppenelement für leichte Listen
Ein einfaches Gruppenelement der dunklen 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>

Kontextunterricht funktioniert auch mit .list-group-item-action. Beachten Sie die Hinzufügung der Hover-Stile hier, die im vorherigen Beispiel nicht vorhanden waren. Unterstützt wird auch der .activeStaat; Wenden Sie es an, um eine aktive Auswahl auf einem kontextabhängigen Listengruppenelement anzuzeigen.

Ein einfaches Standardlistengruppenelement Ein einfaches primäres Listengruppenelement Ein einfaches sekundäres Listengruppenelement Ein einfaches Erfolgslisten-Gruppenelement Ein einfaches Gruppenelement der Gefahrenliste Ein einfaches Warnlisten-Gruppenelement Ein einfaches Infolisten-Gruppenelement Ein einfaches Gruppenelement für leichte Listen Ein einfaches Gruppenelement der dunklen 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>

Bedeutung von Hilfstechnologien vermitteln

Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .visually-hiddenKlasse verborgen ist.

Mit Abzeichen

Fügen Sie mithilfe einiger Dienstprogramme Badges zu beliebigen Listengruppenelementen hinzu, um die Anzahl der ungelesenen Artikel, Aktivitäten und mehr anzuzeigen .

Ein Listenelement14
Ein zweiter Listeneintrag2
Ein dritter Listenpunkt1

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>

Benutzerdefinierte Inhalte

Fügen Sie mit Hilfe von Flexbox-Dienstprogrammen fast jeden HTML-Code hinzu, sogar für verknüpfte Listengruppen wie die untenstehende .

Listengruppenelement-Überschrift

vor 3 Tagen

Einige Platzhalterinhalte in einem Absatz.

Und etwas Kleingedrucktes.

Listengruppenelement-Überschrift

vor 3 Tagen

Einige Platzhalterinhalte in einem Absatz.

Und etwas gedämpftes Kleingedrucktes.

Listengruppenelement-Überschrift

vor 3 Tagen

Einige Platzhalterinhalte in einem Absatz.

Und etwas gedämpftes Kleingedrucktes.

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>

Kontrollkästchen und Radios

Platzieren Sie die Kontrollkästchen und Optionsfelder von Bootstrap innerhalb von Listengruppenelementen und passen Sie sie nach Bedarf an. Sie können sie ohne <label>s verwenden, aber denken Sie bitte daran, ein aria-labelAttribut und einen Wert für die Zugänglichkeit einzufügen.

Erstes Kontrollkästchen
Zweites Kontrollkästchen
Drittes Kontrollkästchen

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>

Erstes Radio
Zweites Funkgerät
Drittes Funkgerät

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>

Sie können .stretched-linkon <label>s verwenden, um das gesamte Listengruppenelement anklickbar zu machen.

Erstes Kontrollkästchen
Zweites Kontrollkästchen
Drittes Kontrollkästchen

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

Hinzugefügt in v5.2.0

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden Listengruppen jetzt lokale CSS-Variablen .list-groupfür eine verbesserte Echtzeit-Anpassung. Die Werte für die CSS-Variablen werden über Sass festgelegt, sodass die Sass-Anpassung auch weiterhin unterstützt wird.

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

Wird in Kombination mit verwendet $theme-colors, um die kontextabhängigen Variantenklassen für .list-group-items zu generieren.

@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;
      }
    }
  }
}

Schleife

Schleife, die die Modifikatorklassen mit dem list-group-item-variant()Mixin generiert.

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

Verwenden Sie das Tab-JavaScript-Plug-In – fügen Sie es einzeln oder über die kompilierte bootstrap.jsDatei ein – um unsere Listengruppe zu erweitern, um Tabulatorfenster mit lokalen Inhalten zu erstellen.

Heim Profil Mitteilungen Einstellungen

Einige Platzhalterinhalte in einem Absatz, der sich auf "Home" bezieht. Und einige weitere Inhalte, die hier nur zum Ausfüllen und Füllen dieses Registerkartenfelds verwendet werden. In der Produktion hätte man hier offensichtlich mehr echten Content. Und nicht nur Text. Es könnte wirklich alles sein. Texte, Bilder, Formulare.

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>

Verwenden von Datenattributen

Sie können eine Listengruppennavigation aktivieren, ohne JavaScript zu schreiben, indem Sie einfach data-bs-toggle="list"oder für ein Element angeben. Verwenden Sie diese Datenattribute für .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>

Über JavaScript

Tab-Listenelement über JavaScript aktivieren (jedes Listenelement muss einzeln aktiviert werden):

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

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

Sie können einzelne Listenelemente auf verschiedene Arten aktivieren:

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

Um das Tabs-Panel einzublenden, fügen Sie .fadezu jedem hinzu .tab-pane. Auch der erste Tab-Bereich muss .showden initialen Inhalt sichtbar machen.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

Methoden

Asynchrone Methoden und Übergänge

Alle API-Methoden sind asynchron und starten einen Übergang . Sie kehren zum Aufrufer zurück, sobald der Übergang gestartet wird, aber bevor er endet . Außerdem wird ein Methodenaufruf einer Übergangskomponente ignoriert .

Weitere Informationen finden Sie in unserer JavaScript-Dokumentation .

Aktiviert Ihren Inhalt als Tab-Element.

Sie können eine Tab-Instanz mit dem Konstruktor erstellen, zum Beispiel:

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

Methode	Beschreibung
`dispose`	Zerstört die Registerkarte eines Elements.
`getInstance`	Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Registerkarteninstanz abrufen können. Sie können sie wie folgt verwenden: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statische Methode, die eine Tab-Instanz zurückgibt, die einem DOM-Element zugeordnet ist, oder eine neue erstellt, falls sie nicht initialisiert wurde. Sie können es wie folgt verwenden: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Wählt die angegebene Registerkarte aus und zeigt den zugehörigen Bereich an. Jede andere Registerkarte, die zuvor ausgewählt war, wird deaktiviert und der zugehörige Bereich wird ausgeblendet. Gibt an den Aufrufer zurück, bevor das Registerkartenfenster tatsächlich angezeigt wurde (dh bevor das `shown.bs.tab`Ereignis eintritt).

Veranstaltungen

Beim Anzeigen eines neuen Tabs werden die Ereignisse in der folgenden Reihenfolge ausgelöst:

hide.bs.tab(auf der aktuell aktiven Registerkarte)
show.bs.tab(auf dem anzuzeigenden Reiter)
hidden.bs.tab(auf der vorherigen aktiven Registerkarte dieselbe wie für das hide.bs.tabEreignis)
shown.bs.tab(auf dem neu aktivierten gerade gezeigten Tab, der gleiche wie für das show.bs.tabEreignis)

Wenn noch keine Registerkarte aktiv war, werden die Ereignisse hide.bs.tabund hidden.bs.tabnicht ausgelöst.

Ereignistyp	Beschreibung
`hide.bs.tab`	Dieses Ereignis wird ausgelöst, wenn ein neuer Tab angezeigt werden soll (und somit der vorherige aktive Tab ausgeblendet werden soll). Verwenden Sie `event.target`und `event.relatedTarget`, um auf die derzeit aktive Registerkarte bzw. die neue, bald aktive Registerkarte abzuzielen.
`hidden.bs.tab`	Dieses Ereignis wird ausgelöst, nachdem eine neue Registerkarte angezeigt wird (und somit die vorherige aktive Registerkarte ausgeblendet wird). Verwenden Sie `event.target`und `event.relatedTarget`, um auf die vorherige aktive Registerkarte bzw. die neue aktive Registerkarte zu zielen.
`show.bs.tab`	Dieses Ereignis wird bei der Registerkartenanzeige ausgelöst, aber bevor die neue Registerkarte angezeigt wurde. Verwenden Sie `event.target`und `event.relatedTarget`, um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen.
`shown.bs.tab`	Dieses Ereignis wird beim Anzeigen von Registerkarten ausgelöst, nachdem eine Registerkarte angezeigt wurde. Verwenden Sie `event.target`und `event.relatedTarget`, um auf die aktive Registerkarte bzw. die vorherige aktive Registerkarte (falls verfügbar) abzuzielen.

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