Навигация и раздели

Документация и примери за това как да използвате включените навигационни компоненти на Bootstrap.

На тази страница

База нав

Навигацията, налична в Bootstrap, споделя общо маркиране и стилове, от базовия .navклас до активните и дезактивираните състояния. Разменете класовете модификатори, за да превключвате между всеки стил.

Базовият .navкомпонент е изграден с flexbox и осигурява здрава основа за изграждане на всички видове навигационни компоненти. Той включва някои замени на стила (за работа със списъци), някои подложки за връзки за по-големи зони на попадение и основен дезактивиран стил.

Базовият .navкомпонент не включва никакво .activeсъстояние. Следващите примери включват класа, главно за да покажат, че този конкретен клас не задейства никакъв специален стил.

За да предадете активното състояние на помощни технологии, използвайте aria-currentатрибута — като използвате pageстойността за текущата страница или trueза текущия елемент в набор.

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>

Класовете се използват навсякъде, така че вашето маркиране може да бъде супер гъвкаво. Използвайте <ul>s като по-горе, <ol>ако редът на вашите елементи е важен, или хвърлете свой собствен с <nav>елемент. Тъй като .navизползва display: flex, навигационните връзки се държат по същия начин, както биха направили навигационните елементи, но без допълнително маркиране.

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>

Налични стилове

Променете стила на .navкомпонента s с модификатори и помощни програми. Смесете и комбинирайте според нуждите или създайте свой собствен.

Хоризонтално подравняване

Променете хоризонталното подравняване на вашата навигация с помощните програми на flexbox . По подразбиране навигациите са подравнени вляво, но можете лесно да ги промените в централно или вдясно.

Центрирано с .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>

Дясно подравнено с .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>

Вертикална

Подредете вашата навигация, като промените посоката на гъвкавия елемент с .flex-columnпомощната програма. Трябва да ги подредите върху някои прозорци, но не и върху други? Използвайте адаптивните версии (напр. .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>

Както винаги, вертикалната навигация е възможна и без <ul>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>

Раздели

Взема основната навигация от по-горе и добавя .nav-tabsкласа за генериране на интерфейс с раздели. Използвайте ги, за да създавате региони с възможност за табулиране с нашия плъгин за таб JavaScript .

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>

Хапчета

Вземете същия HTML, но .nav-pillsвместо това използвайте:

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>

Попълнете и обосновете

Принудете вашето .navсъдържание да разшири пълната налична ширина един от двата класа модификатори. За да запълните пропорционално цялото налично пространство с вашите .nav-items, използвайте .nav-fill. Забележете, че цялото хоризонтално пространство е заето, но не всеки навигационен елемент има еднаква ширина.

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>

Когато използвате <nav>базирана на -навигация, можете спокойно да пропуснете .nav-item, тъй като .nav-linkсе изисква само за стилни <a>елементи.

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>

За елементи с еднаква ширина използвайте .nav-justified. Цялото хоризонтално пространство ще бъде заето от навигационни връзки, но за разлика от .nav-fillгорното, всеки навигационен елемент ще бъде с еднаква ширина.

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>

Подобно на .nav-fillпримера с използване на <nav>базирана на навигация.

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>

Работа с flex помощни програми

Ако имате нужда от адаптивни варианти на навигация, обмислете използването на серия от помощни програми flexbox . Въпреки че са по-подробни, тези помощни програми предлагат по-голяма персонализация в отговорните точки на прекъсване. В примера по-долу нашата навигация ще бъде подредена на най-ниската точка на прекъсване, след което ще се адаптира към хоризонтално оформление, което запълва наличната ширина, започвайки от малката точка на прекъсване.

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>

Относно достъпността

Ако използвате навигации, за да предоставите лента за навигация, не забравяйте да добавите role="navigation"към най-логичния родителски контейнер на <ul>, или обвийте <nav>елемент около цялата навигация. Не добавяйте ролята към <ul>себе си, тъй като това би попречило да бъде обявена като действителен списък от помощни технологии.

Обърнете внимание, че лентите за навигация, дори визуално оформени като раздели с .nav-tabsкласа, не трябва да получават атрибути или . Те са подходящи само за динамични интерфейси с раздели, както е описано в шаблона на раздели Ръководство за практики за авторство на ARIA . Вижте поведението на JavaScript за динамични интерфейси с раздели в този раздел за пример. Атрибутът не е необходим на интерфейси с динамични раздели, тъй като нашият JavaScript обработва избраното състояние чрез добавяне в активния раздел.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Използване на падащи менюта

Добавете падащи менюта с малко допълнителен HTML и JavaScript приставката за падащи менюта .

Раздели с падащи менюта

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>

Хапчета с падащи менюта

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

Променливи

Добавен във v5.2.0

Като част от развиващия се подход на Bootstrap към CSS променливите, navs вече използват локални CSS променливи на .nav, .nav-tabsи .nav-pillsза подобрено персонализиране в реално време. Стойностите за CSS променливите се задават чрез Sass, така че персонализирането на Sass все още се поддържа.

В .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};

В .nav-tabsмодификаторния клас:

  --#{$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};

В .nav-pillsмодификаторния клас:

  --#{$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 променливи

$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

Използвайте JavaScript плъгина за раздели – включете го поотделно или чрез компилиран bootstrap.jsфайл – за да разширите нашите навигационни раздели и хапчета, за да създадете табулируеми панели с локално съдържание.

Това е част от съдържанието на контейнер , свързано със съдържанието на раздела Начало . Щракването върху друг раздел ще превключи видимостта на този за следващия. Разделът JavaScript разменя класове, за да контролира видимостта и стила на съдържанието. Можете да го използвате с раздели, хапчета и всякаква друга .navнавигация, поддържана от системата.

Това е част от съдържанието на контейнер , свързано със съдържанието на раздела Профил . Щракването върху друг раздел ще превключи видимостта на този за следващия. Разделът JavaScript разменя класове, за да контролира видимостта и стила на съдържанието. Можете да го използвате с раздели, хапчета и всякаква друга .navнавигация, поддържана от системата.

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>

За да ви помогне да отговаря на вашите нужди, това работи с <ul>-базирано маркиране, както е показано по-горе, или с произволно маркиране, което „превъртете свое собствено“. Обърнете внимание, че ако използвате <nav>, не трябва да добавяте role="tablist"директно към него, тъй като това ще замени естествената роля на елемента като ориентир за навигация. Вместо това превключете към алтернативен елемент (в примера по-долу, прост <div>) и обвийте <nav>около него.

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>

Плъгинът за раздели работи и с хапчета.

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>

И с вертикални хапчета. В идеалния случай за вертикални раздели трябва също да добавите aria-orientation="vertical"към контейнера на списъка с раздели.

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>

Достъпност

Динамичните интерфейси с раздели, както е описано в модела на раздели Ръководството за авторски практики на ARIA , изискват role="tablist", role="tab", role="tabpanel"и допълнителни aria-атрибути, за да предадат своята структура, функционалност и текущо състояние на потребителите на помощни технологии (като екранни четци). Като най-добра практика препоръчваме да използвате <button>елементи за разделите, тъй като това са контроли, които задействат динамична промяна, а не връзки, които навигират към нова страница или местоположение.

В съответствие с модела на ARIA Authoring Practices само текущо активният раздел получава фокус от клавиатурата. Когато плъгинът на JavaScript се инициализира, той ще се зададе tabindex="-1"на всички неактивни контроли на раздела. След като текущо активният раздел има фокус, клавишите на курсора активират предишния/следващия раздел, като плъгинът променя съответноtabindex движението . Обърнете внимание обаче, че плъгинът на JavaScript не прави разлика между хоризонтални и вертикални списъци с раздели, когато става дума за взаимодействия с клавишите на курсора: независимо от ориентацията на списъка с раздели, както курсорът нагоре, така и левият курсор отиват към предишния раздел, а курсорът надолу и надясно отиват към следващия раздел.

Като цяло, за да се улесни навигацията с клавиатурата, се препоръчва да направите и самите панели с раздели фокусируеми, освен ако първият елемент, съдържащ смислено съдържание в панела с раздели, вече може да се фокусира. Приставката за JavaScript не се опитва да се справи с този аспект – където е подходящо, ще трябва изрично да направите панелите си с раздели фокусируеми, като добавите tabindex="0"маркиране.

JavaScript плъгинът за раздели не поддържа интерфейси с раздели, които съдържат падащи менюта, тъй като те причиняват проблеми както с използваемостта, така и с достъпността. От гледна точка на използваемостта, фактът, че задействащият елемент на текущо показания раздел не се вижда веднага (тъй като е в затвореното падащо меню), може да причини объркване. От гледна точка на достъпността, понастоящем няма разумен начин за картографиране на този вид конструкция към стандартен WAI ARIA модел, което означава, че не може лесно да бъде направено разбираемо за потребителите на помощни технологии.

Използване на атрибути на данни

Можете да активирате навигация в раздел или хапче, без да пишете JavaScript, като просто посочите data-bs-toggle="tab"или data-bs-toggle="pill"върху елемент. Използвайте тези атрибути на данни на .nav-tabsили .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>

Чрез JavaScript

Активиране на раздели с възможност за разделяне чрез JavaScript (всеки раздел трябва да се активира индивидуално):

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

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

Можете да активирате отделни раздели по няколко начина:

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

Ефект на избледняване

За да накарате разделите да изчезват, добавете .fadeкъм всеки .tab-pane. Първият панел с раздели също трябва .showда направи първоначалното съдържание видимо.

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

Методи

Асинхронни методи и преходи

Всички API методи са асинхронни и стартират преход . Те се връщат при повикващия веднага щом преходът започне, но преди да приключи . В допълнение, извикване на метод на преходен компонент ще бъде игнорирано .

Вижте нашата JavaScript документация за повече информация .

Активира вашето съдържание като разделен елемент.

Можете да създадете екземпляр на раздел с конструктора, например:

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

Метод	Описание
`dispose`	Унищожава раздела на елемент.
`getInstance`	Статичен метод, който ви позволява да получите екземпляра на раздела, свързан с DOM елемент, можете да го използвате по следния начин: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Статичен метод, който връща екземпляр на раздел, свързан с DOM елемент, или създава нов, в случай че не е инициализиран. Можете да го използвате така: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Избира дадения раздел и показва свързания с него панел. Всеки друг раздел, който е бил избран преди това, става неизбран и свързаният с него панел е скрит. Връща се към повикващия, преди панелът с раздели действително да бъде показан (т.е. преди `shown.bs.tab`събитието да се случи).

събития

При показване на нов раздел събитията се задействат в следния ред:

hide.bs.tab(в текущия активен раздел)
show.bs.tab(в раздела за показване)
hidden.bs.tab(в предишния активен раздел, същият като за hide.bs.tabсъбитието)
shown.bs.tab(в новоактивния току-що показан раздел, същият като за show.bs.tabсъбитието)

Ако вече няма активен раздел, тогава събитията hide.bs.tabи hidden.bs.tabняма да бъдат задействани.

Тип събитие	Описание
`hide.bs.tab`	Това събитие се задейства, когато трябва да се покаже нов раздел (и по този начин предишният активен раздел трябва да бъде скрит). Използвайте `event.target`и `event.relatedTarget`, за да насочите съответно текущия активен раздел и новия раздел, който скоро ще бъде активен.
`hidden.bs.tab`	Това събитие се задейства, след като се покаже нов раздел (и по този начин предишният активен раздел е скрит). Използвайте `event.target`и `event.relatedTarget`, за да насочите съответно предишния активен раздел и новия активен раздел.
`show.bs.tab`	Това събитие се задейства при показване на раздела, но преди новият раздел да бъде показан. Използвайте `event.target`и `event.relatedTarget`, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
`shown.bs.tab`	Това събитие се задейства при показване на раздели, след като даден раздел е бил показан. Използвайте `event.target`и `event.relatedTarget`, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).

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