Navigacija

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

Baza nav

Navigacija dostupna u Bootstrapu dijeli općenite oznake i stilove, od osnovne .navklase do aktivnog i onemogućenog stanja. Zamijenite klase modifikatora za prebacivanje između stilova.

Osnovna .navkomponenta izrađena je pomoću flexboxa i pruža čvrstu osnovu za izgradnju svih vrsta navigacijskih komponenti. Uključuje neka nadjačavanja stilova (za rad s popisima), neka ispuna veza za veća područja pogotka i osnovni onemogućeni stil.

Osnovna .navkomponenta ne uključuje nikakvo .activestanje. Sljedeći primjeri uključuju klasu, uglavnom kako bi pokazali da ova određena klasa ne pokreće nikakav poseban stil.

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

Klase se koriste svugdje, tako da vaša oznaka može biti super fleksibilna. Koristite <ul>s kao gore, <ol>ako je redoslijed vaših stavki važan, ili ubacite svoj s <nav>elementom. Zbog .navupotrebe display: flex, navigacijske veze ponašaju se isto kao navigacijske stavke, ali bez dodatnih oznaka.

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

Dostupni stilovi

Promijenite stil .navs komponente s modifikatorima i uslužnim programima. Miješajte i spajajte prema potrebi ili napravite vlastiti.

Horizontalno poravnanje

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

Centrirano sa .justify-content-center:

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

Desno poravnato s .justify-content-end:

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

Okomito

Složite svoju navigaciju promjenom smjera fleksibilne stavke pomoću .flex-columnuslužnog programa. Trebate ih složiti na neke prozore, 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" 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, okomita navigacija je moguća i bez <ul>s.

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

Kartice

Uzima osnovnu navigaciju odozgo i dodaje .nav-tabsklasu za generiranje sučelja s karticama. Upotrijebite ih za stvaranje područja s karticama s našim JavaScript dodatkom za kartice .

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

Tablete

Uzmite isti HTML, ali .nav-pillsumjesto njega upotrijebite:

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

Ispunite 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, upotrijebite .nav-fill. Primijetite da je sav vodoravni prostor zauzet, ali nema svaka navigacijska stavka iste širine.

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

Kada koristite <nav>navigaciju temeljenu na -, možete slobodno izostaviti .nav-itemjer .nav-linkje to potrebno samo za elemente stila <a>.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" 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 bit će iste širine.

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

Slično .nav-fillprimjeru korištenja <nav>navigacije temeljene na -.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" 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 s flex pomoćnim programima

Ako trebate varijacije responzivne navigacije, razmislite o korištenju niza uslužnih programa flexbox . Iako su opširniji, ovi uslužni programi nude veću prilagodbu preko responzivnih prijelomnih točaka. U donjem primjeru, naša će navigacija biti složena na najnižoj prijelomnoj točki, a zatim će se prilagoditi vodoravnom rasporedu koji ispunjava dostupnu širinu počevši od male prijelomne točke.

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

Što se tiče pristupačnosti

Ako koristite navigacije za pružanje navigacijske trake, svakako dodajte role="navigation"u najlogičniji roditeljski spremnik <ul>ili omotajte <nav>element oko cijele navigacije. Nemojte dodavati ulogu <ul>samoj jer bi to spriječilo da je pomoćne tehnologije najave kao stvarni popis.

Imajte na umu da se navigacijskim trakama, čak i ako su vizualno oblikovane kao kartice s .nav-tabsklasom, ne smiju dodijeliti atributi ili atributi. Oni su prikladni samo za dinamička sučelja s karticama, kao što je opisano u uzorku kartica ARIA Authoring Practices Guide Guide . Za primjer pogledajte ponašanje JavaScripta za dinamička sučelja s karticama u ovom odjeljku.role="tablist"role="tab"role="tabpanel"

Korištenje padajućih izbornika

Dodajte padajuće izbornike s malo dodatnog HTML-a i padajućeg JavaScript dodatka .

Kartice s padajućim izbornikom

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

Tablete s padajućim izbornikom

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

JavaScript ponašanje

Upotrijebite JavaScript dodatak za kartice – uključite ga pojedinačno ili putem kompilirane bootstrap.jsdatoteke – da proširite naše navigacijske kartice i pilule za stvaranje okna s karticama lokalnog sadržaja.

Ako gradite naš JavaScript iz izvora, to zahtijevautil.js .

Sučelja s dinamičkim karticama, kao što je opisano u uzorku kartica Vodiča za autorsku praksu ARIA , zahtijevaju role="tablist", role="tab", role="tabpanel"i dodatne aria-atribute kako bi prenijeli svoju strukturu, funkcionalnost i trenutno stanje korisnicima pomoćnih tehnologija (kao što su čitači zaslona). Kao najbolju praksu, preporučujemo korištenje <button>elemenata za kartice, budući da su to kontrole koje pokreću dinamičku promjenu, a ne poveznice koje vode do nove stranice ili lokacije.

Imajte na umu da JavaScript dodatak za kartice ne podržava sučelja s karticama koja sadrže padajuće izbornike jer oni uzrokuju probleme s upotrebljivošću i pristupačnošću. Iz perspektive upotrebljivosti, činjenica da element okidača trenutno prikazane kartice nije odmah vidljiv (jer je unutar zatvorenog padajućeg izbornika) može izazvati zabunu. Sa stajališta pristupačnosti, trenutačno ne postoji razuman način mapiranja ove vrste konstrukcije u standardni WAI ARIA uzorak, što znači da se ne može lako učiniti razumljivom korisnicima pomoćnih tehnologija.

Sadržaj rezerviranog mjesta za ploču kartica. Ovo se odnosi na početnu karticu. Odnese te miljama visoko, tako visoko, jer ima taj jedan međunarodni osmijeh. U krevetu mi je stranac, u glavi mi lupa. O ne. U nekom drugom životu natjerao bih te da ostaneš. Jer ja, ja sam sposoban za sve. Spremam se za svoju krunsku bitku. Koristio se za krađu pića tvojih roditelja i penjanje na krov. Ton, tan fit i spreman, pojačaj jer postaje težak. Njena ljubav je poput droge. Valjda sam zaboravio da imam izbora.

Sadržaj rezerviranog mjesta za ploču kartica. Ovo se odnosi na karticu profila. Imate najbolju arhitekturu. Pečati u putovnici, ona je kozmopolit. Fino, svježe, žestoko, imamo ga na ključu. Nikad nisam planirao da ću te jednog dana izgubiti. Izjeda ti srce. Tvoj poljubac je kozmički, svaki pokret je magija. Mislim one, mislim kao da je ona ta. Pozdrav voljeni, pođimo na putovanje. Samo doživite noć poput 4. srpnja! Ali radije biste se izgubili.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 zadovoljio vaše potrebe, ovo radi s <ul>oznakama koje se temelje na bazi podataka, kao što je gore prikazano, ili s bilo kojim proizvoljnim označavanjem koje "uvijete sami". Imajte na umu da ako koristite <nav>, ne biste mu trebali dodavati role="tablist"izravno jer bi to nadjačalo izvornu ulogu elementa kao navigacijskog orijentira. Umjesto toga, prebacite se na alternativni element (u donjem primjeru, jednostavan <div>) i omotajte <nav>oko njega.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 za kartice također radi s tabletama.

<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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 s okomitim pilulama.

Sadržaj rezerviranog mjesta za ploču kartica. Ovo se odnosi na početnu karticu. Vidio sam te u gradu kako pjevaš Blues. Gledajte kako kružite oko odvoda. Zašto mi ne dopustiš da svratim? Teška je glava koja nosi krunu. Da, tjeramo anđele da plaču, padajući kišom na zemlju s visine. Želite vidjeti predstavu u 3D, film. Osjećate li se ikada, osjećate li se tako tankim kao papir. To je da ili ne, možda ne.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

Korištenje atributa podataka

Možete aktivirati karticu ili navigaciju pilulom bez pisanja bilo kakvog JavaScripta jednostavnim navođenjem data-toggle="tab"ili data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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ći tabbable kartice putem JavaScript-a (svaku karticu treba zasebno aktivirati):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third tab

Efekt blijeđenja

Da bi kartice blijedjele, dodajte .fadesvakoj .tab-pane. Prvo okno kartice također mora .showučiniti početni sadržaj vidljivim.

<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

Asinkrone metode i prijelazi

Sve API metode su asinkrone i pokreću prijelaz . Vraćaju se pozivatelju čim prijelaz započne, ali prije nego što završi . Osim toga, poziv metode na prijelaznoj komponenti bit će zanemaren .

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

$().tab

Aktivira element kartice i spremnik sadržaja. Kartica bi trebala imati atribut data-targetili, ako koristite vezu, hrefatribut koji cilja na čvor spremnika 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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('prikaži')

Odabire zadanu karticu i prikazuje povezano okno. Bilo koja druga kartica koja je prethodno bila odabrana postaje neodabrana, a povezano okno skriveno. Vraća se pozivatelju prije nego što se okno kartice stvarno prikaže (tj. prije nego što se shown.bs.tabdogađaj dogodi).

$('#someTab').tab('show')

.tab('dispose')

Uništava karticu elementa.

Događaji

Kada se prikazuje nova kartica, događaji se aktiviraju sljedećim redoslijedom:

hide.bs.tab(na trenutno aktivnoj kartici)
show.bs.tab(na kartici koje će biti prikazano)
hidden.bs.tab(na prethodnoj aktivnoj kartici, ista kao za hide.bs.tabdogađaj)
shown.bs.tab(na novoaktivnoj upravo prikazanoj kartici, ista kao i za show.bs.tabdogađaj)

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

Vrsta događaja	Opis
pokazati.bs.tab	Ovaj se događaj aktivira prilikom prikaza kartice, ali prije nego što se prikaže nova kartica. Koristite `event.target`i `event.relatedTarget`za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
prikazano.bs.tab	Ovaj se događaj pokreće na prikazu kartice nakon što je kartica prikazana. Koristite `event.target`i `event.relatedTarget`za ciljanje aktivne kartice i prethodne aktivne kartice (ako je dostupna).
sakriti.bs.tab	Ovaj se događaj pokreće kada se treba prikazati nova kartica (i stoga se prethodna aktivna kartica treba sakriti). Koristite `event.target`i `event.relatedTarget`za ciljanje trenutno aktivne kartice i nove kartice koja će uskoro biti aktivna.
skriven.bs.tab	Ovaj se događaj 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.

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})