Navis und Tabs

Dokumentation und Beispiele für die Verwendung der enthaltenen Navigationskomponenten von Bootstrap.

Auf dieser Seite

Basisnavigation

Die in Bootstrap verfügbare Navigation teilt allgemeines Markup und Stile, von der Basisklasse .navbis zu den aktiven und deaktivierten Zuständen. Tauschen Sie Modifikatorklassen aus, um zwischen den einzelnen Stilen zu wechseln.

Die .navBasiskomponente wird mit Flexbox erstellt und bietet eine solide Grundlage für die Erstellung aller Arten von Navigationskomponenten. Es enthält einige Stilüberschreibungen (für die Arbeit mit Listen), etwas Link-Padding für größere Trefferbereiche und grundlegende deaktivierte Stile.

Die .navBasiskomponente enthält keinen .activeZustand. Die folgenden Beispiele beinhalten die Klasse, hauptsächlich um zu demonstrieren, dass diese bestimmte Klasse kein spezielles Styling auslöst.

Um den aktiven Zustand an Hilfstechnologien zu übermitteln, verwenden Sie das aria-currentAttribut – mit dem pageWert für die aktuelle Seite oder truefür das aktuelle Element in einem Satz.

html

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Klassen werden durchgehend verwendet, sodass Ihr Markup super flexibel sein kann. Verwenden Sie <ul>s wie oben, <ol>wenn die Reihenfolge Ihrer Artikel wichtig ist, oder rollen Sie Ihre eigenen mit einem <nav>Element. Da die .navuses verwendet display: flexwerden, verhalten sich die Navigationslinks genauso wie Navigationselemente, jedoch ohne das zusätzliche Markup.

html

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Verfügbare Stile

Ändern Sie den Stil der .navs-Komponente mit Modifikatoren und Dienstprogrammen. Mischen und kombinieren Sie nach Bedarf oder erstellen Sie Ihre eigenen.

Horizontale Ausrichtung

Ändern Sie die horizontale Ausrichtung Ihres Navigationssystems mit den Flexbox-Dienstprogrammen . Standardmäßig sind Navs linksbündig ausgerichtet, aber Sie können sie einfach in zentriert oder rechtsbündig ändern.

Zentriert mit .justify-content-center:

html

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Rechtsbündig mit .justify-content-end:

html

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Vertikal

Stapeln Sie Ihre Navigation, indem Sie die Flex-Item-Richtung mit dem .flex-columnDienstprogramm ändern. Müssen Sie sie in einigen Ansichtsfenstern stapeln, in anderen nicht? Verwenden Sie die responsiven Versionen (z . B. .flex-sm-column).

html

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Vertikale Navigation ist wie immer auch ohne <ul>s möglich.

html

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Registerkarten

Nimmt die grundlegende Navigation von oben und fügt die .nav-tabsKlasse hinzu, um eine Oberfläche mit Registerkarten zu generieren. Verwenden Sie sie, um Tab-fähige Bereiche mit unserem Tab-JavaScript-Plugin zu erstellen .

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Pillen

Nehmen Sie denselben HTML-Code, aber verwenden Sie .nav-pillsstattdessen:

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Ausfüllen und begründen

Zwingen Sie den Inhalt Ihrer .nav, die volle verfügbare Breite zu erweitern, eine von zwei Modifikatorklassen. .nav-itemUm den gesamten verfügbaren Platz proportional mit Ihren s zu füllen , verwenden Sie .nav-fill. Beachten Sie, dass der gesamte horizontale Raum belegt ist, aber nicht alle Navigationselemente die gleiche Breite haben.

html

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Wenn Sie eine <nav>-basierte Navigation verwenden, können Sie getrost weglassen, .nav-itemda dies nur für Styling- Elemente .nav-linkerforderlich ist .<a>

html

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Verwenden Sie für gleich breite Elemente .nav-justified. Der gesamte horizontale Platz wird von Navigationslinks eingenommen, aber im Gegensatz zu den .nav-filloben genannten Elementen hat jedes Navigationselement die gleiche Breite.

html

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Ähnlich dem .nav-fillBeispiel mit einer <nav>-basierten Navigation.

html

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Arbeiten mit flexiblen Dienstprogrammen

Wenn Sie reaktionsschnelle Navigationsvarianten benötigen, sollten Sie eine Reihe von Flexbox-Dienstprogrammen verwenden . Diese Dienstprogramme sind zwar ausführlicher, bieten jedoch eine größere Anpassungsfähigkeit über reaktionsschnelle Haltepunkte hinweg. Im Beispiel unten wird unser Nav auf dem niedrigsten Haltepunkt gestapelt und dann an ein horizontales Layout angepasst, das die verfügbare Breite ab dem kleinen Haltepunkt ausfüllt.

html

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

Apropos Barrierefreiheit

Wenn Sie Navs verwenden, um eine Navigationsleiste bereitzustellen, stellen Sie sicher, dass Sie ein role="navigation"zum logischsten übergeordneten Container der hinzufügen oder ein Element um die gesamte Navigation <ul>wickeln . <nav>Fügen Sie die Rolle nicht zu <ul>sich selbst hinzu, da dies verhindern würde, dass sie von Hilfstechnologien als tatsächliche Liste angekündigt wird.

Beachten Sie, dass Navigationsleisten, selbst wenn sie visuell als Registerkarten mit der .nav-tabsKlasse gestaltet sind, keine , oder -Attribute erhalten role="tablist"sollten . Diese sind nur für dynamische Schnittstellen mit Registerkarten geeignet, wie im Tabs-Muster des ARIA Authoring Practices Guide beschrieben . Ein Beispiel finden Sie in diesem Abschnitt unter JavaScript - Verhalten für dynamische Schnittstellen mit Registerkarten. Das Attribut ist auf dynamischen Schnittstellen mit Registerkarten nicht erforderlich, da unser JavaScript den ausgewählten Zustand durch Hinzufügen auf der aktiven Registerkarte verarbeitet.role="tab"role="tabpanel"aria-currentaria-selected="true"

Verwenden von Dropdowns

Fügen Sie Dropdown-Menüs mit etwas zusätzlichem HTML und dem Dropdown-JavaScript-Plugin hinzu .

Registerkarten mit Dropdowns

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Pillen mit Dropdowns

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

CSS

Variablen

Hinzugefügt in v5.2.0

Als Teil des sich entwickelnden CSS-Variablen-Ansatzes von Bootstrap verwenden Navs jetzt lokale CSS-Variablen für .nav, .nav-tabs, und .nav-pillsfü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.

In der .navBasisklasse:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

In der .nav-tabsModifikatorklasse:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

In der .nav-pillsModifikatorklasse:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sass-Variablen

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}link-hover-color);
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

JavaScript-Verhalten

Verwenden Sie das Tab-JavaScript-Plug-in – binden Sie es einzeln oder über die kompilierte bootstrap.jsDatei ein – um unsere Navigations-Tabs und -Pillen zu erweitern, um Tab-Fenster mit lokalen Inhalten zu erstellen.

Dies ist ein Platzhalterinhalt, der dem Home-Tab zugeordneten Inhalt ist. Durch Klicken auf eine andere Registerkarte wird die Sichtbarkeit dieser für die nächste umgeschaltet. Die Registerkarte JavaScript tauscht Klassen aus, um die Sichtbarkeit und Gestaltung von Inhalten zu steuern. Sie können es mit Registerkarten, Pillen und jeder anderen .navNavigation verwenden.

Dies ist ein Platzhalterinhalt, der dem Profil-Tab zugeordnete Inhalte sind. Durch Klicken auf eine andere Registerkarte wird die Sichtbarkeit dieser für die nächste umgeschaltet. Die Registerkarte JavaScript tauscht Klassen aus, um die Sichtbarkeit und Gestaltung von Inhalten zu steuern. Sie können es mit Registerkarten, Pillen und jeder anderen .navNavigation verwenden.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

Um Ihren Anforderungen gerecht zu werden, funktioniert dies mit <ul>-basiertem Markup, wie oben gezeigt, oder mit jedem beliebigen „roll your own“-Markup. Beachten Sie, dass Sie bei Verwendung <nav>von nicht direkt etwas hinzufügen sollten role="tablist", da dies die native Rolle des Elements als Orientierungspunkt für die Navigation außer Kraft setzen würde. Wechseln Sie stattdessen zu einem alternativen Element (im Beispiel unten ein einfaches <div>) und umschließen <nav>Sie es mit .

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Das Tabs-Plugin funktioniert auch mit Pillen.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Und mit vertikalen Pillen. Idealerweise sollten Sie für vertikale Registerkarten auch aria-orientation="vertical"den Tab-Listen-Container hinzufügen.

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Barrierefreiheit

Dynamische Benutzeroberflächen mit Registerkarten, wie im ARIA Authoring Practices Guide tabs pattern beschrieben , erfordern role="tablist", role="tab", role="tabpanel"und zusätzliche aria-Attribute, um ihre Struktur, Funktionalität und ihren aktuellen Zustand Benutzern von Hilfstechnologien (wie z. B. Bildschirmleseprogrammen) zu vermitteln. Als Best Practice empfehlen wir die Verwendung von <button>Elementen für die Registerkarten, da es sich hierbei um Steuerelemente handelt, die eine dynamische Änderung auslösen, und nicht um Links, die zu einer neuen Seite oder Position navigieren.

In Übereinstimmung mit dem ARIA Authoring Practices-Muster erhält nur die derzeit aktive Registerkarte den Tastaturfokus. Wenn das JavaScript-Plugin initialisiert wird, wird es tabindex="-1"auf alle inaktiven Registerkartensteuerelemente gesetzt. Sobald die derzeit aktive Registerkarte den Fokus hat, aktivieren die Cursortasten die vorherige/nächste Registerkarte, wobei das Plugin das Rovingtabindex entsprechend ändert. Beachten Sie jedoch, dass das JavaScript-Plugin nicht zwischen horizontalen und vertikalen Tab-Listen unterscheidet, wenn es um die Interaktionen der Cursortasten geht: Unabhängig von der Ausrichtung der Tab-Liste gehen sowohl der Aufwärts- als auch der Links-Cursor zum vorherigen Tab und der Abwärts- und der Rechts-Cursor zu die nächste Registerkarte.

Im Allgemeinen wird zur Erleichterung der Tastaturnavigation empfohlen, auch die Registerkarten selbst fokussierbar zu machen, es sei denn, das erste Element mit sinnvollem Inhalt innerhalb der Registerkarten ist bereits fokussierbar. Das JavaScript-Plug-in versucht nicht, diesen Aspekt zu behandeln – gegebenenfalls müssen Sie Ihre Tab-Panels explizit fokussierbar machen, indem tabindex="0"Sie Ihr Markup hinzufügen.

Das Tab-JavaScript -Plug-in unterstützt keine Schnittstellen mit Registerkarten, die Dropdown-Menüs enthalten, da diese sowohl Benutzerfreundlichkeits- als auch Zugänglichkeitsprobleme verursachen. Aus Sicht der Benutzerfreundlichkeit kann die Tatsache, dass das Auslöseelement der aktuell angezeigten Registerkarte nicht sofort sichtbar ist (da es sich innerhalb des geschlossenen Dropdown-Menüs befindet), Verwirrung stiften. Aus Sicht der Zugänglichkeit gibt es derzeit keine sinnvolle Möglichkeit, ein solches Konstrukt auf ein Standard-WAI-ARIA-Muster abzubilden, sodass es für Benutzer von assistiven Technologien nicht ohne weiteres verständlich gemacht werden kann.

Verwenden von Datenattributen

Sie können eine Registerkarten- oder Pillennavigation aktivieren, ohne JavaScript zu schreiben, indem Sie einfach data-bs-toggle="tab"oder data-bs-toggle="pill"für ein Element angeben. Verwenden Sie diese Datenattribute auf .nav-tabsoder .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Über JavaScript

Aktivieren Sie Tabs über JavaScript (jede Registerkarte muss einzeln aktiviert werden):

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

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

Sie können einzelne Registerkarten auf verschiedene Arten aktivieren:

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Fade-Effekt

Um Tabulatoren 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" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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 tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})