Navs жана өтмөктөр

Bootstrap камтылган навигация компоненттерин кантип колдонуу керектиги боюнча документтер жана мисалдар.

Бул бетте

Негизги nav

.navBootstrap'те жеткиликтүү навигация негизги класстан активдүү жана өчүрүлгөн абалга чейин жалпы белгилөө жана стилдерди бөлүшөт. Ар бир стилди алмаштыруу үчүн өзгөрткүч класстарын алмаштырыңыз.

Негизги .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 элементтериндей эле иштейт, бирок кошумча белгилөөсүз .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 утилиталары менен навигацияңыздын горизонталдуу тегиздөөсүн өзгөртүңүз . Демейки боюнча, navs солго тегизделген, бирок сиз аларды оңой эле борборго же оңго тегиздеп өзгөртө аласыз.

Борбордо .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>.

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класс менен өтмөктөр катары визуалдык стилде болсо дагы , , же атрибуттар берилбеши керек . Булар ARIA Authoring Practices Guide өтмөк үлгүсүндө сүрөттөлгөндөй динамикалык өтмөктүү интерфейстерге гана ылайыктуу . Мисал үчүн бул бөлүмдөгү динамикалык өтмөктүү интерфейстер үчүн JavaScript жүрүм -турумун караңыз . Бул атрибут динамикалык өтмөктүү интерфейстерде талап кылынбайт, анткени биздин JavaScript тандалган абалды активдүү өтмөккө кошуу менен иштетет.role="tablist"role="tab"role="tabpanel"aria-currentaria-selected="true"

Ашылмаларды колдонуу

Бир аз кошумча HTML жана ачылуучу JavaScript плагини менен ачылуучу менюларды кошуңуз .

ылдый түшүүчү өтмөктөр

html

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

Таблеткалар ылдый түшүүчү

html

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

CSS

Өзгөрмөлөр

v5.2.0 кошулган

Bootstrap'тин өнүгүп жаткан CSS өзгөрмөлөр ыкмасынын бир бөлүгү катары, navs азыр , боюнча жергиликтүү CSS өзгөрмөлөрүн .navжана .nav-tabsреалдуу .nav-pillsубакыт режиминде ыңгайлаштыруу үчүн колдонушат. CSS өзгөрмөлөрүнүн маанилери Sass аркылуу коюлат, ошондуктан Sass ыңгайлаштыруу дагы деле колдоого алынат.

.navНегизги класста :

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Модификатор классында .nav-tabs:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Модификатор классында .nav-pills:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

Sass өзгөрмөлөрү

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

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

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

JavaScript жүрүм-туруму

Таблетка JavaScript плагинин колдонуңуз — аны өзүнчө же компиляцияланган bootstrap.jsфайл аркылуу кошуңуз — жергиликтүү мазмундун өтүлүүчү панелдерин түзүү үчүн биздин навигациялык өтмөктөрдү жана таблеткаларды кеңейтүү үчүн.

Бул Башкы бет өтмөгүнүн байланышкан мазмуну. Башка өтмөктү чыкылдатсаңыз, анын кийинки өтмөккө көрүнүү мүмкүнчүлүгү өчүрүлөт. JavaScript өтмөгү мазмундун көрүнүшүн жана стилин көзөмөлдөө үчүн класстарды алмаштырат. Сиз аны өтмөктөр, таблеткалар жана башка ар кандай .navнавигация менен колдоно аласыз.

Бул Профиль өтмөгүнүн байланышкан мазмунунун кээ бир толтуруучу мазмуну. Башка өтмөктү чыкылдатсаңыз, анын кийинки өтмөккө көрүнүү мүмкүнчүлүгү өчүрүлөт. JavaScript өтмөгү мазмундун көрүнүшүн жана стилин көзөмөлдөө үчүн класстарды алмаштырат. Сиз аны өтмөктөр, таблеткалар жана башка ар кандай .navнавигация менен колдоно аласыз.

This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

Сиздин муктаждыктарыңызга дал келүүгө жардам берүү үчүн, бул <ul>жогоруда көрсөтүлгөндөй -негизделген белгилөө менен же каалаган "өзүңүздүн оюңузча" белгилөө менен иштейт. Колдонуп жатсаңыз <nav>, role="tablist"ага түздөн-түз кошпоңуз, анткени бул элементтин навигация белгиси катары түпнуска ролун жокко чыгарат. Анын ордуна, альтернативдүү элементке которулуңуз (төмөндөгү мисалда, жөнөкөй <div>) жана анын <nav>айланасын ороп алыңыз.

This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Disabled tab's associated content.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

Таблеткалар плагини таблеткалар менен да иштейт.

This is some placeholder content the Disabled tab's associated content.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Жана вертикалдуу таблеткалар менен. Идеалында, вертикалдуу өтмөктөр үчүн, сиз да aria-orientation="vertical"өтмөк тизмеси контейнерине кошуу керек.

This is some placeholder content the Disabled tab's associated content.

This is some placeholder content the Messages tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

This is some placeholder content the Settings tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.

<div class="d-flex align-items-start">
  <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="v-pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</button>
    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
  </div>
  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Жеткиликтүүлүк

ARIA 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 үлгүсүнө түшүрүүнүн акылга сыярлык жолу жок, башкача айтканда, аны жардамчы технологиялардын колдонуучулары үчүн оңой эле түшүнүү мүмкүн эмес.

Маалымат атрибуттарын колдонуу

data-bs-toggle="tab"Сиз жөн гана белгилөө же data-bs-toggle="pill"элемент боюнча эч кандай JavaScript жазбастан өтмөктү же таблетка навигациясын иштете аласыз . Бул маалымат атрибуттарын .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')

Метод	Description
`dispose`	Элементтин өтмөктү жок кылат.
`getInstance`	DOM элементи менен байланышкан өтмөк үлгүсүн алууга мүмкүндүк берген статикалык ыкма, сиз аны төмөнкүдөй колдоно аласыз: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Статикалык ыкма, ал DOM элементине байланышкан өтмөк инстанциясын кайтарат же ал инициализацияланбаган учурда жаңысын түзөт. Сиз аны төмөнкүдөй колдоно аласыз: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Берилген өтмөктү тандап, ага байланыштуу панелди көрсөтөт. Мурда тандалган башка өтмөктөр тандалбай калат жана ага тиешелүү панель жашырылат. Өтмөк панели иш жүзүндө көрсөтүлө электе (б.а. `shown.bs.tab`окуя болгонго чейин) чалуучуга кайтып келет.

Окуялар

Жаңы өтмөктү көрсөткөндө, окуялар төмөнкү тартипте күйөт:

hide.bs.tab(учурдагы активдүү өтмөктө)
show.bs.tab(көрсөтүлө турган өтмөктө)
hidden.bs.tab(мурунку активдүү өтмөктө, hide.bs.tabокуяга окшош)
shown.bs.tab(жаңыдан активдүү болгон өтмөктө, show.bs.tabокуяга окшош)

Эгерде эч кандай өтмөк активдүү болбосо, анда hide.bs.tabжана hidden.bs.tabокуялар өчүрүлбөйт.

Окуя түрү	Description
`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
})