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.

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>

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.

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

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>

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

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

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>

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

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>

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 .

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>

Pëllen

Huelt datselwecht HTML, awer benotzt .nav-pillsamplaz:

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>

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.

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>

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.

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>

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.

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>

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

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>

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.

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 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 Tabs-Interfaces, wéi am ARIA Authoring Practices Guide Tabs Muster 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

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

Dobäi an v5.2.0

Als Deel vum Bootstrap senger evoluéierender CSS Variablen Approche, benotzen navs elo lokal CSS Variablen op .nav, .nav-tabs, a .nav-pillsfir verstäerkte Echtzäit Personnalisatioun. Wäerter fir d'CSS Variablen ginn iwwer Sass gesat, sou datt Sass Personnalisatioun och nach ëmmer ënnerstëtzt gëtt.

An der .navBasis Klass:

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

An der .nav-tabsModifikateur Klass:

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

An der .nav-pillsModifikateur Klass:

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

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.

Dëst ass e puer Plazhalter Inhalt vum Profil 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 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>

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.

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>

De Tabs Plugin funktionnéiert och mat 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>

A mat vertikalen Pëllen. Idealerweis, fir vertikale Tabs, sollt Dir och aria-orientation="vertical"an den Tab Lëscht Container addéieren.

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>

Accessibilitéit

Dynamesch Tabs-Interfaces, wéi am ARIA Authoring Practices Guide Tabs Muster 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 Assistenztechnologien (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.

Am Aklang mam ARIA Authoring Practices Muster, kritt nëmmen déi aktuell aktiv Tab Tastaturfokus. Wann de JavaScript Plugin initialiséiert ass, gëtt et tabindex="-1"op all inaktiv Tab Kontrollen agestallt. Wann déi aktuell aktiv Tab konzentréiert ass, aktivéieren d'Cursor Schlësselen déi viregt / nächst Tab, mam Plugin ännert d' Rovingtabindex entspriechend. Wéi och ëmmer, bemierkt datt de JavaScript Plugin net tëscht horizontalen a vertikale Tablëschten ënnerscheet wann et ëm Cursorschlëssel Interaktiounen kënnt: onofhängeg vun der Orientéierung vun der Tablist, souwuel den erop a lénksen Cursor op déi viregt Tab, an erof a riets Cursor op déi nächst Tab.

Am Allgemengen, fir d'Tastaturnavigatioun ze erliichteren, ass et recommandéiert d'Tabpanele selwer och fokusséierbar ze maachen, ausser datt dat éischt Element mat sënnvollen Inhalt an der Tab Panel scho fokussbar ass. De JavaScript Plugin probéiert net dësen Aspekt ze handhaben - wa passend, musst Dir Är Tab Panels explizit fokusséierbar maachen andeems Dir tabindex="0"Är Markup bäidréit.

De Tab JavaScript Plugin ënnerstëtzt keng Tabs-Interfaces déi Dropdown-Menüen enthalen, well dës souwuel Benotzerfrëndlechkeet wéi Accessibilitéitsprobleemer verursaachen. 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.

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

Iwwer JavaScript

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

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

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

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

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

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

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 .

Aktivéiert Ären Inhalt als Tab Element.

Dir kënnt eng Tab Instanz mam Konstruktor erstellen, zum Beispill:

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

Method	Beschreiwung
`dispose`	Zerstéiert den Tab vun engem Element.
`getInstance`	Statesch Method déi Iech erlaabt d'Tab Instanz mat engem DOM Element assoziéiert ze kréien, Dir kënnt et esou benotzen: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statesch Method déi eng Tab-Instanz zréckginn, déi mat engem DOM-Element assoziéiert ass oder eng nei erstellt am Fall wou se net initialiséiert gouf. Dir kënnt et esou benotzen `bootstrap.Tab.getOrCreateInstance(element)`:.
`show`	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.tab`Evenement geschitt ass).

Evenementer

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

hide.bs.tab(op der aktueller aktiver Tab)
show.bs.tab(op der Tab ze weisen)
hidden.bs.tab(op der viregter aktiver Tab, déi selwecht wéi fir den hide.bs.tabEvent)
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
`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.target`a `event.relatedTarget`fir 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.target`a `event.relatedTarget`fir déi viregt aktive Tab an déi nei aktiv Tab ze zielen, respektiv.
`show.bs.tab`	Dëst Event brennt op Tab Show, awer ier déi nei Tab gewisen gouf. Benotzt `event.target`a `event.relatedTarget`fir 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.target`a `event.relatedTarget`fir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.

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