Navs un cilnes

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

Šajā lapā

Base nav

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.

Lai nodotu aktīvo stāvokli palīgtehnoloģijām, izmantojiet aria-currentatribūtu — izmantojot pagepašreizējās lapas vai truekopas pašreizējā vienuma vērtību.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 WAI ARIA autorēšanas praksē . Lai iegūtu piemēru, skatiet šīs sadaļas JavaScript darbību dinamiskām cilņu saskarnēm . Atribūts aria-currentnav nepieciešams dinamiskās cilnes saskarnēs, jo mūsu JavaScript apstrādā atlasīto stāvokli, pievienojot aria-selected="true"to aktīvajā cilnē.

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

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

<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

Mainīgie lielumi

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

Dinamiskām cilņu saskarnēm, kā aprakstīts WAI ARIA autorēšanas praksē , 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 dinamiskās cilnes saskarnēs nedrīkst būt nolaižamās izvēlnes, jo tas 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.

Šis ir viettura saturs, kas saistīts ar cilni Sākums. Noklikšķinot uz citas cilnes, tiks pārslēgta šīs cilnes redzamība uz nākamo. Cilne JavaScript maina klases, lai kontrolētu satura redzamību un stilu. Varat to izmantot ar cilnēm, tabletēm un jebkuru citu .navnavigācijas sistēmu.

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>

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.

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

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

Un ar vertikālām tabletēm.

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>

Izmantojot datu atribūtus

Varat aktivizēt cilni vai tabletes navigāciju, nerakstot JavaScript, vienkārši norādot elementu data-bs-toggle="tab"vai data-bs-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-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>

Izmantojot JavaScript

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

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

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

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

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

constructor

Aktivizē cilnes elementu un satura konteineru. Cilnē ir jābūt vai nu atribūtam, data-bs-targetvai, ja tiek izmantota saite, hrefatribūtam, kura mērķauditorija tiek atlasīta konteinera mezglā 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-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>

parādīt

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

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

  tab.show()

atbrīvoties

Iznīcina elementa cilni.

getInstance

Statiskā metode, kas ļauj iegūt cilnes gadījumu, kas saistīts ar DOM elementu

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

getOrCreateInstance

Statiskā metode, kas ļauj iegūt cilnes gadījumu, kas saistīts ar DOM elementu, vai izveidot jaunu, ja tas nav inicializēts

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

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).
`shown.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.
`hidden.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.

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