Navs un cilnes

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

Šajā lapā

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īvajiem un atspējotajiem stāvokļiem. 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.

html

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

Līdzinājums pa labi ar .justify-content-end:

html

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

html

<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">Disabled</a>
  </li>
</ul>

Kā vienmēr, vertikālā navigācija ir iespējama <ul>arī bez s.

html

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

html

<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">Disabled</a>
  </li>
</ul>

Tabletes

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

html

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

html

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

html

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

html

<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">Disabled</a>
  </li>
</ul>

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

html

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

html

<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">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 sadaļu JavaScript darbība 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

html

<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">Disabled</a>
  </li>
</ul>

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

html

<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">Disabled</a>
  </li>
</ul>

CSS

Mainīgie

Pievienots v5.2.0

Kā daļa no Bootstrap attīstošās CSS mainīgo pieejas, navigācijas sistēmas tagad izmanto vietējos CSS mainīgos .nav, .nav-tabsun .nav-pillsuzlabotai reāllaika pielāgošanai. CSS mainīgo vērtības tiek iestatītas, izmantojot Sass, tāpēc joprojām tiek atbalstīta arī Sass pielāgošana.

Pamatklasē .nav:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Par .nav-tabsmodifikatoru klasi:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Par .nav-pillsmodifikatoru klasi:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sass mainīgie

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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 izmantojot apkopoto bootstrap.jsfailu — lai paplašinātu mūsu navigācijas cilnes un tabletes, lai izveidotu vietējā satura cilnes rūtis.

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

Šis ir viettura saturs, kas saistīts ar cilni Profils . 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 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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</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.

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 Disabled tab's associated content.

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Un ar vertikālām tabletēm. Ideālā gadījumā vertikālām cilnēm jāpievieno arī aria-orientation="vertical"ciļņu saraksta konteiners.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Pieejamība

Dinamiskām cilņu 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.

Atbilstoši ARIA autorēšanas prakses modelim tikai pašlaik aktīvā cilne saņem tastatūras fokusu. Kad JavaScript spraudnis ir inicializēts, tas tiks iestatīts tabindex="-1"uz visām neaktīvo ciļņu vadīklām. Kad pašlaik aktīvajā cilnē ir fokuss, kursora taustiņi aktivizē iepriekšējo/nākamo cilni, spraudnim attiecīgi mainot cilnitabindex . Tomēr ņemiet vērā, ka JavaScript spraudnis neatšķir horizontālos un vertikālos ciļņu sarakstus attiecībā uz kursora taustiņu mijiedarbību: neatkarīgi no ciļņu saraksta orientācijas gan augšējais, gan kreisais kursors pāriet uz iepriekšējo cilni, bet lejup un labo kursoru nākamā cilne.

Parasti, lai atvieglotu navigāciju ar tastatūru, ir ieteicams fokusēt arī pašus ciļņu paneļus, ja vien pirmais elements, kas satur jēgpilnu saturu ciļņu panelī, jau nav fokusējams. JavaScript spraudnis nemēģina rīkoties ar šo aspektu — ja nepieciešams, jums būs skaidri jāpadara ciļņu paneļi fokusējami, pievienojot tabindex="0"marķējumu.

Cilnes JavaScript spraudnis neatbalsta cilnes saskarnes, 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.

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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Izmantojot JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

const triggerEl = document.querySelector('#myTab button[data-bs-target="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child button')
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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</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ā .

Aktivizē jūsu saturu kā cilnes elementu.

Varat izveidot cilnes gadījumu ar konstruktoru, piemēram:

const bsTab = new bootstrap.Tab('#myTab')

Metode	Apraksts
`dispose`	Iznīcina elementa cilni.
`getInstance`	Statiskā metode, kas ļauj iegūt cilnes gadījumu, kas saistīts ar DOM elementu, varat to izmantot šādi: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Statiskā metode, kas atgriež ar DOM elementu saistītu cilnes gadījumu vai izveido jaunu, ja tas nav inicializēts. Varat to izmantot šādi: `bootstrap.Tab.getOrCreateInstance(element)`.
`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.tab`notikuma).

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
`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.
`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, kad tiek parādīta cilne 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).

const tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', event => {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})