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 određena 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.

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

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.

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

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:

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

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

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

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

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

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 .

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

Pilule

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

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

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.

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

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

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.

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

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

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.

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

Š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 WAI ARIA Authoring Practices . Pogledajte JavaScript ponašanje za dinamičke interfejse sa karticama u ovom odjeljku za primjer. Atribut aria-currentnije neophodan na dinamičkim interfejsima 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

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

Tablete sa padajućim menijima

<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

Varijable

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

JavaScript ponašanje

Koristite JavaScript dodatak kartice – uključite ga pojedinačno ili putem kompajlirane bootstrap.jsdatoteke – da proširite naše navigacijske kartice i tablete kako biste kreirali okna lokalnog sadržaja sa tabulatorima.

Dinamički interfejsi sa karticama, kao što je opisano u WAI ARIA Authoring Practices , 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.

Imajte na umu da dinamički interfejsi sa karticama ne bi trebali sadržavati padajuće menije, jer to uzrokuje 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.

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

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

Kako bi se zadovoljile vaše potrebe, ovo radi sa <ul>--based markup, kao što je prikazano gore, ili sa bilo kojim proizvoljnim "roll your own" markiranje. Imajte na umu da ako koristite <nav>, ne biste trebali direktno dodavati role="tablist"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.

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

Dodatak tabs takođe radi sa pilulama.

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

I sa vertikalnim tabletama.

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>

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

Preko JavaScripta

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

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

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

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

Fade efekat

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

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

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 .

constructor

Aktivira element kartice i kontejner sadržaja. Tab bi trebao imati ili, data-bs-targetili, ako koristi vezu, hrefatribut, koji cilja na čvor kontejnera u DOM-u.

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

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 tabulator stvarno prikazan (tj. prije nego što se shown.bs.tabdogađaj dogodi).

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

  tab.show()

dispose

Uništava karticu elementa.

getInstance

Statička metoda koja vam omogućava da dobijete instancu kartice koja je povezana sa DOM elementom

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

getOrCreateInstance

Statička metoda koja vam omogućava da dobijete instancu kartice povezanu s DOM elementom ili kreirate novu u slučaju da nije inicijalizirana

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

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
`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).
`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`da biste ciljali trenutnu aktivnu karticu i novu karticu 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.

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