Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
in English

Navigácie a karty

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

Na tejto stránke

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.

Ak chcete sprostredkovať aktívny stav asistenčným technológiám, použite aria-currentatribút — pomocou pagehodnoty pre aktuálnu stránku alebo truepre aktuálnu položku v skupine.

<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" 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" 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" 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 jednoducho 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" 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" 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" 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" 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" 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" 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" 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" 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" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Pilulky

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" 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" 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" 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" href="#" tabindex="-1" aria-disabled="true">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" 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" 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" 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" 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.

<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" 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ú lepš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" 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" 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>sebe samej, pretože by to zabránilo tomu, aby bola oznámená ako skutočný zoznam 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. Tento aria-currentatribút nie je potrebný na rozhraniach s dynamickými kartami, pretože náš JavaScript spracováva vybratý stav pridaním aria-selected="true"na aktívnu kartu.

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" 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" 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" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Sass

Premenné

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

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.

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). 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 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 nemôže byť ľahko zrozumiteľný pre používateľov asistenčných technológií.

Toto je nejaký zástupný obsah súvisiaci s obsahom karty Domov. Kliknutím na inú kartu prepnete viditeľnosť tejto karty pre ďalšiu. Karta JavaScript zamieňa triedy na ovládanie viditeľnosti a štýlu obsahu. Môžete ho použiť s kartami, tabletkami a akoukoľvek inou .navnavigáciou.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

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">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Doplnok tabs funguje aj s tabletkami.

Toto je nejaký zástupný obsah súvisiaci s obsahom karty Domov. Kliknutím na inú kartu prepnete viditeľnosť tejto karty pre ďalšiu. Karta JavaScript zamieňa triedy na ovládanie viditeľnosti a štýlu obsahu. Môžete ho použiť s kartami, tabletkami a akoukoľvek inou .navnavigáciou.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

A s vertikálnymi tabletkami.

Toto je nejaký zástupný obsah súvisiaci s obsahom karty Domov. Kliknutím na inú kartu prepnete viditeľnosť tejto karty pre ďalšiu. Karta JavaScript zamieňa triedy na ovládanie viditeľnosti a štýlu obsahu. Môžete ho použiť s kartami, tabletkami a akoukoľvek inou .navnavigáciou.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
  </div>
</div>

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-bs-toggle="tab"alebo data-bs-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-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

Cez JavaScript

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

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

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

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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 .

constructor

Aktivuje prvok karty a kontajner obsahu. Karta by mala mať buď data-bs-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-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

šou

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

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

  tab.show()

disponovať

Zničí záložku prvku.

getInstance

Statická metóda, ktorá vám umožňuje získať inštanciu karty spojenú s prvkom DOM

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

getOrCreateInstance

Statická metóda, ktorá vám umožňuje získať inštanciu karty spojenú s prvkom DOM alebo vytvoriť novú v prípade, že nebola inicializovaná

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

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
show.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).
shown.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).
hide.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.
hidden.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. 
var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})