Navis

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

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.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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.role="tab"role="tabpanel"

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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

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.

Wenn Sie unser JavaScript aus der Quelle erstellenutil.js , ist .

Dynamische Benutzeroberflächen mit Registerkarten, wie im Tabmuster des ARIA Authoring Practices Guide 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. 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 das Tab-JavaScript -Plug-in keine Schnittstellen mit Registerkarten unterstützt, 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.

Platzhalterinhalt für das Registerkartenfeld. Dieser bezieht sich auf den Home-Tab. Bringt dich meilenweit hoch, so hoch, weil sie dieses eine internationale Lächeln hat. Da ist ein Fremder in meinem Bett, da dröhnt es in meinem Kopf. Ach nein. In einem anderen Leben würde ich dich zum Bleiben bringen. Denn ich, ich bin zu allem fähig. Anziehen für meinen krönenden Kampf. Wird verwendet, um den Schnaps deiner Eltern zu stehlen und aufs Dach zu klettern. Ton, tan fit und bereit, dreh es auf, denn es wird schwer. Ihre Liebe ist wie eine Droge. Ich schätze, dass ich vergessen habe, dass ich eine Wahl hatte.

Platzhalterinhalt für das Registerkartenfeld. Dieser bezieht sich auf die Registerkarte Profil. Sie haben die feinste Architektur. Passstempel, sie ist weltoffen. Gut, frisch, wild, wir haben es auf Verschluss. Nie geplant, dass ich dich eines Tages verlieren würde. Sie frisst dein Herz heraus. Dein Kuss ist kosmisch, jede Bewegung ist magisch. Ich meine die, ich meine, als wäre sie die Eine. Grüße ihr Lieben, lasst uns eine Reise unternehmen. Besitzen Sie einfach die Nacht wie den 4. Juli! Aber du willst lieber verschwendet werden.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 .

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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.

Platzhalterinhalt für das Registerkartenfeld. Dieser bezieht sich auf den Home-Tab. Habe gesehen, wie du in der Innenstadt den Blues gesungen hast. Beobachten Sie, wie Sie den Abfluss umrunden. Warum lässt du mich nicht vorbeikommen? Schwer ist der Kopf, der die Krone trägt. Ja, wir bringen Engel zum Weinen, die von oben auf die Erde regnen. Willst du die Show in 3D sehen, einen Film. Fühlst du dich jemals so dünn wie Papier? Es ist ein ja oder nein, nein vielleicht.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

Verwenden von Datenattributen

Sie können eine Tab- oder Pill-Navigation aktivieren, ohne JavaScript zu schreiben, indem Sie einfach data-toggle="tab"oder data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Sie können einzelne Registerkarten auf verschiedene Arten aktivieren:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 .

$().tab

Aktiviert ein Registerkartenelement und einen Inhaltscontainer. Tab sollte entweder ein data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('zeigen')

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

$('#someTab').tab('show')

.tab('entsorgen')

Zerstört die Registerkarte eines Elements.

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.
gezeigt.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.
verstecken.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.
versteckt.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.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})