Navs

Dokumentācija un piemēri, kā izmantot Bootstrap iekļautos navigācijas komponentus.

Pamata navigācija

Pakalpojumā Bootstrap pieejamajai navigācijai ir kopīgs vispārējs marķējums un stili, sākot no bāzes .navklases līdz aktīvajam un atspējotajam stāvoklim. Mainiet modifikatoru klases, lai pārslēgtos starp katru stilu.

Pamatkomponents ir veidots ar flexbox un nodrošina spēcīgu pamatu .navvisu veidu navigācijas komponentu veidošanai. Tas ietver dažus stila ignorēšanas veidus (darbam ar sarakstiem), dažus saišu polsterējumus lielākiem trāpījumu apgabaliem un pamata atspējotu stilu.

Bāzes .navkomponents neietver nevienu .activestāvokli. Šajos piemēros ir iekļauta klase, galvenokārt, lai parādītu, ka šī konkrētā klase neizraisa nekādu īpašu stilu.

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

Klases tiek izmantotas visā pasaulē, tāpēc jūsu uzcenojums var būt īpaši elastīgs. Izmantojiet <ul>iepriekš norādītās darbības, <ol>ja vienumu secība ir svarīga, vai ritiniet savu ar <nav>elementu. Tā kā .navlietojumi display: flex, navigācijas saites darbojas tāpat kā navigācijas vienumi, taču bez papildu marķējuma.

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

Pieejamie stili

.navMainiet s komponenta stilu ar modifikatoriem un utilītprogrammām. Sajauciet un saskaņojiet pēc vajadzības vai izveidojiet pats.

Horizontālā izlīdzināšana

Mainiet navigācijas sistēmas horizontālo izlīdzināšanu, izmantojot flexbox utilītas . Pēc noklusējuma navigācijas zīmes ir līdzinātas pa kreisi, taču tās var viegli mainīt, lai tās būtu līdzinātas centrā vai pa labi.

Centrēts ar .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>

Līdzinājums pa labi ar .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>

Vertikāli

Salieciet navigāciju, mainot elastīgā vienuma virzienu ar .flex-columnutilītu. Vai tie ir jāsavieto dažos skatu laukos, bet ne citos? Izmantojiet adaptīvās versijas (piemēram, .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>

Kā vienmēr, vertikālā navigācija ir iespējama <ul>arī bez 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>

Cilnes

Ņem pamata navigācijas sistēmu no augšas un pievieno .nav-tabsklasi, lai izveidotu interfeisu ar cilnēm. Izmantojiet tos, lai izveidotu cilnes reģionus, izmantojot mūsu cilnes JavaScript spraudni .

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

Tabletes

Izmantojiet to pašu HTML, bet .nav-pillstā vietā izmantojiet:

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

Aizpildiet un pamatojiet

Piespiediet savu .navsaturu paplašināt visu pieejamo platumu vienā no divām modifikatoru klasēm. Lai proporcionāli aizpildītu visu pieejamo vietu ar .nav-items, izmantojiet .nav-fill. Ņemiet vērā, ka visa horizontālā telpa ir aizņemta, taču ne katram navigācijas elementam ir vienāds platums.

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

Izmantojot uz <nav>navigāciju balstītu navigāciju, varat to droši izlaist .nav-item, jo tas .nav-linkir nepieciešams tikai stila <a>elementiem.

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

Vienāda platuma elementiem izmantojiet .nav-justified. Visu horizontālo vietu aizņems navigācijas saites, taču atšķirībā no .nav-filliepriekš minētā, katrs navigācijas elements būs vienāda platuma.

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

Līdzīgi kā .nav-fillpiemērā, izmantojot <nav>navigāciju.

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

Darbs ar flex utilities

Ja jums ir nepieciešami adaptīvi navigācijas varianti, apsveriet iespēju izmantot vairākas flexbox utilītas . Lai gan šīs utilītas ir daudz detalizētākas, tās piedāvā lielāku pielāgošanu reaģējošajiem pārtraukuma punktiem. Tālāk esošajā piemērā mūsu navigācija tiks sakrauta zemākajā pārtraukuma punktā, pēc tam tā tiks pielāgota horizontālam izkārtojumam, kas aizpilda pieejamo platumu, sākot no mazā pārtraukuma punkta.

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

Attiecībā uz pieejamību

Ja izmantojat navigācijas joslu, lai nodrošinātu navigācijas joslu, noteikti pievienojiet role="navigation"loģiskākajam vecākkonteineram <ul>vai aptiniet <nav>visu navigācijas elementu. Nepievienojiet lomu <ul>pašam, jo tas neļaus to paziņot kā īstu sarakstu, izmantojot palīgtehnoloģijas.

Ņemiet vērā, ka navigācijas joslām, pat ja tās ir vizuāli veidotas kā cilnes ar .nav-tabsklasi, nevajadzētu norādīt , role="tablist"vai role="tab"atribūtus role="tabpanel". Tie ir piemēroti tikai dinamiskām cilņu saskarnēm, kā aprakstīts ARIA autorēšanas prakses rokasgrāmatas ciļņu shēmā . Lai iegūtu piemēru, skatiet šīs sadaļas JavaScript darbību dinamiskām cilņu saskarnēm .

Izmantojot nolaižamās izvēlnes

Pievienojiet nolaižamās izvēlnes ar nelielu papildu HTML un nolaižamo JavaScript spraudni .

Cilnes ar nolaižamajām izvēlnēm

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

Tabletes ar nolaižamām izvēlnēm

<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 uzvedība

Izmantojiet cilnes JavaScript spraudni — iekļaujiet to atsevišķi vai kopā ar apkopoto bootstrap.jsfailu — lai paplašinātu mūsu navigācijas cilnes un tabletes, lai izveidotu vietējā satura cilnes rūtis.

Ja veidojat mūsu JavaScript no avota, tam ir nepieciešamsutil.js .

Dinamiskās cilnes saskarnēm, kā aprakstīts ARIA autorēšanas prakses rokasgrāmatas ciļņu shēmā , ir nepieciešami role="tablist", role="tab", role="tabpanel"un papildu aria-atribūti, lai sniegtu to struktūru, funkcionalitāti un pašreizējo stāvokli palīgtehnoloģiju (piemēram, ekrāna lasītāju) lietotājiem. Kā paraugpraksi mēs iesakām <button>cilnēm izmantot elementus, jo tās ir vadīklas, kas aktivizē dinamiskas izmaiņas, nevis saites, kas novirza uz jaunu lapu vai atrašanās vietu.

Ņemiet vērā, ka cilnes JavaScript spraudnis neatbalsta saskarnes ar cilnēm, kurās ir nolaižamās izvēlnes, jo tās rada gan lietojamības, gan pieejamības problēmas. No lietojamības viedokļa fakts, ka pašlaik parādītās cilnes aktivizētāja elements nav uzreiz redzams (jo tas atrodas slēgtajā nolaižamajā izvēlnē), var radīt neskaidrības. No pieejamības viedokļa pašlaik nav saprātīga veida, kā attiecināt šāda veida konstrukciju uz standarta WAI ARIA modeli, kas nozīmē, ka to nevar viegli padarīt saprotamu palīgtehnoloģiju lietotājiem.

Viettura saturs cilnes panelim. Tas attiecas uz sākuma cilni. Aizved jūs jūdzes augstu, tik augstu, jo viņai ir viens starptautiskais smaids. Manā gultā ir svešinieks, manā galvā dauzās. Ak nē. Citā dzīvē es liktu tev palikt. Jo es esmu spējīgs uz jebko. Piemērots manai vainaga cīņai. Izmanto, lai nozagtu tavu vecāku dzērienu un uzkāptu uz jumta. Tonis, iedegums un gatavs, pastipriniet to, jo tas kļūst smags. Viņas mīlestība ir kā narkotika. Man šķiet, ka esmu aizmirsis, ka man ir izvēle.

Viettura saturs cilnes panelim. Tas attiecas uz profila cilni. Jums ir vislabākā arhitektūra. Pases zīmogi, viņa ir kosmopolītiska. Labs, svaigs, nikns, mēs to saņēmām. Nekad nebiju plānojis, ka kādu dienu es tevi pazaudēšu. Viņa izēd tavu sirdi. Tavs skūpsts ir kosmisks, katra kustība ir maģiska. Es domāju tās, es domāju kā viņa ir tā. Sveicieni, mīļie, dosimies ceļojumā. Vienkārši pieder nakts, piemēram, 4. jūlijs! Bet jūs labāk iztērējat.

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>

Lai palīdzētu pielāgoties jūsu vajadzībām, tas darbojas ar <ul>marķējumu, kas balstīts uz iepriekš norādīto, vai ar jebkuru patvaļīgu marķējumu, kas tiek rādīts pats. Ņemiet vērā: ja izmantojat <nav>, jums nevajadzētu to role="tablist"tieši pievienot, jo tas ignorētu elementa kā navigācijas orientiera lomu. Tā vietā pārejiet uz alternatīvu elementu (tālāk esošajā piemērā vienkāršu <div>) un aptiniet <nav>to.

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>

Cilņu spraudnis darbojas arī ar tabletēm.

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

Un ar vertikālām tabletēm.

Viettura saturs cilnes panelim. Tas attiecas uz sākuma cilni. Es redzēju tevi pilsētas centrā dziedam blūzu. Skatieties, kā jūs riņķojat caur kanalizāciju. Kāpēc tu neļauj man piestāt? Smaga ir galva, kas nēsā vainagu. Jā, mēs raudam eņģeļiem, kas līst virs zemes no augšas. Vēlaties redzēt šovu 3D formātā, filmu. Vai jūs kādreiz jūtaties, jūtaties tik papīra plānas. Tas ir jā vai nē, varbūt nē.

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>

Izmantojot datu atribūtus

Varat aktivizēt cilni vai tabletes navigāciju, nerakstot JavaScript, vienkārši norādot elementu data-toggle="tab"vai data-toggle="pill"uz tā. Izmantojiet šos datu atribūtus uz .nav-tabsvai .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>

Izmantojot JavaScript

Iespējot cilnes, kurās var izmantot JavaScript (katra cilne ir jāaktivizē atsevišķi):

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

Atsevišķas cilnes var aktivizēt vairākos veidos:

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

Izbalēšanas efekts

Lai cilnes izzustu, pievienojiet .fadekatrai .tab-pane. Pirmajā cilnes rūtī ir arī .showjāpadara redzams sākotnējais saturs.

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

Metodes

Asinhronās metodes un pārejas

Visas API metodes ir asinhronas un sāk pāreju . Viņi atgriežas pie zvanītāja, tiklīdz ir sākta pāreja, bet pirms tās beigām . Turklāt pārejas komponenta metodes izsaukums tiks ignorēts .

Plašāku informāciju skatiet mūsu JavaScript dokumentācijā .

$().tab

Aktivizē cilnes elementu un satura konteineru. Cilnē ir jābūt vai nu atribūtam data-target, vai, ja tiek izmantota saite, hrefatribūtam, kas mērķēts uz konteinera mezglu DOM.

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

Atlasa doto cilni un parāda ar to saistīto rūti. Visas citas iepriekš atlasītās cilnes tiek neatlasītas, un ar to saistītā rūts tiek paslēpta. Atgriežas pie zvanītāja, pirms cilnes rūts ir faktiski parādīta (ti, pirms shown.bs.tabnotikuma).

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

.tab('dispose')

Iznīcina elementa cilni.

Pasākumi

Rādot jaunu cilni, notikumi tiek aktivizēti šādā secībā:

hide.bs.tab(pašreizējā aktīvajā cilnē)
show.bs.tab(cilnē, kas jāparāda)
hidden.bs.tab(iepriekšējā aktīvajā cilnē tā pati, kas hide.bs.tabpasākumam)
shown.bs.tab(jaunaktīvā tikko parādītajā cilnē tā pati, kas show.bs.tabnotikumam)

Ja neviena cilne jau nebija aktīva, hide.bs.tabun hidden.bs.tabnotikumi netiks aktivizēti.

Pasākuma veids	Apraksts
show.bs.tab	Šis notikums tiek aktivizēts cilnes rādīšanas laikā, bet pirms jaunās cilnes parādīšanas. Izmantojiet `event.target`un `event.relatedTarget`, lai atlasītu attiecīgi aktīvo cilni un iepriekšējo aktīvo cilni (ja pieejama).
parādīts.bs.tab	Šis notikums tiek aktivizēts cilnes rādīšanas laikā pēc cilnes parādīšanas. Izmantojiet `event.target`un `event.relatedTarget`, lai atlasītu attiecīgi aktīvo cilni un iepriekšējo aktīvo cilni (ja pieejama).
hide.bs.tab	Šis notikums tiek aktivizēts, kad ir jāparāda jauna cilne (un tādējādi iepriekšējā aktīvā cilne ir jāpaslēpta). Izmantojiet `event.target`un `event.relatedTarget`, lai atlasītu attiecīgi pašreizējo aktīvo cilni un jauno cilni, kas drīzumā būs aktīva.
Hid.bs.tab	Šis notikums tiek aktivizēts pēc jaunas cilnes parādīšanas (un līdz ar to iepriekšējā aktīvā cilne tiek paslēpta). Izmantojiet `event.target`un `event.relatedTarget`, lai atlasītu attiecīgi iepriekšējo aktīvo cilni un jauno aktīvo cilni.

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