Navigacije i kartice

Dokumentacija i primjeri za korištenje uključenih navigacijskih komponenti Bootstrapa.

Na ovoj stranici

Base nav

Navigacija dostupna u Bootstrapu dijeli opće oznake i stilove, od osnovne .navklase do aktivnih i onemogućenih stanja. Zamijenite klase modifikatora za prebacivanje između svakog stila.

Osnovna .navkomponenta je izgrađena sa flexboxom i pruža snažnu osnovu za izgradnju svih vrsta navigacijskih komponenti. Uključuje neke zaobilaženja stilova (za rad sa listama), neke dodatke linkova za veće pogođene oblasti i osnovni onemogućeni stil.

Osnovna .navkomponenta ne uključuje nijedno .activestanje. Sljedeći primjeri uključuju klasu, uglavnom da bi pokazali da ova posebna klasa ne pokreće nikakav poseban stil.

Da biste prenijeli aktivno stanje pomoćnim tehnologijama, koristite aria-currentatribut — koristeći pagevrijednost za trenutnu stranicu ili trueza trenutnu stavku u skupu.

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>

Klase se koriste svuda, tako da vaše oznake mogu biti super fleksibilne. Koristite <ul>s kao što je gore, <ol>ako je redoslijed vaših stavki važan, ili napravite svoj s <nav>elementom. Budući da .navkoristi display: flex, navigacijske veze se ponašaju isto kao i navigacijske stavke, ali bez dodatnih oznaka.

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>

Dostupni stilovi

Promijenite stil .navkomponente s modifikatorima i uslužnim programima. Pomiješajte i spojite po potrebi ili napravite svoje.

Horizontalno poravnanje

Promijenite horizontalno poravnanje vaše navigacije pomoću flexbox uslužnih programa . Prema zadanim postavkama, navigacije su poravnate lijevo, ali ih možete lako promijeniti u centar ili desno.

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

Desno poravnato sa .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>

Vertical

Složite svoju navigaciju promjenom smjera flex stavke pomoću .flex-columnuslužnog programa. Trebate li ih složiti na neke okvire za prikaz, ali ne i na druge? Koristite responzivne verzije (npr. .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>

Kao i uvijek, vertikalna navigacija je moguća i bez <ul>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>

Tabs

Uzima osnovnu navigaciju odozgo i dodaje .nav-tabsklasu za generiranje interfejsa sa karticama. Upotrijebite ih za kreiranje tabulatornih regija pomoću našeg JavaScript dodatka za karticu .

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>

Pilule

Uzmite isti HTML, ali .nav-pillsumjesto toga koristite:

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>

Popunite i opravdajte

Prisilite svoj .navsadržaj da proširi punu dostupnu širinu jedne od dvije klase modifikatora. Da biste proporcionalno ispunili sav raspoloživi prostor svojim .nav-items, koristite .nav-fill. Primijetite da je sav horizontalni prostor zauzet, ali nema svaka stavka za navigaciju iste širine.

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>

Kada koristite <nav>navigaciju zasnovanu na -, možete sigurno izostaviti .nav-itemjer .nav-linkje potrebno samo za elemente stila <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>

Za elemente jednake širine koristite .nav-justified. Sav horizontalni prostor će biti zauzet navigacijskim vezama, ali za razliku od .nav-fillgore navedenog, svaka navigacijska stavka će biti iste širine.

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>

Slično kao u .nav-fillprimjeru koristeći <nav>navigaciju zasnovanu 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>

Rad sa flex uslužnim programima

Ako su vam potrebne varijacije za brzu navigaciju, razmislite o korištenju niza flexbox uslužnih programa . Iako su više opširni, ovi uslužni programi nude veće prilagođavanje preko reakcionih tačaka prekida. U primjeru ispod, naša navigacija će biti složena na najnižoj tački prekida, a zatim će se prilagoditi horizontalnom rasporedu koji ispunjava dostupnu širinu počevši od male tačke prekida.

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>

Što se tiče pristupačnosti

Ako koristite navs za pružanje navigacijske trake, obavezno dodajte a role="navigation"u najlogičniji roditeljski kontejner <ul>, ili omotajte <nav>element oko cijele navigacije. Nemojte dodavati ulogu <ul>samoj, jer bi to spriječilo da bude objavljena kao stvarna lista od strane pomoćnih tehnologija.

Imajte na umu da trake za navigaciju, čak i ako su vizuelno stilizovane kao kartice sa .nav-tabsklasom, ne bi trebale davati role="tablist", role="tab"ili role="tabpanel"atribute. Oni su prikladni samo za dinamičke interfejse sa karticama, kao što je opisano u obrascu kartica vodiča za ARIA autorske prakse . Pogledajte JavaScript ponašanje za dinamičke interfejse sa karticama u ovom odjeljku za primjer. Atribut aria-currentnije neophodan na dinamičkim sučeljima s karticama jer naš JavaScript obrađuje odabrano stanje dodavanjem aria-selected="true"aktivne kartice.

Korištenje padajućih menija

Dodajte padajuće menije sa malo dodatnog HTML-a i padajućim JavaScript dodacima .

Kartice sa padajućim menijima

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>

Tablete sa padajućim menijima

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

Varijable

Dodato u v5.2.0

Kao dio Bootstrap-ovog evoluirajućeg pristupa CSS varijabli, navs sada koristi lokalne CSS varijable na .nav, .nav-tabs, i .nav-pillsza poboljšanu prilagodbu u realnom vremenu. Vrijednosti za CSS varijable se postavljaju putem Sass-a, tako da je i Sass prilagođavanje i dalje podržano.

Na .navosnovnoj klasi:

  --#{$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};

Na .nav-tabsklasi modifikatora:

  --#{$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};

Na .nav-pillsklasi modifikatora:

  --#{$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 varijable

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

JavaScript ponašanje

Koristite JavaScript dodatak za karticu – uključite ga pojedinačno ili preko kompajlirane bootstrap.jsdatoteke – da proširite naše navigacijske kartice i tablete kako biste kreirali okna lokalnog sadržaja na kojima se mogu tabulatori.

Ovo je neki sadržaj za čuvanje mjesta koji je povezan sa sadržajem kartice Početna. Klikom na drugu karticu promijenit ćete vidljivost ove za sljedeću. Kartica JavaScript mijenja klase radi kontrole vidljivosti sadržaja i stila. Možete ga koristiti sa karticama, tabletama i bilo kojom drugom .navnavigacijom.

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.

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>

Da bi se zadovoljile vaše potrebe, ovo radi sa <ul>--baziranim oznakama, kao što je gore prikazano, ili sa bilo kojim proizvoljnim "roll your own" markiranjem. Imajte na umu da ako koristite <nav>, ne biste trebali dodati role="tablist"direktno u njega, jer bi to nadjačalo izvornu ulogu elementa kao orijentira za navigaciju. Umjesto toga, prebacite se na alternativni element (u primjeru ispod, jednostavan <div>) i omotajte ga <nav>oko njega.

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>

Dodatak tabs takođe radi sa pilulama.

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>

I sa vertikalnim tabletama. U idealnom slučaju, za vertikalne kartice, također biste trebali dodati aria-orientation="vertical"u kontejner liste kartica.

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>

Pristupačnost

Dinamički interfejsi sa karticama, kao što je opisano u ARIA-ovom vodiču za autorske prakse , zahtevaju role="tablist", role="tab", role="tabpanel", i dodatne aria-atribute kako bi preneli svoju strukturu, funkcionalnost i trenutno stanje korisnicima pomoćnih tehnologija (kao što su čitači ekrana). Kao najbolju praksu, preporučujemo korištenje <button>elemenata za kartice, jer su to kontrole koje pokreću dinamičku promjenu, a ne veze koje vode do nove stranice ili lokacije.

U skladu sa šablonom ARIA Authoring Practices, samo trenutno aktivna kartica dobija fokus tastature. Kada se JavaScript dodatak inicijalizira, on će se postaviti tabindex="-1"na sve kontrole neaktivnih kartica. Kada trenutno aktivna kartica ima fokus, tasteri sa kursorom aktiviraju prethodnu/sljedeću karticu, a dodatak u skladu s tim mijenja kretanjetabindex . Međutim, imajte na umu da JavaScript dodatak ne pravi razliku između horizontalnih i vertikalnih lista kartica kada su u pitanju interakcije tipki sa kursorom: bez obzira na orijentaciju liste kartica, i gornji i lijevi kursor idu na prethodnu karticu, a dolje i desni kursor idu na sljedeća kartica.

Uopšteno govoreći, da bi se olakšala navigacija tastaturom, preporučuje se da se i sami paneli kartica takođe mogu fokusirati, osim ako je prvi element koji sadrži smisleni sadržaj unutar tabla sa karticama već fokusiran. JavaScript dodatak ne pokušava da obradi ovaj aspekt—gde je to prikladno, moraćete eksplicitno da svoje tabele učinite fokusiranim dodavanjem tabindex="0"vaše oznake.

Tab JavaScript dodatak ne podržava interfejse sa karticama koji sadrže padajuće menije, jer oni uzrokuju probleme upotrebljivosti i pristupačnosti. Iz perspektive upotrebljivosti, činjenica da element okidača trenutno prikazane kartice nije odmah vidljiv (jer se nalazi unutar zatvorenog padajućeg menija) može izazvati zabunu. Sa stanovišta pristupačnosti, trenutno ne postoji razuman način da se ova vrsta konstrukcije mapira u standardni WAI ARIA obrazac, što znači da se ne može lako učiniti razumljivim korisnicima pomoćnih tehnologija.

Korištenje atributa podataka

Možete aktivirati navigaciju po kartici ili tabletama bez pisanja JavaScripta jednostavnim navođenjem data-bs-toggle="tab"ili data-bs-toggle="pill"na elementu. Koristite ove atribute podataka na .nav-tabsili .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>

Preko JavaScripta

Omogućite kartice koje se mogu tabbirati putem JavaScripta (svaka kartica se mora aktivirati zasebno):

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

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

Pojedinačne kartice možete aktivirati na nekoliko načina:

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

Fade efekat

Da biste učinili da kartice nestaju, dodajte .fadesvakom .tab-pane. Prvo okno kartica također mora imati .showda učini početni sadržaj vidljivim.

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

Metode

Asinhrone metode i prijelazi

Sve API metode su asinhrone i pokreću tranziciju . Oni se vraćaju pozivaocu čim prijelaz započne, ali prije nego što se završi . Osim toga, poziv metode na prelaznu komponentu će biti zanemaren .

Pogledajte našu JavaScript dokumentaciju za više informacija .

Aktivira vaš sadržaj kao element kartice.

Možete kreirati instancu kartice pomoću konstruktora, na primjer:

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

Metoda	Opis
`dispose`	Uništava karticu elementa.
`getInstance`	Statička metoda koja vam omogućava da dobijete instancu kartice pridruženu DOM elementu, možete je koristiti ovako: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statička metoda koja vraća instancu kartice pridruženu DOM elementu ili kreira novu u slučaju da nije inicijalizirana. Možete ga koristiti ovako: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Odabire datu karticu i prikazuje pridruženo okno. Bilo koja druga kartica koja je prethodno odabrana postaje poništena, a povezano okno je skriveno. Vraća se pozivaocu prije nego što je tab pano zapravo prikazan (tj. prije nego što se `shown.bs.tab`događaj dogodi).

Događaji

Kada se prikaže nova kartica, događaji se aktiviraju sljedećim redoslijedom:

hide.bs.tab(na trenutno aktivnoj kartici)
show.bs.tab(na kartici za prikaz)
hidden.bs.tab(na prethodnoj aktivnoj kartici, ista kao i za hide.bs.tabdogađaj)
shown.bs.tab(na novo-aktivnoj upravo prikazanoj kartici, ista kao i za show.bs.tabdogađaj)

Ako nijedna kartica već nije bila aktivna, događaji hide.bs.tabi hidden.bs.tabneće se pokrenuti.

Vrsta događaja	Opis
`hide.bs.tab`	Ovaj događaj se pokreće kada se nova kartica treba prikazati (a samim tim i prethodna aktivna kartica treba biti skrivena). Koristite `event.target`i `event.relatedTarget`za ciljanje trenutne aktivne kartice i nove kartice koja će uskoro biti aktivna.
`hidden.bs.tab`	Ovaj događaj se pokreće nakon što se prikaže nova kartica (i stoga je prethodna aktivna kartica skrivena). Koristite `event.target`i `event.relatedTarget`za ciljanje prethodne aktivne kartice, odnosno nove aktivne kartice.
`show.bs.tab`	Ovaj događaj se pokreće u prikazu kartice, ali prije nego što se nova kartica prikaže. Koristite `event.target`i `event.relatedTarget`za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
`shown.bs.tab`	Ovaj događaj se pokreće u prikazu kartice nakon što je kartica prikazana. Koristite `event.target`i `event.relatedTarget`za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).

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