Nav

Dokumentácia a príklady, ako používať navigačné komponenty zahrnuté v Bootstrape.

Základná navigácia

Navigácia dostupná v Bootstrap zdieľa všeobecné značky a štýly, od základnej .navtriedy až po aktívne a zakázané stavy. Vymeňte triedy modifikátorov na prepínanie medzi jednotlivými štýlmi.

Základný .navkomponent je vyrobený z flexboxu a poskytuje pevný základ pre stavbu všetkých typov navigačných komponentov. Zahŕňa niektoré prepísania štýlu (na prácu so zoznamami), niektoré výplne odkazov pre väčšie oblasti prístupu a základné vypnuté štýly.

Základný .navkomponent neobsahuje žiadny .activestav. Nasledujúce príklady zahŕňajú triedu, hlavne aby demonštrovali, že táto konkrétna trieda nespúšťa žiadny špeciálny štýl.

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

Triedy sa používajú všade, takže vaše označenie môže byť super flexibilné. Použite <ul>s ako vyššie, <ol>ak je poradie vašich položiek dôležité, alebo hodte svoje vlastné s <nav>prvkom. Vzhľadom na .navpoužitie display: flexsa navigačné odkazy správajú rovnako ako navigačné položky, ale bez dodatočných značiek.

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

Dostupné štýly

Zmeňte štýl .navkomponentu s pomocou modifikátorov a pomôcok. Miešajte a kombinujte podľa potreby alebo si vytvorte vlastné.

Horizontálne zarovnanie

Zmeňte vodorovné zarovnanie navigácie pomocou nástrojov flexbox . V predvolenom nastavení sú navigačné panely zarovnané doľava, ale môžete ich jednoducho zmeniť na stred alebo doprava.

Vycentrované s .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>

Zarovnané vpravo s .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>

Vertikálne

Usporiadajte svoju navigáciu zmenou smeru flexibilných položiek pomocou .flex-columnpomôcky. Potrebujete ich naskladať na niektoré výrezy, ale na iné nie? Použite responzívne verzie (napr. .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>

Ako vždy, vertikálna navigácia je možná <ul>aj bez s.

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

Karty

Prevezme základnú navigáciu zhora a pridá .nav-tabstriedu na vytvorenie rozhrania s kartami. Použite ich na vytvorenie tablovateľných oblastí pomocou nášho doplnku JavaScript na karte .

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

Tabletky

Vezmite rovnaký kód HTML, ale .nav-pillsnamiesto toho použite:

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

Vyplňte a zdôvodnite

Vynútite, aby obsah vášho súboru .navrozšíril celú dostupnú šírku jednej z dvoch tried modifikátorov. Ak chcete proporcionálne vyplniť všetok dostupný priestor pomocou .nav-items, použite .nav-fill. Všimnite si, že všetok horizontálny priestor je obsadený, ale nie každá navigačná položka má rovnakú šírku.

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

Keď používate <nav>navigáciu založenú na princípe, môžete pokojne vynechať .nav-item, pretože .nav-linksa vyžaduje iba pre prvky štýlu <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>

Pre prvky s rovnakou šírkou použite .nav-justified. Všetok horizontálny priestor bude obsadený navigačnými prepojeniami, ale na rozdiel od .nav-fillvyššie uvedeného bude mať každá navigačná položka rovnakú šírku.

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

Podobne ako v .nav-fillpríklade s použitím <nav>navigácie založenej na.

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

Práca s flexibilnými nástrojmi

Ak potrebujete responzívne variácie navigácie, zvážte použitie série nástrojov flexbox . Aj keď sú tieto nástroje podrobnejšie, ponúkajú väčšie prispôsobenie naprieč citlivými bodmi prerušenia. V nižšie uvedenom príklade bude naša navigácia naskladaná na najnižší bod prerušenia a potom sa prispôsobí horizontálnemu rozloženiu, ktoré vyplní dostupnú šírku počnúc malým bodom prerušenia.

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

Čo sa týka dostupnosti

Ak na poskytovanie navigačného panela používate navigácie, nezabudnite pridať role="navigation"do najlogickejšieho nadradeného kontajnera <ul>, alebo obklopiť <nav>prvok okolo celej navigácie. Nepridávajte rolu k <ul>samotnej úlohe, pretože by to zabránilo jej oznámeniu ako skutočného zoznamu pomocnými technológiami.

Všimnite si, že navigačné panely, aj keď sú vizuálne štylizované ako karty s .nav-tabstriedou, by nemali mať atribúty role="tablist", role="tab"alebo role="tabpanel"atribúty. Tieto sú vhodné len pre rozhrania s dynamickými kartami, ako je popísané vo vzore kariet ARIA Authoring Practices Guide . Príklad nájdete v časti Správanie JavaScriptu pre rozhrania s dynamickými kartami v tejto časti.

Pomocou rozbaľovacích ponúk

Pridajte rozbaľovacie ponuky s trochou kódu HTML navyše a rozbaľovacím doplnkom JavaScript .

Karty s rozbaľovacími ponukami

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

Pilulky s rozbaľovacími zoznamami

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

Správanie JavaScriptu

Použite zásuvný modul JavaScript pre karty – zahrňte ho jednotlivo alebo prostredníctvom skompilovaného bootstrap.jssúboru – na rozšírenie našich navigačných kariet a piluliek na vytváranie tabel miestneho obsahu.

Ak vytvárate náš JavaScript zo zdroja, vyžadujeutil.js .

Rozhrania s dynamickými kartami, ako je opísané vo vzore kariet ARIA Authoring Practices Guide , vyžadujú role="tablist", role="tab", role="tabpanel"a ďalšie aria-atribúty, aby mohli sprostredkovať svoju štruktúru, funkčnosť a aktuálny stav používateľom asistenčných technológií (ako sú čítačky obrazovky). Ako osvedčený postup odporúčame použiť <button>prvky pre karty, pretože sú to ovládacie prvky, ktoré spúšťajú dynamickú zmenu, a nie odkazy, ktoré prechádzajú na novú stránku alebo umiestnenie.

Upozorňujeme, že doplnok JavaScript karty nepodporuje rozhrania s kartami, ktoré obsahujú rozbaľovacie ponuky, pretože spôsobujú problémy s použiteľnosťou aj dostupnosťou. Z hľadiska použiteľnosti môže skutočnosť, že spúšťací prvok aktuálne zobrazenej karty nie je okamžite viditeľný (keďže sa nachádza v zatvorenej rozbaľovacej ponuke), spôsobiť zmätok. Z hľadiska prístupnosti v súčasnosti neexistuje rozumný spôsob, ako namapovať tento druh konštrukcie na štandardný vzor WAI ARIA, čo znamená, že nie je možné ho ľahko urobiť zrozumiteľným pre používateľov asistenčných technológií.

Zástupný obsah pre panel kariet. Toto sa týka karty Domov. Vezme ťa míle vysoko, tak vysoko, pretože má ten medzinárodný úsmev. V mojej posteli je cudzinec, v hlave mi búcha. Ale nie. V inom živote by som ťa prinútil zostať. Pretože ja som schopný všetkého. Hodí sa na môj vrcholný boj. Používa sa na ukradnutie alkoholu vašich rodičov a vyšplhanie na strechu. Tón, opálenie fit a pripravené, zvýšte to, pretože je ťažké. Jej láska je ako droga. Asi som zabudol, že mám na výber.

Zástupný obsah pre panel kariet. Toto sa týka karty profilu. Máte najlepšiu architektúru. Pečiatky do pasov, ona je kozmopolitná. Pekné, čerstvé, zúrivé, máme to na zámku. Nikdy som neplánoval, že jedného dňa ťa stratím. Zožiera ti srdce. Váš bozk je kozmický, každý pohyb je magický. Myslím tie, chcem povedať, ako keby to bola ona. Zdravím vás milovaní, poďme na cestu. Stačí vlastniť noc ako 4. júla! Ale radšej sa zmárniš.

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>

Aby to vyhovovalo vašim potrebám, funguje to so <ul>značkovaním založeným na princípe, ako je znázornené vyššie, alebo s ľubovoľným ľubovoľným značkovaním „nahodiť svoje vlastné“. Upozorňujeme, že ak používate <nav>, nemali by ste role="tablist"k nemu pridávať priamo, pretože by to prepísalo natívnu rolu prvku ako orientačného bodu navigácie. Namiesto toho prepnite na alternatívny prvok (v príklade nižšie jednoduchý prvok <div>) a obklopte <nav>ho.

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>

Doplnok tabs funguje aj s tabletkami.

<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 s vertikálnymi tabletkami.

Zástupný obsah pre panel kariet. Toto sa týka karty Domov. Videl som ťa v centre spievať blues. Sledujte, ako krúžite v odtoku. Prečo ma nenecháš zastaviť sa? Ťažká je hlava, ktorá nosí korunu. Áno, nechávame anjelov plakať, prší na zem zhora. Chcete vidieť show v 3D, film. Cítite sa niekedy tak tenký ako papier? Je to možno áno alebo nie, nie.

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>

Používanie atribútov údajov

Môžete aktivovať navigáciu na karte alebo tablete bez písania akéhokoľvek JavaScriptu jednoduchým zadaním data-toggle="tab"alebo data-toggle="pill"na prvku. Použite tieto atribúty údajov na .nav-tabsalebo .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>

Cez JavaScript

Povoliť karty s tabuľkami cez JavaScript (každá karta musí byť aktivovaná samostatne):

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

Jednotlivé karty môžete aktivovať niekoľkými spôsobmi:

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

Efekt vyblednutia

Ak chcete, aby karty vybledli, pridajte .fadeku každému .tab-pane. Prvá tabla karty musí tiež .showzviditeľniť počiatočný obsah.

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

Metódy

Asynchrónne metódy a prechody

Všetky metódy API sú asynchrónne a spúšťajú prechod . Vrátia sa k volajúcemu hneď po spustení prechodu, ale skôr, ako sa skončí . Okrem toho bude volanie metódy na prechodovom komponente ignorované .

Viac informácií nájdete v našej dokumentácii JavaScript .

$().tab

Aktivuje prvok karty a kontajner obsahu. Karta by mala mať buď data-targetalebo, ak používate odkaz, hrefatribút zacielený na uzol kontajnera v 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-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('show')

Vyberie danú kartu a zobrazí príslušnú tablu. Akákoľvek iná karta, ktorá bola predtým vybratá, sa zruší a jej priradená tabla sa skryje. Vráti sa k volajúcemu skôr, než sa tabla karty skutočne zobrazí (tj pred výskytom shown.bs.tabudalosti).

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

.tab('dispose')

Zničí záložku prvku.

Diania

Pri zobrazení novej karty sa udalosti spúšťajú v nasledujúcom poradí:

hide.bs.tab(na aktuálnej aktívnej karte)
show.bs.tab(na karte, ktorá sa má zobraziť)
hidden.bs.tab(na predchádzajúcej aktívnej karte, rovnaká ako pri hide.bs.tabudalosti)
shown.bs.tab(na novo aktívnej práve zobrazenej karte, rovnakej ako pri show.bs.tabudalosti)

Ak ešte nebola aktívna žiadna karta, udalosti hide.bs.taba hidden.bs.tabsa nespustia.

Typ udalosti	Popis
zobraziť.bs.tab	Táto udalosť sa spustí pri zobrazení kariet, ale predtým, než sa zobrazí nová karta. Pomocou `event.target`a `event.relatedTarget`zacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii).
zobrazené.bs.tab	Táto udalosť sa spustí pri zobrazení karty po zobrazení karty. Pomocou `event.target`a `event.relatedTarget`zacielite na aktívnu kartu a predchádzajúcu aktívnu kartu (ak je k dispozícii).
skryť.bs.tab	Táto udalosť sa spustí, keď sa má zobraziť nová karta (a teda predchádzajúca aktívna karta má byť skrytá). Pomocou `event.target`a `event.relatedTarget`zacielite na aktuálnu aktívnu kartu a novú kartu, ktorá bude čoskoro aktívna.
skryté.bs.tab	Táto udalosť sa spustí po zobrazení novej karty (a teda predchádzajúca aktívna karta je skrytá). Pomocou `event.target`a `event.relatedTarget`zacielite na predchádzajúcu aktívnu kartu a na novú aktívnu kartu.

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