Source

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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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 ľahko zmeniť na zarovnané 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Ak používate <nav>navigáciu založenú na princípe, nezabudnite zahrnúť .nav-itemkotvy.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Podobne ako v .nav-fillpríklade s použitím <nav>navigácie založenej na orientácii nezabudnite zahrnúť .nav-itemkotvy.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Much longer nav link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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é v dokumente WAI ARIA Authoring Practices . 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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Správanie JavaScriptu

Použite zásuvný modul JavaScript na karte – 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, a to aj prostredníctvom rozbaľovacích ponúk.

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

Rozhrania s dynamickými kartami, ako je opísané v WAI ARIA Authoring Practices , vyžadujú role="tablist", role="tab", role="tabpanel", a ďalšie aria-atribúty, aby sprostredkovali svoju štruktúru, funkčnosť a aktuálny stav používateľom asistenčných technológií (ako sú čítačky obrazovky).

Upozorňujeme, že rozhrania s dynamickými kartami by nemali obsahovať rozbaľovacie ponuky, pretože to spôsobuje 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í.

Raw denim ste o nich pravdepodobne ešte nepočuli džínsové šortky Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Moustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sveter eu banh mi, qui irure terry richardson ex squid. Aliquip miesto na salvia cillum iphone. Seitan aliquip quis cardigan americké oblečenie, mäsiar voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa outside quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Veniam sint duis incididunt do esse magna mollit outsideeur laborum qui. Id id reprehenderit sit est eu aliqua occaecat quis et velit okrem laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo et voluptate minim reprehenderit mollit pariatur. Deserunt non laborum enim et cillum eu deserunt okrem ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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ď a data-targetalebo hrefzacielenie na kontajnerový uzol v DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').tab('show')
  })
</script>

.tab('show')

Vyberie danú kartu a zobrazí priradenú 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í:

  1. hide.bs.tab(na aktuálnej aktívnej karte)
  2. show.bs.tab(na karte, ktorá sa má zobraziť)
  3. hidden.bs.tab(na predchádzajúcej aktívnej karte, rovnaká ako pri hide.bs.tabudalosti)
  4. 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.targeta event.relatedTargetzacielite 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.targeta event.relatedTargetzacielite 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.targeta event.relatedTargetzacielite 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.targeta event.relatedTargetzacielite na predchádzajúcu aktívnu kartu a na novú aktívnu kartu. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})