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

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

Бул бетте

Негизги nav

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

Негизги .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">Disabled</a>
  </li>
</ul>

Класстар бүтүндөй колдонулат, андыктан белгилөөңүз өтө ийкемдүү болушу мүмкүн. <ul>Эгер буюмдарыңыздын тартиби маанилүү болсо, жогорудагыдай s колдонуңуз же элемент <ol>менен өзүңүздүн оюңузду тартыңыз. <nav>Колдонгондуктан , навигация шилтемелери 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Модификаторлор жана утилиталар менен s компонентинин стилин өзгөртүңүз . Керек болсо аралаштырып, шайкеш келтириңиз же өзүңүздүнүңүздүн куруңуз.

Горизонталдык тегиздөө

Flexbox утилиталары менен навигацияңыздын горизонталдуу тегиздөөсүн өзгөртүңүз . Демейки боюнча, navs солго тегизделген, бирок сиз аларды оңой эле борборго же оңго тегиздеп өзгөртө аласыз.

Борбордо .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, өтмөктүү интерфейсти түзүү үчүн классты кошот. Аларды биздин өтмөк 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">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">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">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>

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">Disabled</a>
</nav>

Жеткиликтүүлүк жөнүндө

Эгерде сиз навигация тилкесин камсыз кылуу үчүн navs колдонуп жатсаңыз, анда role="navigation"нын эң логикалык негизги контейнерине кошууну <ul>же <nav>элементти бүт навигациянын тегерегине ороп коюуну унутпаңыз. Ролду <ul>өзүнө кошпоңуз, анткени бул анын жардамчы технологиялар аркылуу анык тизме катары жарыяланышына тоскоол болот.

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

Sass

Өзгөрмөлөр

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

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

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

Жана вертикалдуу таблеткалар менен.

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

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

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

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

data-bs-toggle="tab"Сиз жөн гана белгилөө же data-bs-toggle="pill"элемент боюнча эч кандай 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">...</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 button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

Сиз жеке өтмөктөрдү бир нече жол менен иштете аласыз:

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

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

Өнүгүү эффекти

Өтмөктөрдү өчүрүү үчүн, .fadeар бирине кошуңуз .tab-pane. Биринчи өтмөк панели да .showбаштапкы мазмунду көрүнө бериши керек.

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

Методдор

Асинхрондук методдор жана өтүүлөр

Бардык 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 button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

show

Берилген өтмөктү тандап, ага байланыштуу панелди көрсөтөт. Мурда тандалган башка өтмөктөр тандалбай калат жана ага тиешелүү панель жашырылат. Өтмөк панели иш жүзүндө көрсөтүлө электе (б.а. shown.bs.tabокуя болгонго чейин) чалуучуга кайтып келет.

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

  tab.show()

dispose

Элементтин өтмөктү жок кылат.

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окуялар өчүрүлбөйт.

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