in English

Navs

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

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. 
<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" 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>

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

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

O'ngga tekislangan .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" 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>

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

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

<nav class="nav flex-column">
  <a class="nav-link active" 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>

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

Tabletkalar

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" 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>

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

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

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

navigatsiyaga asoslangan .nav-fillmisolga o'xshash .<nav>

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" 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 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, bu 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" 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>

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 ARIA mualliflik amaliyotlari qo‘llanmasi yorliqlari namunasida tasvirlanganidek, faqat dinamik yorliqli interfeyslar uchun mos keladi . Misol uchun ushbu bo'limdagi dinamik yorliqli interfeyslar uchun JavaScript xatti-harakatiga qarang .role="tablist"role="tab"role="tabpanel"

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" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

Ochiladigan tabletkalar

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </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>

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

Agar siz bizning JavaScript-ni manbadan yaratayotgan bo'lsangiz, u talab qiladiutil.js .

ARIA Mualliflik Amaliyotlari Qoʻllanmasida tasvirlangan 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.

Yorliq JavaScript plagini ochiladigan menyularni o'z ichiga olgan yorliqli interfeyslarni qo'llab-quvvatlamasligini yodda tuting, chunki ular foydalanish 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 ushbu turdagi konstruksiyani standart WAI ARIA naqshiga solishning oqilona usuli mavjud emas, ya'ni uni yordamchi texnologiyalar foydalanuvchilari uchun oson tushunib bo'lmaydi.

Yorliqlar paneli uchun joy ushlagich tarkibi. Bu uy sahifasiga tegishli. Sizni milya balandlikka olib boradi, juda baland, chunki u xalqaro tabassumga ega. Yotog‘imda bir notanish odam bor, boshimga urildi. Oh yo'q. Boshqa hayotda seni qolishga majbur qilardim. Chunki men hamma narsaga qodirman. Mening toj jangimga tayyorman. Ota-onangizning spirtli ichimliklarini o'g'irlash va tomga chiqish uchun ishlatilgan. Ohang, sarg'ish mos va tayyor, uni yuqoriga burang, chunki u og'irlashadi. Uning sevgisi giyohvandga o'xshaydi. O'ylaymanki, men tanlovim borligini unutganman.

Yorliqlar paneli uchun joy ushlagich tarkibi. Bu profil yorlig'iga tegishli. Siz eng zo'r arxitekturaga egasiz. Pasport markalari, u kosmopolit. Yaxshi, yangi, shiddatli, biz uni qulflab oldik. Bir kun kelib sizni yo'qotishimni hech qachon rejalashtirmagan edim. U sizning yuragingizni yeydi. Sizning o'pishingiz kosmik, har bir harakatingiz sehrdir. Aytmoqchimanki, u xuddi o‘sha odamdek. Assalomu alaykum azizlar keling sayohatga chiqamiz. 4-iyul kabi kechaga egalik qiling! Lekin siz behuda ketishni afzal ko'rasiz.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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 yoki har qanday o'zboshimchalik bilan "o'zingni 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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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.

Yorliqlar paneli uchun joy ushlagich tarkibi. Bu uy sahifasiga tegishli. Sizni milya balandlikka olib boradi, juda baland, chunki u xalqaro tabassumga ega. Yotog‘imda bir notanish odam bor, boshimga urildi. Oh yo'q. Boshqa hayotda seni qolishga majbur qilardim. Chunki men hamma narsaga qodirman. Mening toj jangimga tayyorman. Ota-onangizning spirtli ichimliklarini o'g'irlash va tomga chiqish uchun ishlatilgan. Ohang, sarg'ish mos va tayyor, uni yuqoriga burang, chunki u og'irlashadi. Uning sevgisi giyohvandga o'xshaydi. O'ylaymanki, men tanlovim borligini unutganman.

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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.

Yorliqlar paneli uchun joy ushlagich tarkibi. Bu uy sahifasiga tegishli. Sizni shahar markazida blyuzlarni kuylayotganingizni ko'rdim. Drenaj atrofida aylanib yurganingizga qarang. Nega meni to'xtatishga ruxsat bermaysiz? Toj kiygan bosh og'ir. Ha, biz farishtalarni yig'laymiz, yerga tepadan yomg'ir yog'diramiz. Shouni 3D, filmda ko'rmoqchiman. Qachondir o'zingizni his qilasizmi, qog'oz juda nozik. Bu ha yoki yo'q, ehtimol yo'q.

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-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-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </div>
  </div>
  <div class="col-9">
    <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>
</div>

Ma'lumotlar atributlaridan foydalanish

Siz biron bir JavaScript yozmasdan yorliq yoki tabletka navigatsiyasini oddiygina belgilab data-toggle="tab"yoki data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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):

$('#myTab button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Siz alohida yorliqlarni bir necha usul bilan faollashtirishingiz mumkin:

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').tab('show') // Select third 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 .

$().tab

Yorliq elementi va kontent konteynerini faollashtiradi. Yorliqda data-targetyoki havola ishlatilsa, hrefDOMdagi 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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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-toggle="tab" data-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>
  $(function () {
    $('#myTab li:last-child button').tab('show')
  })
</script>

.tab('shou')

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.

$('#someTab').tab('show')

.tab('tashlash')

Elementning yorlig'ini yo'q qiladi.

Voqealar

Yangi yorliq ko'rsatilganda voqealar quyidagi tartibda yonadi:

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

Agar hech qanday yorliq 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.targetfoydalaning .event.relatedTarget
ko'rsatilgan.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.targetfoydalaning .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.targetfoydalaning .event.relatedTarget
yashirin.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.targetva dan foydalaning .event.relatedTarget 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})