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.

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

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

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

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

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

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

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

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

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

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

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

<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 Flex-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 Navi auf dem niedrigsten Haltepunkt gestapelt und passt sich dann an ein horizontales Layout an, das die verfügbare Breite ab dem kleinen Haltepunkt ausfüllt.

<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 in den WAI ARIA Authoring Practices 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

<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

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

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:                    $link-color;
$nav-link-hover-color:              $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.

Dynamische Benutzeroberflächen mit Registerkarten, wie in den WAI ARIA Authoring Practices beschrieben , erfordern role="tablist", role="tab", role="tabpanel", und zusätzliche aria-Attribute, um ihre Struktur, Funktionalität und ihren aktuellen Status Benutzern von Hilfstechnologien (z. B. Screenreadern) 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.

Beachten Sie, dass dynamische Benutzeroberflächen mit Registerkarten keine Dropdown-Menüs enthalten sollten, da dies sowohl Benutzerfreundlichkeits- als auch Zugänglichkeitsprobleme verursacht. 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.

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.

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

<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="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</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 .

<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>
  </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">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Das Tabs-Plugin funktioniert auch mit Pillen.

<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>
</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">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

Und mit vertikalen Pillen.

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-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">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

Verwenden von Datenattributen

Sie können eine Tab- oder Pill-Navigation 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">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Über JavaScript

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

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Sie können einzelne Registerkarten auf verschiedene Arten aktivieren:

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

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

Fade-Effekt

Um Tabulatoren einzublenden, fügen Sie .fadejedem 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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</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 .

constructor

Aktiviert ein Registerkartenelement und einen Inhaltscontainer. Tab sollte entweder ein data-bs-targetoder, falls ein Link verwendet wird, ein hrefAttribut haben, das auf einen Container-Knoten im DOM abzielt.

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

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

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

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.tabEreignis eintritt).

  var someTabTriggerEl = document.querySelector('#someTabTrigger')
  var tab = new bootstrap.Tab(someTabTriggerEl)

  tab.show()

entsorgen

Zerstört die Registerkarte eines Elements.

bekomme Instanz

Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Registerkarteninstanz abrufen können

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

getOrCreateInstance

Statische Methode, mit der Sie die mit einem DOM-Element verknüpfte Registerkarteninstanz abrufen oder eine neue erstellen können, falls sie nicht initialisiert wurde

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

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

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})