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

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

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

Басе нав

Навигација доступна у Боотстрап-у дели опште ознаке и стилове, од основне .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>

ЦСС

Променљиве

Додато у в5.2.0

Као део Боотстрап-овог еволуирајућег приступа ЦСС варијабли, навс сада користи локалне ЦСС променљиве на .nav, .nav-tabs, и .nav-pillsза побољшано прилагођавање у реалном времену. Вредности за ЦСС променљиве се постављају преко Сасс-а, тако да је и Сасс прилагођавање и даље подржано.

На .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};

Сасс варијабле

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

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

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

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

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

Приступачност

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

У складу са шаблоном АРИА Аутхоринг Працтицес, само тренутно активна картица добија фокус тастатуре. Када се ЈаваСцрипт додатак иницијализује, он ће се поставити tabindex="-1"на све контроле неактивних картица. Када тренутно активна картица има фокус, тастери са курсором активирају претходну/следећу картицу, а додатак мења кретањеtabindex у складу са тим. Међутим, имајте на уму да ЈаваСцрипт додатак не прави разлику између хоризонталних и вертикалних листа картица када су у питању интеракције тастера са курсором: без обзира на оријентацију листе картица, и курсор нагоре и налево иду на претходну картицу, а курсор надоле и десно иду на следећа картица.

Уопштено говорећи, да би се олакшала навигација тастатуром, препоручује се да и сами панели картица буду фокусирани, осим ако је први елемент који садржи смислен садржај унутар табла са картицама већ у фокусу. ЈаваСцрипт додатак не покушава да обради овај аспект — где је то прикладно, мораћете да експлицитно учините да панели картица буду фокусирани тако што ћете додати tabindex="0"своје ознаке.

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

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

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

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

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

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>

Методе

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

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

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

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

Можете креирати инстанцу картице помоћу конструктора, на пример:

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

Метод	Опис
`dispose`	Уништава картицу елемента.
`getInstance`	Статички метод који вам омогућава да добијете инстанцу картице повезану са ДОМ елементом, можете је користити овако: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Статичка метода која враћа инстанцу картице која је повезана са ДОМ елементом или креира нову у случају да није иницијализована. Можете га користити овако: `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
})