Навигације и картице

Документација и примери за коришћење укључених навигационих компоненти Боотстрапа.

На овој страници

Басе нав

Навигација доступна у Боотстрап-у дели опште ознаке и стилове, од основне .navкласе до активних и онемогућених стања. Замените класе модификатора да бисте се пребацивали између сваког стила.

Основна .navкомпонента је направљена са флексбоксом и пружа снажну основу за изградњу свих врста навигационих компоненти. Укључује неке замене стилова (за рад са листама), неке допуне линкова за веће погођене области и основни онемогућени стил.

Основна .navкомпонента не укључује ниједно .activeстање. Следећи примери укључују класу, углавном да би показали да ова посебна класа не покреће никакав посебан стил.

Да бисте пренели активно стање помоћним технологијама, користите aria-currentатрибут — користећи pageвредност за тренутну страницу или trueза тренутну ставку у скупу.

<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>с као што је горе, <ol>ако је редослед ваших ставки важан, или направите свој са <nav>елементом. Пошто .navкористи display: flex, навигацијске везе се понашају исто као и навигацијске ставке, али без додатних ознака.

<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компоненте с помоћу модификатора и услужних програма. Мешајте и спајајте по потреби или направите своје.

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

Промените хоризонтално поравнање ваше навигације помоћу флекбок услужних програма . Подразумевано, навигације су поравнате лево, али можете их лако променити у центар или десно.

Центрирано са .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">Disabled</a>
  </li>
</ul>

Десно поравнато са .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">Disabled</a>
  </li>
</ul>

Вертикала

Сложите своју навигацију променом смера флек ставке помоћу .flex-columnуслужног програма. Треба да их сложите на неке оквире за приказ, али не и на друге? Користите респонзивне верзије (нпр. .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">Disabled</a>
  </li>
</ul>

Као и увек, вертикална навигација је могућа и без <ul>с.

<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класу за генерисање интерфејса са картицама. Користите их за креирање региона са табулаторима помоћу нашег ЈаваСцрипт додатка за картицу .

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

пилуле

Узмите исти ХТМЛ, али .nav-pillsуместо тога користите:

<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-itemс, користите .nav-fill. Приметите да је сав хоризонтални простор заузет, али нема свака ставка за навигацију исте ширине.

<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>елементе стила.

<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горе наведеног, свака навигациона ставка ће бити исте ширине.

<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>навигације засноване на -.

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

Рад са флек услужним програмима

Ако су вам потребне варијације за брзу навигацију, размислите о коришћењу серије флекбок услужних програма . Иако су више опширни, ови услужни програми нуде веће прилагођавање преко тачака прекида. У примеру испод, наша навигација ће бити наслагана на најнижој тачки прекида, а затим ће се прилагодити хоризонталном распореду који испуњава доступну ширину почевши од мале тачке прекида.

<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класом, не треба давати role="tablist", role="tab"или role="tabpanel"атрибуте. Они су прикладни само за динамичке интерфејсе са картицама, као што је описано у ВАИ АРИА Аутхоринг Працтицес . Погледајте ЈаваСцрипт понашање за динамичке интерфејсе са картицама у овом одељку за пример. Атрибут aria-currentније неопходан на динамичким интерфејсима са картицама пошто наш ЈаваСцрипт обрађује изабрано стање додавањем aria-selected="true"на активну картицу.

Коришћење падајућих менија

Додајте падајуће меније са мало додатног ХТМЛ-а и падајуће ЈаваСцрипт додатке .

Картице са падајућим менијима

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

Таблете са падајућим менијима

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

Сасс

Променљиве

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

ЈаваСцрипт понашање

Користите ЈаваСцрипт додатак за картицу—укључите га појединачно или кроз компајлирану bootstrap.jsдатотеку—да проширите наше навигационе картице и пилуле како бисте креирали окна локалног садржаја са табовима.

Динамички интерфејси са картицама, као што је описано у ВАИ АРИА ауторским праксама , захтевају role="tablist", role="tab", role="tabpanel", и додатне aria-атрибуте како би пренели своју структуру, функционалност и тренутно стање корисницима помоћних технологија (као што су читачи екрана). Као најбољу праксу, препоручујемо коришћење <button>елемената за картице, јер су то контроле које покрећу динамичку промену, а не везе које воде до нове странице или локације.

Имајте на уму да динамички интерфејси са картицама не би требало да садрже падајуће меније, јер то узрокује проблеме употребљивости и приступачности. Из перспективе употребљивости, чињеница да елемент покретача тренутно приказане картице није одмах видљив (пошто се налази унутар затвореног падајућег менија) може изазвати забуну. Са тачке гледишта приступачности, тренутно не постоји разуман начин да се ова врста конструкције мапира у стандардни ВАИ АРИА образац, што значи да се не може лако учинити разумљивим корисницима помоћних технологија.

Ово је неки садржај чувара места који је повезан са садржајем картице Почетна. Кликом на другу картицу промениће се видљивост ове за следећу. Картица ЈаваСцрипт мења класе да би контролисала видљивост садржаја и стил. Можете га користити са картицама, таблетама и било којом другом .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 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>

Да би се задовољиле ваше потребе, ово функционише са <ul>ознакама заснованим на -, као што је приказано изнад, или са било којим произвољним „убаците сопствене“ ознаке. Имајте на уму да ако користите <nav>, не би требало да додајете role="tablist"директно у њега, јер би то заменило изворну улогу елемента као оријентир за навигацију. Уместо тога, пређите на алтернативни елемент (у примеру испод, једноставан <div>) и омотајте га <nav>око њега.

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

Додатак табс такође ради са пилулама.

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

И са вертикалним пилулама.

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>

Коришћење атрибута података

Можете активирати навигацију по картици или таблетама без писања ЈаваСцрипта једноставним навођењем 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">...</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>

Преко ЈаваСцрипт-а

Омогућите картице са картицама преко ЈаваСцрипт-а (свака картица треба да се активира појединачно):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Појединачне картице можете активирати на неколико начина:

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

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

Методе

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

Све АПИ методе су асинхроне и покрећу транзицију . Они се враћају позиваоцу чим се транзиција започне, али пре него што се заврши . Поред тога, позив методе за прелазну компоненту биће занемарен .

Погледајте нашу ЈаваСцрипт документацију за више информација .

constructor

Активира елемент картице и контејнер садржаја. Картица треба да има или атрибут data-bs-targetили, ако користи везу, hrefатрибут који циља на чвор контејнера у ДОМ-у.

<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 button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

Прикажи

Бира дату картицу и приказује њено повезано окно. Било која друга картица која је претходно изабрана постаје поништена, а повезано окно је скривено. Враћа се позиваоцу пре него што је табулатор стварно приказан (тј. пре него што се shown.bs.tabдогађај деси).

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

  tab.show()

располагати

Уништава картицу елемента.

гетИнстанце

Статичка метода која вам омогућава да добијете инстанцу картице која је повезана са ДОМ елементом

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

гетОрЦреатеИнстанце

Статичка метода која вам омогућава да добијете инстанцу картице повезану са ДОМ елементом или креирате нову у случају да није иницијализована

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

Догађаји

Када се прикаже нова картица, догађаји се активирају следећим редоследом:

hide.bs.tab(на тренутно активној картици)
show.bs.tab(на картици која треба да се прикаже)
hidden.bs.tab(на претходној активној картици, иста као за hide.bs.tabдогађај)
shown.bs.tab(на ново-активној управо приказаној картици, иста као и за show.bs.tabдогађај)

Ако ниједна картица већ није била активна, догађаји hide.bs.tabи hidden.bs.tabнеће бити покренути.

Тип догађаја	Опис
`show.bs.tab`	Овај догађај се покреће у емисији картице, али пре него што је нова картица приказана. Користите `event.target`и `event.relatedTarget`да бисте циљали активну картицу и претходну активну картицу (ако је доступна).
`shown.bs.tab`	Овај догађај се покреће у емисији картице након што се картица прикаже. Користите `event.target`и `event.relatedTarget`да бисте циљали активну картицу и претходну активну картицу (ако је доступна).
`hide.bs.tab`	Овај догађај се покреће када треба да се прикаже нова картица (а самим тим и претходна активна картица треба да буде скривена). Користите `event.target`и `event.relatedTarget`да бисте циљали тренутну активну картицу и нову картицу која ће ускоро бити активна.
`hidden.bs.tab`	Овај догађај се покреће након што се прикаже нова картица (и стога је претходна активна картица скривена). Користите `event.target`и `event.relatedTarget`да бисте циљали претходну активну картицу и нову активну картицу, респективно.

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