Wiesselt op den Haaptinhalt Wiesselt op d'Docs Navigatioun
in English

Navs an Tabs

Dokumentatioun an Beispiller fir wéi Dir Bootstrap's abegraff Navigatiounskomponenten benotzt.

Op dëser Säit

Base nav

Navigatioun verfügbar am Bootstrap deelt allgemeng Markup a Stiler, vun der .navBasisklass bis zu den aktiven an behënnerte Staaten. Tauscht Modifizéierungsklassen fir tëscht all Stil ze wiesselen.

D'Basiskomponent .navass mat Flexbox gebaut a bitt e staarke Fundament fir all Zorte vu Navigatiounskomponenten ze bauen. Et enthält e puer Stil Iwwerschreiden (fir mat Lëschten ze schaffen), e puer Linkpadding fir méi grouss Hitberäicher, a Basis behënnert Styling.

D'Basiskomponent .naventhält kee .activeStaat. Déi folgend Beispiller enthalen d'Klass, haaptsächlech fir ze weisen datt dës speziell Klass kee spezielle Styling ausléist.

Fir den aktiven Zoustand un Hëllefstechnologien ze vermëttelen, benotzt den aria-currentAttribut - benotzt de pageWäert fir déi aktuell Säit, oder truefir den aktuellen Artikel an engem Set.

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

Klasse ginn uechter benotzt, sou datt Är Markup super flexibel ka sinn. Benotzt <ul>s wéi uewen, <ol>wann d'Uerdnung vun Ären Artikelen wichteg ass, oder rullt Är eege mat engem <nav>Element. Well d' .navUwendungen display: flex, behuelen d'Nav-Links d'selwecht wéi d'Nav-Elementer, awer ouni den extra 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ügbar Stiler

Änneren de Stil vun .navs Komponente mat modifiers an Utilities. Mix a passt wéi néideg, oder baut Är eege.

Horizontal Ausrichtung

Ännert déi horizontal Ausrichtung vun Ärem Nav mat Flexbox Utilities . Par défaut sinn navs lénks ausgeriicht, awer Dir kënnt se einfach an d'Mëtt oder riets ausgeriicht änneren.

Zentréiert mat .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>

Recht ausgeriicht mat .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

Stack Är Navigatioun andeems Dir d'Flex Artikel Richtung mam .flex-columnUtility ännert. Muss se op e puer Viewports stackelen awer net anerer? Benotzt déi reaktiounsfäeger Versiounen (zB .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>

Wéi ëmmer ass vertikal Navigatioun och ouni <ul>s méiglech.

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

Tabs

Huelt d'Basisnavigatioun vun uewen a füügt d' .nav-tabsKlass un fir e Tabbed-Interface ze generéieren. Benotzt se fir Tabbar Regiounen mat eisem Tab JavaScript Plugin ze kreéieren .

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

Pëllen

Huelt datselwecht HTML, awer benotzt .nav-pillsamplaz:

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

Fëllt a justifiéiert

Kraaft Ären .navInhalt fir déi voll verfügbar Breet eng vun zwou Modifikatiounsklassen ze verlängeren. Fir proportional all verfügbare Raum mat Äre .nav-items ze fëllen, benotzt .nav-fill. Notéiert datt all horizontal Plaz besat ass, awer net all nav Element huet déi selwecht Breet.

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

Wann Dir eng <nav>-baséiert Navigatioun benotzt, kënnt Dir sécher ausgoen, .nav-itemwell nëmmen .nav-linknéideg ass fir Styling <a>Elementer.

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

Fir Elementer mat gläiche Breet, benotzt .nav-justified. All horizontal Plaz gëtt vun nav Linken besat ginn, mee am Géigesaz zu der .nav-filluewen, all nav Element wäert déi selwecht Breet ginn.

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

Ähnlech zum .nav-fillBeispill mat enger <nav>-baséierter Navigatioun.

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

Schafft mat Flex Utilities

Wann Dir reaktiounsfäeger nav Variatiounen braucht, betruecht eng Serie vu Flexbox Utilities ze benotzen . Wärend méi verbose, bidden dës Utilities méi Personnalisatioun iwwer reaktiounsfäeger Breakpoints. Am Beispill hei drënner gëtt eis nav um ënneschten Breakpoint gestapelt, dann un engem horizontalen Layout adaptéieren, deen déi verfügbar Breet fëllt aus dem klenge Breakpunkt.

<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 Accessibilitéit

Wann Dir Navs benotzt fir eng Navigatiounsbar ze bidden, gitt sécher datt Dir en role="navigation"an de logeschsten Elterenbehälter vun der <ul>bäidréit oder en <nav>Element ëm d'ganz Navigatioun wéckelt. Füügt d'Roll net un d' <ul>Selbst, well dëst verhënnert datt se als aktuell Lëscht vun Hëllefstechnologien ugekënnegt gëtt.

Notéiert datt d'Navigatiounsbaren, och wa visuell als Tabs mat der .nav-tabsKlass styléiert sinn, keng , oder Attributer ginn . Dës sinn nëmme passend fir dynamesch Tabbed-Interfaces, wéi an de WAI ARIA Authoring Practices beschriwwen . Gesinn JavaScript Verhalen fir dynamesch tabbed Schnëttplazen an dëser Rubrik fir e Beispill. Den Attribut ass net néideg op dynamesche Tabbed-Interfaces, well eise JavaScript de gewielte Staat behandelt andeems Dir op den aktive Tab bäidréit.role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Benotzt Dropdowns

Füügt Dropdown-Menüen mat e bëssen extra HTML an den Dropdowns JavaScript Plugin .

Tabs mat 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 mat 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 Verhalen

Benotzt den Tab JavaScript Plugin - enthält se individuell oder duerch d'kompiléiert bootstrap.jsDatei - fir eis Navigatioun Tabs a Pëllen ze verlängeren fir Tabbar Panels vum lokalen Inhalt ze kreéieren.

Dynamesch Tabbed-Interfaces, wéi an de WAI ARIA Authoring Practices beschriwwen , erfuerderen role="tablist", role="tab", role="tabpanel", an zousätzlech aria-Attributer fir hir Struktur, Funktionalitéit an aktuellen Zoustand un d'Benotzer vun Hëllefstechnologien (wéi Écran Lieser) ze vermëttelen. Als bescht Praxis recommandéiere mir <button>Elementer fir d'Tabs ze benotzen, well dës Kontrollen sinn déi eng dynamesch Ännerung ausléisen, anstatt Linken déi op eng nei Säit oder Plaz navigéieren.

Bedenkt datt dynamesch Tabbed-Interfaces keng Dropdown-Menüen enthalen, well dëst souwuel Benotzerfrëndlechkeet wéi Accessibilitéitsprobleemer verursaacht. Aus enger Usability Perspektiv, kann d'Tatsaach, datt de Moment ugewisen Tab d'Ausléiser Element net direkt sichtbar ass (wéi et am zougemaach Dropdown-Menü) Duercherneen féieren kann. Aus enger Accessibilitéit Siicht gëtt et de Moment kee verstännege Wee fir dës Zort Konstruktioun op e Standard WAI ARIA Muster ze mapen, dat heescht datt et net einfach verständlech fir d'Benotzer vun Hëllefstechnologien ka gemaach ginn.

Dëst ass e puer Plazhalter Inhalt vum Home Tab ass verbonnen Inhalt. Wann Dir op eng aner Tab klickt, wiesselt d'Visibilitéit vun dësem fir déi nächst. D'Tab JavaScript wiesselt Klassen fir den Inhalt Visibilitéit a Styling ze kontrolléieren. Dir kënnt et mat Tabs, Pëllen an all aner .navugedriwwe Navigatioun benotzen.

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>

Fir ze hëllefen Är Bedierfnesser ze passen, funktionnéiert dëst mat <ul>-baséiert Markup, wéi uewen gewisen, oder mat all arbiträr "Roll Ären eegene" Markup. Bedenkt datt wann Dir benotzt <nav>, Dir sollt net role="tablist"direkt derbäi addéieren, well dëst d'native Roll vum Element als Navigatiounslandmark iwwerschreift. Amplaz, schalt op en alternativen Element (am Beispill hei ënnendrënner, eng einfach <div>) a wéckelt der <nav>ronderëm.

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

De Tabs Plugin funktionnéiert och mat Pillen.

Dëst ass e puer Plazhalter Inhalt vum Home Tab ass verbonnen Inhalt. Wann Dir op eng aner Tab klickt, wiesselt d'Visibilitéit vun dësem fir déi nächst. D'Tab JavaScript wiesselt Klassen fir den Inhalt Visibilitéit a Styling ze kontrolléieren. Dir kënnt et mat Tabs, Pëllen an all aner .navugedriwwe Navigatioun benotzen.

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

A mat vertikalen Pëllen.

Dëst ass e puer Plazhalter Inhalt vum Home Tab ass verbonnen Inhalt. Wann Dir op eng aner Tab klickt, wiesselt d'Visibilitéit vun dësem fir déi nächst. D'Tab JavaScript wiesselt Klassen fir den Inhalt Visibilitéit a Styling ze kontrolléieren. Dir kënnt et mat Tabs, Pëllen an all aner .navugedriwwe Navigatioun benotzen.

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

Benotzt Daten Attributer

Dir kënnt eng Tab oder Pille Navigatioun aktivéieren ouni JavaScript ze schreiwen andeems Dir einfach spezifizéiert data-bs-toggle="tab"oder data-bs-toggle="pill"op en Element. Benotzt dës Donnéeën Attributer op .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>

Iwwer JavaScript

Aktivéiert Tabbar Tabs iwwer JavaScript (all Tab muss individuell aktivéiert ginn):

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

Dir kënnt eenzel Tabs op verschidde Manéieren aktivéieren:

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

Fir d'Tabs ze verschwannen, füügt .fadeall .tab-pane. Déi éischt Tab-Säit muss och .showden initialen Inhalt siichtbar maachen.

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" 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

Asynchron Methoden an Iwwergäng

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

Kuckt eis JavaScript Dokumentatioun fir méi Informatioun .

constructor

Aktivéiert e Tabelement an Inhaltsbehälter. Tab soll entweder en data-bs-targetoder, wann Dir e Link benotzt, en hrefAttribut hunn, zielt op e Container Node an der DOM.

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

weisen

Wielt déi uginn Tab a weist seng assoziéiert Fënster. All aner Tab, déi virdru gewielt gouf, gëtt net ausgewielt a seng assoziéiert Fënster ass verstoppt. Gëtt zréck op den Uruffer ier d'Tab-Pane tatsächlech gewisen gouf (dh ier d' shown.bs.tabEvenement geschitt ass).

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

  tab.show()

entsuergen

Zerstéiert den Tab vun engem Element.

getInstanz

Statesch Method déi Iech erlaabt d'Tab Instanz mat engem DOM Element assoziéiert ze kréien

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

getOrCreateInstance

Statesch Method déi Iech erlaabt d'Tab-Instanz mat engem DOM-Element assoziéiert ze kréien, oder eng nei ze kreéieren am Fall wou se net initialiséiert gouf

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

Evenementer

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

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

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

Event Typ Beschreiwung
show.bs.tab Dëst Event brennt op Tab Show, awer ier déi nei Tab gewisen gouf. Benotzt event.targeta event.relatedTargetfir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.
shown.bs.tab Dëst Event brennt op Tab Show nodeems eng Tab gewisen gouf. Benotzt event.targeta event.relatedTargetfir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.
hide.bs.tab Dëst Event brennt wann en neien Tab soll ugewise ginn (an dofir ass de fréiere aktive Tab verstoppt). Benotzt event.targeta event.relatedTargetfir den aktuellen aktive Tab an déi nei geschwënn aktiv Tab, respektiv.
hidden.bs.tab Dësen Event brennt nodeems en neien Tab ugewise gëtt (an domat ass de fréiere aktive Tab verstoppt). Benotzt event.targeta event.relatedTargetfir déi viregt aktive Tab an déi nei aktiv Tab ze zielen, respektiv. 
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
})