Navs va yorliqlar

Bootstrap-ning navigatsiya komponentlaridan qanday foydalanish bo'yicha hujjatlar va misollar.

Ushbu sahifada

Asosiy nav

.navBootstrap-da mavjud navigatsiya asosiy sinfdan faol va o'chirilgan holatlargacha bo'lgan umumiy belgilar va uslublarni taqsimlaydi . Har bir uslub oʻrtasida almashish uchun modifikator sinflarini almashtiring.

Asosiy .navkomponent flexbox bilan qurilgan va barcha turdagi navigatsiya komponentlarini yaratish uchun mustahkam poydevor yaratadi. U ba'zi uslublarni bekor qilishni (ro'yxatlar bilan ishlash uchun), kattaroq tegish joylari uchun havolalarni to'ldirishni va asosiy o'chirilgan uslubni o'z ichiga oladi.

Asosiy .navkomponent hech qanday holatni o'z ichiga olmaydi .active. Quyidagi misollar sinfni o'z ichiga oladi, asosan bu alohida sinf hech qanday maxsus uslubni ishga tushirmasligini ko'rsatish uchun.

Faol holatni yordamchi texnologiyalarga etkazish uchun aria-currentatributdan foydalaning — pagejoriy sahifa qiymati yoki truetoʻplamdagi joriy element uchun.

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

Sinflar davomida ishlatiladi, shuning uchun belgilashingiz juda moslashuvchan bo'lishi mumkin. <ul>Agar narsalaringiz tartibi muhim bo'lsa, yuqoridagi kabi s dan foydalaning <ol>yoki o'zingizni <nav>element bilan aylantiring. Foydalanishlari sababli, .navnavigatsiya display: flexhavolalari nav elementlari bilan bir xil ishlaydi, ammo qo'shimcha belgilarsiz.

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

Mavjud uslublar

.navModifikatorlar va yordamchi dasturlar yordamida s komponentining uslubini o'zgartiring. Agar kerak bo'lsa, aralashtiring va moslang yoki o'zingizni yarating.

Gorizontal tekislash

Navigatoringizning gorizontal hizalanishini flexbox yordam dasturlari bilan o'zgartiring . Odatiy bo'lib, navbatlar chapga hizalanadi, lekin siz ularni markazga yoki o'ngga osongina o'zgartirishingiz mumkin.

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

O'ngga tekislangan .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>

Vertikal

Yordamchi dastur yordamida moslashuvchan element yo'nalishini o'zgartirib, navigatsiyangizni to'plang .flex-column. Ularni ba'zi ko'rish oynalarida to'plash kerakmi, boshqalari emasmi? Javob beruvchi versiyalardan foydalaning (masalan, .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>

Har doimgidek, vertikal navigatsiya <ul>s holda ham mumkin.

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

Yorliqlar

Yuqoridan asosiy navbatni oladi va .nav-tabsyorliqli interfeys yaratish uchun sinfni qo'shadi. Bizning tab JavaScript plaginimiz bilan tabbable hududlarni yaratish uchun ulardan foydalaning .

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

Tabletkalar

Xuddi shu HTMLni oling, lekin .nav-pillso'rniga foydalaning:

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

To'ldiring va asoslang

Tarkibingizni .navikkita modifikator sinfidan birining to'liq mavjud kengligini kengaytirishga majburlang. Barcha mavjud bo'sh joyni s bilan mutanosib ravishda to'ldirish uchun .nav-itemdan foydalaning .nav-fill. E'tibor bering, barcha gorizontal bo'sh joy egallangan, ammo har bir nav elementi bir xil kenglikka ega emas.

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

Asoslangan navigatsiyadan foydalanganda , faqat uslublash elementlari uchun zarur bo'lganligi sababli <nav>xavfsiz o'tkazib yuborishingiz mumkin ..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>

Teng kenglikdagi elementlar uchun dan foydalaning .nav-justified. Barcha gorizontal bo'shliqlar navbatma-navbat havolalari bilan band bo'ladi, lekin .nav-fillyuqoridagilardan farqli o'laroq, har bir navbat elementi bir xil kenglikda bo'ladi.

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

navigatsiyaga asoslangan .nav-fillmisolga o'xshash .<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 utilitlari bilan ishlash

Agar sizga sezgir navigatsiya o'zgarishlari kerak bo'lsa, bir qator flexbox yordam dasturlaridan foydalanishni o'ylab ko'ring . Ko'proq batafsil ma'lumotga ega bo'lsa-da, ushbu yordam dasturlari sezgir to'xtash nuqtalarida ko'proq moslashtirishni taklif qiladi. Quyidagi misolda bizning navbatimiz eng past to'xtash nuqtasiga joylashtiriladi, keyin kichik to'xtash nuqtasidan boshlab mavjud kenglikni to'ldiradigan gorizontal tartibga moslashadi.

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

Foydalanish imkoniyati haqida

Agar siz navigatsiya panelini taqdim qilish uchun navlardan foydalanayotgan bo'lsangiz, role="navigation"ning eng mantiqiy ota-konteyneriga a qo'shing <ul>yoki <nav>elementni butun navigatsiya atrofiga o'rashni unutmang. Rolni o'ziga qo'shmang <ul>, chunki bu uning yordamchi texnologiyalar tomonidan haqiqiy ro'yxat sifatida e'lon qilinishiga to'sqinlik qiladi.

Yodda tutingki, navigatsiya paneli, hatto .nav-tabssinf bilan yorliqlar sifatida tasvirlangan bo'lsa ham , , yoki atributlar berilmasligi kerak . Bular WAI ARIA mualliflik amaliyotlarida tasvirlanganidek, faqat dinamik yorliqli interfeyslar uchun mos keladi . Misol uchun ushbu bo'limdagi dinamik yorliqli interfeyslar uchun JavaScript xatti-harakatiga qarang . Atribut dinamik yorliqli interfeyslarda kerak emas, chunki bizning JavaScript tanlangan holatni faol yorliqga qo'shish orqali boshqaradi.role="tablist"role="tab"role="tabpanel" aria-currentaria-selected="true"

Ochiladigan menyulardan foydalanish

Bir oz qo'shimcha HTML va ochiladigan menyular JavaScript plagini bilan ochiladigan menyularni qo'shing .

Ochiladigan yorliqlar

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

Ochiladigan tabletkalar

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

Sass

O'zgaruvchilar

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

bootstrap.jsMahalliy kontentning yorliqli panellarini yaratish uchun navigatsiya yorliqlarimiz va tabletkalarimizni kengaytirish uchun JavaScript plaginidan foydalaning (uni alohida yoki tuzilgan fayl orqali kiriting).

WAI ARIA Authoring Practices da tavsiflangan dinamik yorliqli interfeyslar, ularning tuzilishi, funksionalligi va joriy holatini yordamchi texnologiyalar foydalanuvchilariga (masalan, ekranni oʻqish dasturlari) yetkazish uchun role="tablist", role="tab", role="tabpanel", va qoʻshimcha atributlarni talab qiladi . aria-Eng yaxshi amaliyot sifatida biz <button>yorliqlar uchun elementlardan foydalanishni tavsiya qilamiz, chunki ular yangi sahifa yoki manzilga oʻtadigan havolalar emas, balki dinamik oʻzgarishlarni keltirib chiqaradigan boshqaruv elementlari.

Dinamik yorliqli interfeyslarda ochiladigan menyular bo'lmasligi kerakligini unutmang , chunki bu foydalanish qulayligi va foydalanish imkoniyati bilan bog'liq muammolarni keltirib chiqaradi. Foydalanish nuqtai nazaridan, hozirda ko'rsatilgan yorliqning tetik elementi darhol ko'rinmasligi (u yopiq ochiladigan menyuda bo'lgani kabi) chalkashlikka olib kelishi mumkin. Mavjudlik nuqtai nazaridan, hozirda bu turdagi konstruksiyani standart WAI ARIA naqshiga solishning oqilona usuli yo‘q, ya’ni uni yordamchi texnologiyalar foydalanuvchilari uchun osonlik bilan tushunib bo‘lmaydi.

Bu “Uy” sahifasi bilan bog‘langan ba’zi to‘ldiruvchi kontent. Boshqa varaqni bosish buning keyingisiga koʻrinishini oʻzgartiradi. JavaScript yorlig'i kontent ko'rinishini va uslubni boshqarish uchun sinflarni almashtiradi. Siz uni yorliqlar, tabletkalar va boshqa har qanday .navnavigatsiya bilan ishlatishingiz mumkin.

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>

Ehtiyojlaringizni qondirishga yordam berish uchun, bu <ul>yuqorida ko'rsatilganidek, asosli belgilash bilan yoki har qanday o'zboshimchalik bilan "o'zingizni siljitish" belgisi bilan ishlaydi. E'tibor bering, agar siz dan foydalanayotgan bo'lsangiz <nav>, unga to'g'ridan-to'g'ri qo'shmasligingiz kerak role="tablist", chunki bu elementning navigatsiya belgisi sifatida asosiy rolini bekor qiladi. Buning o'rniga, muqobil elementga o'ting (quyidagi misolda oddiy <div>) va uning <nav>atrofini o'rab oling.

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

Tablar plagini tabletkalar bilan ham ishlaydi.

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

Va vertikal tabletkalar bilan.

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>

Ma'lumotlar atributlaridan foydalanish

Siz biron bir JavaScript yozmasdan yorliq yoki tabletka navigatsiyasini oddiygina belgilab data-bs-toggle="tab"yoki data-bs-toggle="pill"elementda faollashtirishingiz mumkin. Ushbu ma'lumotlar atributlaridan .nav-tabsyoki da foydalaning .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 orqali

JavaScript orqali yorliqli yorliqlarni yoqish (har bir yorliq alohida faollashtirilishi kerak):

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

Siz alohida yorliqlarni bir necha usul bilan faollashtirishingiz mumkin:

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

Yopish effekti

Yorliqlarni .fadeoʻchirish uchun har biriga qoʻshing .tab-pane. Birinchi yorliq paneli ham .showboshlang'ich tarkibni ko'rinadigan qilish kerak.

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

Usullari

Asinxron usullar va o'tishlar

Barcha API usullari asenkron va o'tishni boshlaydi . O'tish boshlanishi bilanoq, lekin tugashidan oldin ular qo'ng'iroq qiluvchiga qaytadilar . Bundan tashqari, o'tish komponentidagi usul chaqiruvi e'tiborga olinmaydi .

Qo'shimcha ma'lumot olish uchun bizning JavaScript hujjatlariga qarang .

constructor

Yorliq elementi va kontent konteynerini faollashtiradi. Yorliqda data-bs-targetyoki havola ishlatilsa href, DOMdagi konteyner tuguniga mo'ljallangan atribut bo'lishi kerak.

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

show

Berilgan yorliqni tanlaydi va unga bog'langan panelni ko'rsatadi. Oldin tanlangan har qanday boshqa yorliq tanlanmagan bo'ladi va u bilan bog'liq bo'lgan panel yashiriladi. Qo'ng'iroq qiluvchiga yorliqlar paneli ko'rsatilishidan oldin (ya'ni shown.bs.tabvoqea sodir bo'lishidan oldin) qaytadi.

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

  tab.show()

dispose

Elementning yorlig'ini yo'q qiladi.

getInstance

DOM elementi bilan bog'langan yorliq misolini olish imkonini beruvchi statik usul

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

getOrCreateInstance

DOM elementi bilan bog'langan yorliq misolini olish yoki agar u ishga tushirilmagan bo'lsa, yangisini yaratish imkonini beruvchi statik usul

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

Events

Yangi yorliq ko'rsatilganda voqealar quyidagi tartibda yonadi:

hide.bs.tab(joriy faol yorliqda)
show.bs.tab(ko'rsatiladigan yorliqda)
hidden.bs.tab(oldingi faol yorliqda, voqea uchun bir xil hide.bs.tab)
shown.bs.tab(yangi faol ko'rsatilgan yorliqda, xuddi show.bs.tabvoqea uchun)

Hech qanday yorliq allaqachon faol bo'lmagan bo'lsa, hide.bs.tabva hidden.bs.tabvoqealari o'chirilmaydi.

Tadbir turi	Tavsif
`show.bs.tab`	Bu voqea tab ko'rsatishda ishga tushadi, lekin yangi tab ko'rsatilishidan oldin. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va `event.target`foydalaning .`event.relatedTarget`
`shown.bs.tab`	Ushbu hodisa varaq ko'rsatilgandan so'ng yorliqlar ko'rsatishda ishga tushadi. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va `event.target`foydalaning .`event.relatedTarget`
`hide.bs.tab`	Ushbu hodisa yangi yorliq ko'rsatilishi kerak bo'lganda boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Joriy faol yorliq va yaqinda faol boʻladigan yangi yorliq uchun mos ravishda va `event.target`foydalaning .`event.relatedTarget`
`hidden.bs.tab`	Ushbu hodisa yangi yorliq ko'rsatilgandan so'ng boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Oldingi faol yorliq va yangi faol yorliq uchun mos ravishda `event.target`va dan foydalaning .`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
})