Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
Check
in English

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

Дакументацыя і прыклады выкарыстання навігацыйных кампанентаў 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>

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

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

Звярніце ўвагу, што панэлі навігацыі, нават калі яны візуальна аформлены як укладкі з .nav-tabsкласам, не павінны даваць атрыбуты role="tablist", role="tab"або . role="tabpanel"Яны падыходзяць толькі для інтэрфейсаў з дынамічнымі ўкладкамі, як апісана ў шаблоне ўкладак Кіраўніцтва па практыцы стварэння ARIA . Глядзіце ў якасці прыкладу паводзіны JavaScript для дынамічных інтэрфейсаў з укладкамі ў гэтым раздзеле. Атрыбут aria-currentне з'яўляецца неабходным для дынамічных інтэрфейсаў з укладкамі, паколькі наш JavaScript апрацоўвае абраны стан шляхам дадання aria-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 навігацыі цяпер выкарыстоўваюць лакальныя зменныя 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>вакол яго.

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

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

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

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"у кантэйнер са спісам укладак.

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

Падзеі

Пры паказе новай укладкі падзеі запускаюцца ў наступным парадку:

  1. hide.bs.tab(на бягучай актыўнай укладцы)
  2. show.bs.tab(на ўкладцы, якая будзе паказана)
  3. hidden.bs.tab(на папярэдняй актыўнай закладцы, той жа, што і для hide.bs.tabпадзеі)
  4. 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
})