Navid

Dokumentatsioon ja näited Bootstrapi kaasasolevate navigeerimiskomponentide kasutamise kohta.

Baasnavigaator

Bootstrapis saadaval olev navigeerimine jagab üldist märgistust ja stiile, alates .navpõhiklassist kuni aktiivse ja keelatud olekuni. Iga stiili vahel vahetamiseks vahetage modifikaatoriklasse.

Aluskomponent .navon ehitatud flexboxiga ja loob tugeva aluse igat tüüpi navigatsioonikomponentide ehitamiseks. See sisaldab mõningaid stiili alistamisi (loenditega töötamiseks), mõnda linkide polsterdamist suuremate tabamusalade jaoks ja põhilist keelatud stiili.

Põhikomponent .navei sisalda ühtegi .activeolekut. Järgmised näited hõlmavad klassi, peamiselt selleks, et näidata, et see konkreetne klass ei käivita mingit erilist stiili.

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

Klassid kasutatakse kogu ulatuses, nii et teie märgistus võib olla väga paindlik. Kasutage <ul>ülaltoodud skeemi, <ol>kui teie üksuste järjekord on oluline, või veeretage oma <nav>elemendiga. Kuna .navkasutusalad display: flex, käituvad navigeerimislingid samamoodi nagu navigeerimisüksused, kuid ilma täiendava märgistuseta.

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

Saadaolevad stiilid

Muutke s-komponendi stiili .navmodifikaatorite ja utiliitidega. Segage ja sobitage vastavalt vajadusele või ehitage ise.

Horisontaalne joondamine

Muutke oma navi horisontaalset joondust flexboxi utiliitidega . Vaikimisi on navigeerimismärgid vasakule joondatud, kuid saate neid hõlpsalt muuta keskele või paremale joondatud.

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

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

Vertikaalne

Pane oma navigeerimine virna, muutes .flex-columnutiliidiga painduva üksuse suunda. Kas on vaja need virnastada mõnele vaateavale, kuid mitte teistele? Kasutage reageerivaid versioone (nt .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>

Nagu alati, on vertikaalne navigeerimine võimalik <ul>ka ilma s-ita.

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

Vahekaardid

Võtab ülalt põhinavigatsiooni ja lisab .nav-tabsklassi, et luua vahekaartidega liides. Kasutage neid vahekaartide piirkondade loomiseks meie vahekaardi JavaScripti pistikprogrammiga .

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

Tabletid

Võtke sama HTML, kuid kasutage .nav-pillsselle asemel:

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

Täida ja põhjenda

Sundige oma .navsisu laiendama kogu saadaolevat laiust ühte kahest modifikaatoriklassist. Kogu vaba ruumi proportsionaalseks täitmiseks oma .nav-items-iga kasutage .nav-fill. Pange tähele, et kogu horisontaalne ruum on hõivatud, kuid mitte iga navigeerimisüksuse laius ei ole sama.

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

Kui kasutate <nav>navigeerimispõhist navigeerimist, võite selle julgelt välja jätta .nav-item, kuna see .nav-linkon vajalik ainult stiilielementide jaoks <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>

Võrdse laiusega elementide jaoks kasutage .nav-justified. Kogu horisontaalse ruumi hõivavad navigeerimislingid, kuid erinevalt .nav-fillülaltoodust on iga navigeerimisüksus sama lai.

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

Sarnaselt .nav-fillnäitele, mis kasutab <nav>-põhist navigeerimist.

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

Töötamine paindlike utiliitidega

Kui vajate tundlikke navigeerimisvariatsioone, kaaluge mitme flexboxi utiliitide kasutamist . Kuigi need utiliidid on paljusõnalisemad, pakuvad need tundlike katkestuspunktide vahel suuremat kohandamist. Allolevas näites virnatakse meie navigeerimisseade madalaimale murdepunktile, seejärel kohandatakse see horisontaalpaigutusega, mis täidab saadaoleva laiuse alates väikesest murdepunktist.

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

Ligipääsetavuse osas

Kui kasutate navigeerimisriba loomiseks navigeerimisseadmeid, lisage kindlasti role="navigation"kõige loogilisemasse emakonteinerisse <ul>või mähkige <nav>element kogu navigeerimisriba ümber. Ärge lisage rolli <ul>iseendale, kuna see takistab abitehnoloogiate poolt selle tegeliku loendina kuulutamist.

Pange tähele, et navigeerimisribadele, isegi kui need on visuaalselt koos klassiga vahekaartidena , .nav-tabsei tohiks anda atribuute . Need sobivad ainult dünaamiliste vahekaartidega liideste jaoks, nagu on kirjeldatud ARIA Authoring Practices Guide vahekaartide mustris . Vaadake selle jaotise näidet JavaScripti käitumise kohta dünaamiliste vahekaartidega liideste jaoks.role="tablist"role="tab"role="tabpanel"

Rippmenüüde kasutamine

Lisage rippmenüüd väikese täiendava HTML-i ja JavaScripti pistikprogrammiga .

Rippmenüüdega vahelehed

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

Rippmenüüdega pillid

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

JavaScripti käitumine

Kasutage vahekaardi JavaScripti pistikprogrammi – lisage see eraldi või koostatud bootstrap.jsfaili kaudu –, et laiendada meie navigeerimisvahekaarte ja pille, et luua kohaliku sisu vahekaartidega paanid.

Kui loote meie JavaScripti allikast, nõuabutil.js see .

Dünaamilised vahekaartidega liidesed, nagu on kirjeldatud ARIA loomise tavade juhendi vahekaartide mustris , nõuavad role="tablist", role="tab", role="tabpanel"ja täiendavaid aria-atribuute, et edastada nende struktuur, funktsionaalsus ja praegune olek abitehnoloogiate (nt ekraanilugejate) kasutajatele. Parima tavana soovitame kasutada <button>vahekaartide jaoks elemente, kuna need on juhtelemendid, mis käivitavad dünaamilise muudatuse, mitte lingid, mis suunavad uuele lehele või asukohale.

Pange tähele, et vahekaardi JavaScripti pistikprogramm ei toeta vahekaartidega liideseid, mis sisaldavad rippmenüüd, kuna need põhjustavad nii kasutatavuse kui ka juurdepääsetavuse probleeme. Kasutatavuse vaatenurgast võib segadust tekitada asjaolu, et praegu kuvatava vahekaardi päästikuelement ei ole kohe nähtav (kuna see asub suletud rippmenüüs). Juurdepääsetavuse seisukohalt ei ole praegu mõistlik viis seda tüüpi konstruktsiooni kaardistada standardse WAI ARIA mustriga, mis tähendab, et seda ei saa abitehnoloogiate kasutajatele hõlpsasti arusaadavaks teha.

Vahelehtede paneeli kohatäite sisu. See on seotud vahekaardiga Kodu. Viib teid miilide kõrgusele, nii kõrgele, sest tal on see üks rahvusvaheline naeratus. Minu voodis on võõras mees, peas kostab põksumine. Oh ei. Teises elus panen sind jääma. Sest ma olen kõigeks võimeline. Sobib minu kroonivaks lahinguks. Kasutati teie vanemate alkoholi varastamiseks ja katusele ronimiseks. Toon, päevitus ja valmis, keera see üles, sest see muutub raskeks. Tema armastus on nagu narkootikum. Ma arvan, et ma unustasin, et mul on valikuvõimalus.

Vahelehtede paneeli kohatäite sisu. See on seotud profiili vahekaardiga. Teil on parim arhitektuur. Passi templid, ta on kosmopoliitne. Hea, värske, äge, saime selle lukku. Poleks kunagi plaaninud, et ühel päeval ma su kaotan. Ta sööb su südame välja. Sinu suudlus on kosmiline, iga liigutus on maagiline. Ma mõtlen neid, ma mõtlen, nagu ta oleks see. Tervitused, kallid, lähme teele. Lihtsalt oma öö nagu 4. juuli! Aga sa pigem lähed raisku.

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>

Teie vajadustele vastamiseks töötab see <ul>ülaltoodud märgistusega või mis tahes suvalise "enda veeremise" märgistusega. Pange tähele, et kui kasutate <nav>, ei tohiks te sellele role="tablist"otse lisada, kuna see alistaks elemendi loomuliku rolli navigeerimise maamärgina. Selle asemel lülitage alternatiivsele elemendile (allolevas näites lihtne <div>) ja keerake see <nav>ümber.

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>

Vahelehtede pistikprogramm töötab ka pillidega.

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

Ja vertikaalsete pillidega.

Vahelehtede paneeli kohatäite sisu. See on seotud vahekaardiga Kodu. Nägin sind kesklinnas bluusi laulmas. Jälgige, kuidas te kanalisatsiooni ümber teete. Miks sa ei lase mul läbi astuda? Raske on pea, mis krooni kannab. Jah, me paneme inglid nutma, sajab ülevalt maa peale. Tahad näha saadet 3D-s, filmi. Kas tunnete end kunagi nii paberõhukena. See on jah või ei, võib-olla ei.

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>

Andmeatribuutide kasutamine

Saate aktiveerida vahelehe või pilli navigeerimise ilma JavaScripti kirjutamata, lihtsalt elemendi täpsustades data-toggle="tab"või peal. data-toggle="pill"Kasutage neid andmeatribuute .nav-tabsvõi .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>

JavaScripti kaudu

Lubage vahekaartide vahekaardid JavaScripti kaudu (iga vahekaart tuleb eraldi aktiveerida):

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

Üksikuid vahekaarte saate aktiveerida mitmel viisil.

$('#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

Fade efekt

Vahelehtede tuhmumiseks lisage .fadeigale .tab-pane. Esimene vahelehepaan peab ka .showesialgse sisu nähtavaks tegema.

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

meetodid

Asünkroonsed meetodid ja üleminekud

Kõik API meetodid on asünkroonsed ja alustavad üleminekut . Nad naasevad helistaja juurde kohe pärast ülemineku algust, kuid enne selle lõppu . Lisaks ignoreeritakse üleminekukomponendi meetodikutset .

Lisateabe saamiseks vaadake meie JavaScripti dokumentatsiooni .

$().tab

Aktiveerib vahekaardi elemendi ja sisu konteineri. Vahekaardil peaks olema kas atribuut data-targetvõi lingi kasutamisel hrefatribuut, mis sihib DOM-i konteineri sõlme.

<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('show')

Valib antud vahekaardi ja kuvab sellega seotud paani. Kõik muud varem valitud vahelehed muutuvad valimata ja nendega seotud paan peidetakse. Naaseb helistaja juurde enne vahekaardipaani tegelikku näitamist (st enne shown.bs.tabsündmuse toimumist).

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

.tab('dispose')

Hävitab elemendi vahekaardi.

Sündmused

Uue vahelehe kuvamisel käivituvad sündmused järgmises järjekorras.

hide.bs.tab(praegusel aktiivsel vahekaardil)
show.bs.tab(näitataval vahekaardil)
hidden.bs.tab(eelmisel aktiivsel vahekaardil sama, mis hide.bs.tabsündmuse puhul)
shown.bs.tab(äsja aktiivsel just kuvatud vahekaardil sama, mis show.bs.tabsündmuse puhul)

Kui ükski vahekaart ei olnud juba aktiivne, siis sündmusi hide.bs.tabja hidden.bs.tabei käivitata.

Sündmuse tüüp	Kirjeldus
show.bs.tab	See sündmus käivitub vahekaardi kuvamisel, kuid enne uue vahekaardi kuvamist. Kasutage `event.target`ja `event.relatedTarget`, et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval).
näidatud.bs.tab	See sündmus käivitub vahekaardi kuvamisel pärast vahekaardi kuvamist. Kasutage `event.target`ja `event.relatedTarget`, et sihtida vastavalt aktiivset vahekaarti ja eelmist aktiivset vahekaarti (kui see on saadaval).
hide.bs.tab	See sündmus käivitub, kui kuvatakse uus vahekaart (ja seega eelmine aktiivne vahekaart peidetakse). Kasutage `event.target`ja `event.relatedTarget`, et sihtida vastavalt praegust aktiivset vahekaarti ja uut peagi aktiivset vahekaarti.
peidetud.bs.tab	See sündmus käivitub pärast uue vahekaardi kuvamist (ja seega on eelmine aktiivne vahekaart peidetud). Kasutage `event.target`ja `event.relatedTarget`, et sihtida vastavalt eelmist aktiivset vahekaarti ja uut aktiivset vahekaarti.

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