in English

Navs

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

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

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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" 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.role="tablist"role="tab"role="tabpanel"

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

Wann Dir eis JavaScript aus der Quell baut, brauchutil.js et .

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 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 de Tab JavaScript Plugin keng Tabbed-Interfaces ënnerstëtzt 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.

Plazhalter Inhalt fir d'Tab Panel. Dëst bezitt sech op den Home Tab. Huelt Iech Meilen héich, sou héich, well hatt huet dat en internationale Laachen. Do ass e Friemen a mengem Bett, et ass e Pound a mengem Kapp. Oh, nee. An engem anere Liewen géif ech Iech bleiwen. Well ech, ech sinn alles kapabel. Passt op meng Krounschluecht. Benotzt fir Ären Elteren Alkohol ze klauen an op den Daach ze klammen. Ton, tan fit a prett, dréit et erop well et schwéier gëtt. Hir Léift ass wéi en Drogen. Ech denken datt ech vergiess hunn datt ech e Choix hat.

Plazhalter Inhalt fir d'Tab Panel. Dëst bezitt sech op de Profil Tab. Dir hutt déi schéinsten Architektur. Passstempel, si ass kosmopolitesch. Schéin, frësch, hefteg, mir hunn et op Spär. Ni geplangt datt enges Daags ech dech géif verléieren. Si ësst Äert Häerz aus. Äre Kuss ass kosmesch, all Beweegung ass Magie. Ech mengen déi, ech mengen wéi si deen ass. Gréiss Léifsten loosst eis eng Rees maachen. Besëtz just d'Nuecht wéi de 4. Juli! Awer Dir gitt léiwer verschwend.

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>

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

De Tabs Plugin funktionnéiert och mat Pillen.

Plazhalter Inhalt fir d'Tab Panel. Dëst bezitt sech op den Home Tab. Huelt Iech Meilen héich, sou héich, well hatt huet dat en internationale Laachen. Do ass e Friemen a mengem Bett, et ass e Pound a mengem Kapp. Oh, nee. An engem anere Liewen géif ech Iech bleiwen. Well ech, ech sinn alles kapabel. Passt op meng Krounschluecht. Benotzt fir Ären Elteren Alkohol ze klauen an op den Daach ze klammen. Ton, tan fit a prett, dréit et erop well et schwéier gëtt. Hir Léift ass wéi en Drogen. Ech denken datt ech vergiess hunn datt ech e Choix hat.

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.

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

A mat vertikalen Pëllen.

Plazhalter Inhalt fir d'Tab Panel. Dëst bezitt sech op den Home Tab. Huet dech an der Stad de Blues gesongen. Kuckt Iech ëm d'Drain. Firwat léisst Dir mech net laanscht kommen? Heavy ass de Kapp deen d'Kroun dréit. Jo, mir maachen Engele kräischen, reenen op der Äerd vun uewen erof. Wëllt Dir d'Show an 3D gesinn, e Film. Fillt Dir jeemools, fillt Iech sou Pabeier dënn. Et ass e Jo oder Nee, nee vläicht.

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>

Benotzt Daten Attributer

Dir kënnt eng Tab oder Pille Navigatioun aktivéieren ouni JavaScript ze schreiwen andeems Dir einfach spezifizéiert data-toggle="tab"oder data-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-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>

Iwwer JavaScript

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

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

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

$('#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

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 .

$().tab

Aktivéiert e Tabelement an Inhaltsbehälter. Tab sollt entweder en data-targetoder, wann Dir e Link benotzt, en hrefAttribut hunn, deen e Containerknuet an der DOM zielt.

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

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

.tab('dispose')

Zerstéiert den Tab vun engem Element.

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.
gewisen.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. 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})