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.

html

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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.

html

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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:

html

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Zarovnané vpravo s .justify-content-end:

html

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

html

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

html

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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 .

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Tabletky

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

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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.

html

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

html

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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.

html

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

html

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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.

html

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

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

html

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Pilulky s rozbaľovacími zoznamami

html

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

CSS

Premenné

Pridané vo verzii 5.2.0

Ako súčasť vyvíjajúceho sa prístupu premenných CSS od Bootstrapu, navigačné zariadenia teraz používajú lokálne premenné CSS na .nav, .nav-tabs, a .nav-pillsna vylepšené prispôsobenie v reálnom čase. Hodnoty pre premenné CSS sa nastavujú cez Sass, takže prispôsobenie Sass je stále podporované.

V .navzákladnej triede:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

V .nav-tabstriede modifikátorov:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

V .nav-pillstriede modifikátorov:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sass premenné

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

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

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

Správanie JavaScriptu

Pomocou zásuvného modulu JavaScript pre karty – zahrňte ho jednotlivo alebo prostredníctvom skompilovaného bootstrap.jssúboru – rozšírte naše navigačné karty a pilulky na vytváranie tabel miestneho obsahu.

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.

Toto je nejaký zástupný obsah súvisiaci s obsahom karty Profil . 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 Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

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

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.

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

This is some placeholder content the Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Doplnok tabs funguje aj s tabletkami.

This is some placeholder content the Disabled tab's associated content.

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

A s vertikálnymi tabletkami. V ideálnom prípade by ste v prípade zvislých kariet mali pridať aj aria-orientation="vertical"do kontajnera zoznamu kariet.

This is some placeholder content the Disabled tab's associated content.

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

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

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

Prístupnosť

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 používateľom asistenčných technológií (ako sú čítačky obrazovky) sprostredkovať svoju štruktúru, funkčnosť a aktuálny stav. 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.

V súlade so vzorom ARIA Authoring Practices sa klávesnica zameriava iba na aktuálne aktívnu kartu. Keď je doplnok JavaScript inicializovaný, nastaví sa tabindex="-1"na všetky neaktívne ovládacie prvky karty. Keď je aktuálne aktívna karta zameraná, kurzorové klávesy aktivujú predchádzajúcu/nasledujúcu kartu, pričom doplnok zodpovedajúcim spôsobom zmení pohybtabindex . Upozorňujeme však, že doplnok JavaScript nerozlišuje medzi vodorovnými a zvislými zoznamami kariet, pokiaľ ide o interakcie klávesov kurzora: bez ohľadu na orientáciu zoznamu kariet, kurzor nahor aj naľavo prejdú na predchádzajúcu kartu a kurzor nadol a doprava na nasledujúca záložka.

Vo všeobecnosti sa na uľahčenie navigácie pomocou klávesnice odporúča, aby bolo možné zamerať aj samotné panely kariet, pokiaľ prvý prvok obsahujúci zmysluplný obsah v paneli kariet už nie je možné zamerať. Doplnok JavaScript sa nesnaží spracovať tento aspekt – tam, kde je to vhodné, budete musieť panely kariet explicitne nastaviť tak, aby bolo možné zamerať ich pridaním tabindex="0"značky.

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

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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Cez JavaScript

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

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

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

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

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

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 .

Aktivuje váš obsah ako prvok karty.

Pomocou konštruktora môžete vytvoriť inštanciu karty, napríklad:

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

Metóda	Popis
`dispose`	Zničí záložku prvku.
`getInstance`	Statická metóda, ktorá vám umožňuje získať inštanciu karty priradenú k prvku DOM, môžete ju použiť takto: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statická metóda, ktorá vráti inštanciu karty priradenú k prvku DOM alebo vytvorí novú v prípade, že nebola inicializovaná. Môžete ho použiť takto: `bootstrap.Tab.getOrCreateInstance(element)`.
`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.tab`udalosti).

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
`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.target`a `event.relatedTarget`zacielite 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.target`a `event.relatedTarget`zacielite na predchádzajúcu aktívnu kartu a na novú aktívnu kartu.
`show.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).
`shown.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).

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})