Навіны і ўкладкі

Дакументацыя і прыклады выкарыстання навігацыйных кампанентаў Bootstrap.

На гэтай старонцы

Base nav

Навігацыя, даступная ў Bootstrap, падзяляе агульную разметку і стылі, ад базавага .navкласа да актыўнага і адключанага станаў. Мяняйце класы мадыфікатараў для пераключэння паміж кожным стылем.

Базавы .navкампанент створаны з дапамогай flexbox і забяспечвае трывалую аснову для стварэння ўсіх тыпаў навігацыйных кампанентаў. Ён уключае некаторыя перавызначэнні стыляў (для працы са спісамі), некаторую запаўненне спасылак для вялікіх абласцей трапленняў і асноўны стыль для адключэнняў.

Базавы .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Класы выкарыстоўваюцца паўсюль, таму ваша разметка можа быць вельмі гнуткай. Выкарыстоўвайце <ul>s, як паказана вышэй, <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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Даступныя стылі

Змяніце стыль .navкампанента s з дапамогай мадыфікатараў і ўтыліт. Змешвайце і спалучайце па меры неабходнасці або стварайце ўласныя.

Гарызантальнае выраўноўванне

Змяніце гарызантальнае выраўноўванне вашай навігацыі з дапамогай утыліт flexbox . Па змаўчанні навігацыі выраўнаваны па левым краі, але вы можаце лёгка змяніць іх па цэнтры або па правым краі.

Па цэнтры .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Выраўнавана па правым краі .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Вертыкальны

Складзіце вашу навігацыю, змяніўшы кірунак гнуткага элемента з дапамогай .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Як заўсёды, вертыкальная навігацыя магчымая і без <ul>s.

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Укладкі

Бярэ асноўную навігацыю зверху і дадае .nav-tabsклас для стварэння інтэрфейсу з укладкамі. Выкарыстоўвайце іх для стварэння абласцей з укладкамі з дапамогай нашага плагіна JavaScript для ўкладак .

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Таблеткі

Вазьміце той жа HTML, але выкарыстоўвайце .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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Запоўніце і абгрунтуйце

Прымусьце ваш .navзмест пашырыць поўную даступную шырыню аднаго з двух класаў мадыфікатараў. Каб прапарцыйна запоўніць усю даступную прастору вашым .nav-items, выкарыстоўвайце .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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Праца з утылітамі flex

Калі вам патрэбны адаптыўныя варыянты навігацыі, падумайце аб выкарыстанні серыі ўтыліт flexbox . Нягледзячы на тое, што гэтыя ўтыліты больш падрабязныя, яны прапануюць лепшыя магчымасці налады па адаптыўных кропках прыпынку. У прыведзеным ніжэй прыкладзе наша навігацыя будзе складзена на самай ніжняй кропцы разрыву, а затым адаптуецца да гарызантальнага макета, які запаўняе даступную шырыню, пачынаючы з малой кропкі разрыву.

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

Наконт даступнасці

Калі вы выкарыстоўваеце navs, каб забяспечыць панэль навігацыі, не забудзьцеся дадаць role="navigation"у найбольш лагічны бацькоўскі кантэйнер <ul>або абгарнуць <nav>элемент вакол усёй навігацыі. Не дадавайце ролю ў <ul>саму сябе, бо гэта не дазволіць аб'явіць яе як сапраўдны спіс дапаможнымі тэхналогіямі.

Звярніце ўвагу, што панэлі навігацыі, нават калі яны візуальна аформлены як укладкі з .nav-tabsкласам, не павінны даваць role="tablist", role="tab"або role="tabpanel"атрыбуты. Яны прыдатныя толькі для дынамічных інтэрфейсаў з укладкамі, як апісана ў WAI ARIA Authoring Practices . Глядзіце ў якасці прыкладу паводзіны JavaScript для дынамічных інтэрфейсаў з укладкамі ў гэтым раздзеле. Атрыбут aria-currentне з'яўляецца неабходным для дынамічных інтэрфейсаў з укладкамі, паколькі наш JavaScript апрацоўвае абраны стан шляхам дадання aria-selected="true"на актыўнай укладцы.

Выкарыстанне выпадаючых спісаў

Дадайце выпадаючыя меню з невялікай колькасцю дадатковага HTML і плагіна для выпадаючых спісаў JavaScript .

Укладкі з выпадальным меню

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Таблеткі з выпадальным меню

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Сас

Пераменныя

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Паводзіны JavaScript

Выкарыстоўвайце плагін JavaScript для ўкладак — уключыце яго асобна або праз скампіляваны bootstrap.jsфайл — каб пашырыць нашы навігацыйныя ўкладкі і таблеткі для стварэння панэлі лакальнага кантэнту з укладкамі.

Дынамічныя інтэрфейсы з укладкамі, як апісана ў WAI ARIA Authoring Practices , патрабуюць role="tablist", role="tab", role="tabpanel"і дадатковых aria-атрыбутаў, каб перадаць сваю структуру, функцыянальнасць і бягучы стан карыстальнікам дапаможных тэхналогій (такіх як праграмы чытання з экрана). У якасці найлепшай практыкі мы рэкамендуем выкарыстоўваць <button>элементы для ўкладак, бо гэта элементы кіравання, якія выклікаюць дынамічныя змены, а не спасылкі, якія вядуць на новую старонку або месца.

Звярніце ўвагу, што дынамічныя інтэрфейсы з укладкамі не павінны ўтрымліваць выпадаючыя меню, бо гэта выклікае праблемы як з зручнасцю выкарыстання, так і з даступнасцю. З пункту гледжання зручнасці выкарыстання, той факт, што элемент запуску ўкладкі, які адлюстроўваецца ў дадзены момант, бачны не адразу (паколькі ён знаходзіцца ў закрытым выпадальным меню), можа выклікаць блытаніну. З пункту гледжання даступнасці ў цяперашні час не існуе разумнага спосабу супаставіць такую канструкцыю са стандартным шаблонам WAI ARIA, што азначае, што яе немагчыма зрабіць зразумелай для карыстальнікаў дапаможных тэхналогій.

Гэта некаторае змесціва запаўняльніка, звязанае з змесцівам укладкі "Галоўная". Націск на іншую ўкладку пераключыць бачнасць гэтай для наступнай. Укладка JavaScript мяняе класы для кіравання бачнасцю змесціва і стылем. Вы можаце выкарыстоўваць яго з укладкамі, таблеткамі і любой іншай .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>

Убудова tabs таксама працуе з таблеткамі.

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

Выкарыстанне атрыбутаў дадзеных

Вы можаце актываваць навігацыю па ўкладках або таблетках без напісання 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">...</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>

Праз JavaScript

Уключыць укладкі з дапамогай JavaScript (кожную ўкладку неабходна актываваць асобна):

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

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

Вы можаце актываваць асобныя ўкладкі некалькімі спосабамі:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab

Эфект выцвітання

Каб укладкі знікалі, дадайце .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>

Метады

Асінхронныя метады і пераходы

Усе метады API асінхронныя і пачынаюць пераход . Яны вяртаюцца да абанента, як толькі пачынаецца пераход, але да яго заканчэння . Акрамя таго, выклік метаду пераходнага кампанента будзе ігнаравацца .

Для атрымання дадатковай інфармацыі глядзіце нашу дакументацыю па JavaScript .

constructor

Актывуе элемент укладкі і кантэйнер змесціва. Укладка павінна мець атрыбут data-bs-targetабо, пры выкарыстанні спасылкі, hrefатрыбут, накіраваны на вузел кантэйнера ў DOM.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child a')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

паказаць

Выбірае дадзеную ўкладку і паказвае звязаную з ёй панэль. Любая іншая ўкладка, якая была выбрана раней, становіцца невыбранай, а звязаная з ёй панэль схавана. Вяртаецца да абанента да таго, як панэль укладак была фактычна паказана (г.зн. да таго , як shown.bs.tabадбудзецца падзея).

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

  tab.show()

распараджацца

Знішчае ўкладку элемента.

getInstance

Статычны метад, які дазваляе атрымаць асобнік укладкі, звязаны з элементам DOM

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

getOrCreateInstance

Статычны метад, які дазваляе вам атрымаць асобнік укладкі, звязаны з элементам DOM, або стварыць новы, калі ён не быў ініцыялізаваны

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