in English

Навс

Ҳуҷҷатҳо ва мисолҳо барои истифодаи ҷузъҳои навигатсионии Bootstrap.

Пойгоҳи нав

Навигатсия, ки дар Bootstrap дастрас аст, нишонаҳо ва услубҳои умумиро аз .navсинфи асосӣ то ҳолати фаъол ва ғайрифаъол тақсим мекунад. Синфҳои тағирдиҳандаро иваз кунед, то байни ҳар як услуб гузаред.

Ҷузъи асосӣ .navбо flexbox сохта шудааст ва барои сохтани ҳама намуди ҷузъҳои навигатсия заминаи қавӣ фароҳам меорад. Он дорои баъзе баргардонидани услубҳо (барои кор бо рӯйхатҳо), баъзе замимаи истинод барои минтақаҳои калонтар ва ороиши асосии ғайрифаъол.

Ҷузъи асосӣ .navягон ҳолатро дар бар намегирад .active. Намунаҳои зерин синфро дар бар мегиранд, асосан барои нишон додани он, ки ин синфи мушаххас ягон услуби махсусро ба вуҷуд намеорад. 
<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>

Дарсҳо дар саросари ҷаҳон истифода мешаванд, аз ин рӯ аломатгузории шумо метавонад хеле чандир бошад. Агар тартиби ҷузъҳои шумо муҳим бошад, <ul>s-ро мисли дар боло зикршуда истифода баред , ё худатонро бо элемент гузоред. Азбаски истифодабарии , истинодҳои нав ҳамон тавре рафтор мекунанд, ки ҷузъҳои nav, вале бидуни аломатгузории иловагӣ.<ol><nav>.navdisplay: flex

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

Услубҳои дастрас

Тарзи .navҷузъи s-ро бо тағирдиҳандаҳо ва утилитаҳо тағир диҳед. Агар лозим бошад, омехта кунед ва мувофиқ кунед ё худатон созед.

Ҳамоҳангсозии уфуқӣ

Ҳамоҳангсозии уфуқии navi-и худро бо утилитҳои flexbox тағир диҳед . Бо нобаёнӣ, наворҳо ба тарафи чап ҳамоҳанг карда мешаванд, аммо шумо метавонед онҳоро ба осонӣ ба марказ ё рост ҳамоҳангшуда иваз кунед.

Дар марказ бо .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>

Ба тарафи рост ҳамоҳангшуда бо .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>

Амудӣ

Тавассути тағир додани самти ҷузъҳои тағйирёбанда бо утилит паймоиши худро ҷойгир кунед .flex-column. Оё лозим аст, ки онҳоро дар баъзе намоишгоҳҳо ҷойгир кунед, аммо дар дигарон не? Версияҳои ҷавобиро истифода баред (масалан, .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>

Чун ҳамеша, паймоиши амудӣ бидуни <ul>s низ имконпазир аст.

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

Ҷадвалҳо

Нави асосиро аз боло мегирад ва .nav-tabsсинфро барои тавлиди интерфейси ҷадвалбандишуда илова мекунад. Онҳоро барои сохтани минтақаҳои ҷадвалбандишаванда бо плагини JavaScript ҷадвали мо истифода баред .

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

Ҳабҳо

Ҳамон HTML-ро гиред, аммо ба ҷои ин истифода баред .nav-pills:

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

Пур кардан ва асоснок кардан

Маҷбур кунед .nav, ки мундариҷаи худро барои васеъ кардани паҳнои пурраи дастрас яке аз ду синфи тағирдиҳанда. Барои мутаносиб пур кардани тамоми фазои дастрас бо .nav-items, истифода баред .nav-fill. Аҳамият диҳед, ки тамоми фазои уфуқӣ ишғол шудааст, аммо на ҳар як банди нав паҳнои якхела дорад.

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

Ҳангоми истифодабарии <nav>навигатсия дар асоси, шумо метавонед онро бехатар тарк кунед, .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>

Барои унсурҳои паҳнои баробар, истифода баред .nav-justified. Ҳама фазои уфуқӣ бо истинодҳои нав ишғол карда мешавад, аммо бар хилофи дар .nav-fillболо зикршуда, ҳар як ҷузъи нав як паҳно хоҳад буд.

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

Монанд ба .nav-fillмисоли истифодаи <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

Агар ба шумо вариантҳои навсозии ҷавобгӯ ниёз дошта бошед, дар бораи истифодаи як қатор утилитаҳои flexbox фикр кунед . Дар ҳоле ки муфассалтар, ин утилитҳо мутобиқсозии бештарро дар байни нуқтаҳои қатъшавии ҷавоб пешниҳод мекунанд. Дар мисоли зер, навоварии мо дар нуқтаи пасттарин ҷойгир карда мешавад ва сипас ба тарҳбандии уфуқӣ мутобиқ мешавад, ки паҳнои дастрасро аз нуқтаи хурд сар карда пур мекунад.

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

Дар бораи дастрасӣ

Агар шумо navs-ро барои таъмин кардани сатри паймоиш истифода баред, боварӣ ҳосил кунед, ки role="navigation"ба контейнери волидайнии мантиқӣ илова кунед <ul>ё <nav>элементро дар атрофи тамоми паймоиш печонед. Нақшро ба худ илова накунед <ul>, зеро ин имкон намедиҳад, ки он ҳамчун рӯйхати воқеӣ тавассути технологияҳои ёрирасон эълон карда шавад.

Дар хотир доред, ки панҷараҳои паймоиш, ҳатто агар ба таври визуалӣ ҳамчун ҷадвалҳо бо .nav-tabsсинф услубӣ карда шаванд, набояд ,role="tablist" ё role="tab"атрибутҳо role="tabpanel"дода шаванд . Инҳо танҳо барои интерфейсҳои ҷадвалбандишудаи динамикӣ мувофиқанд, тавре ки дар намунаи ҷадвалбандиҳои Дастури ARIA Authoring Practices тавсиф шудааст . Барои мисол ба рафтори JavaScript барои интерфейсҳои ҷадвалбандии динамикӣ дар ин бахш нигаред.

Истифодаи афтандаҳо

Иловаи менюҳои афтанда бо HTML каме иловагӣ ва плагини JavaScript афтанда .

Ҷадвалҳо бо афтандаҳо

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

Таблетҳо бо афтандаҳо

<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

Васлкунаки JavaScript-ро истифода баред - онро ба таври инфиродӣ ё тавассути bootstrap.jsфайли тартибдодашуда дохил кунед - барои васеъ кардани ҷадвалҳо ва доруҳои навигатсионӣ барои сохтани панелҳои ҷадвалбандии мундариҷаи маҳаллӣ.

Агар шумо JavaScript-и моро аз сарчашма сохта истода бошед, онutil.js .

Интерфейсҳои ҷадвалбандии динамикӣ, ки дар намунаи ҷадвалбандиҳои Дастури Амалияи Муаллифии ARIArole="tablist" тавсиф шудаанд , , role="tab", role="tabpanel", ва атрибутҳои иловагиро талаб мекунанд , aria-то сохтор, функсия ва ҳолати кунунии онҳоро ба корбарони технологияҳои ёрирасон (ба мисли хонандагони экран) расонанд. Ҳамчун таҷрибаи беҳтарин, мо тавсия медиҳем, ки <button>унсурҳоро барои ҷадвалҳо истифода барем, зеро инҳо назоратҳое мебошанд, ки тағироти динамикиро ба вуҷуд меоранд, на истинодҳое, ки ба саҳифа ё макони нав мегузаранд.

Дар хотир доред, ки плагини JavaScript ҷадвали интерфейсҳои ҷадвалбандишударо , ки дорои менюҳои афтанда доранд, дастгирӣ намекунад , зеро онҳо ҳам мушкилоти коршоямӣ ва ҳам дастрасиро ба вуҷуд меоранд. Аз нуқтаи назари қобили истифода, далели он, ки унсури триггери ҷадвали ҳозира нишон додашуда фавран намоён нест (чунон ки он дар дохили менюи афтанда пӯшида аст) метавонад боиси нофаҳмиҳо гардад. Аз нуқтаи назари дастрасӣ, дар айни замон роҳи оқилонаи харитаи ин гуна сохтмон ба намунаи стандартии WAI ARIA вуҷуд надорад, ки онро ба осонӣ барои корбарони технологияҳои ёрирасон фаҳмо кардан мумкин нест.

Мундариҷаи ҷойнишин барои панели ҷадвал. Ин ба ҷадвали хонагӣ дахл дорад. Шуморо милҳо баланд, хеле баланд мебарад, зеро вай як табассуми байналмилалӣ дорад. Дар кати ман марди ношиносе хаст, дар сарам зад. Оҳ, не. Дар зиндагии дигар ман туро водор мекардам, ки бимонӣ. Чунки ман ба ҳама чиз қодирам. Муносиб барои ҷанги тоҷи ман. Барои дуздидани машруботи волидонатон ва ба бом баромадан истифода мешуданд. Оҳанг, танбалӣ мувофиқ ва омода, онро боло гардонед, зеро он вазнин мешавад. Муҳаббати ӯ мисли маводи мухаддир аст. Ман фикр мекунам, ки ман фаромӯш кардам, ки интихоб доштам.

Мундариҷаи ҷойнишин барои панели ҷадвал. Ин ба ҷадвали профил дахл дорад. Шумо меъмории беҳтаринро доред. Мӯҳрҳои шиноснома, вай космополит аст. Хуб, тару тоза, сахт, мо онро дар қуфл гирифтем. Ҳеҷ гоҳ нақша надоштам, ки рӯзе туро аз даст медиҳам. Вай дили шуморо мехӯрад. Бӯсаи ту кайҳон аст, ҳар ҳаракат ҷоду аст. Ман онҳоеро дар назар дорам, ман дар назар дорам, ки вай ҳамон аст. Ассалому алайкум азизон, биёед саёҳат кунем. Танҳо шабе мисли 4 июл соҳиби! Аммо шумо беҳтар мебудед, ки барбод равед.

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>

Барои мувофиқ кардани эҳтиёҷоти шумо, ин бо <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-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>

Васлкунаки ҷадвалҳо инчунин бо доруҳо кор мекунад.

Мундариҷаи ҷойнишин барои панели ҷадвал. Ин ба ҷадвали хонагӣ дахл дорад. Шуморо милҳо баланд, хеле баланд мебарад, зеро вай як табассуми байналмилалӣ дорад. Дар кати ман марди ношиносе хаст, дар сарам зад. Оҳ, не. Дар зиндагии дигар ман туро водор мекардам, ки бимонӣ. Чунки ман ба ҳама чиз қодирам. Муносиб барои ҷанги тоҷи ман. Барои дуздидани машруботи волидонатон ва ба бом баромадан истифода мешуданд. Оҳанг, танбалӣ мувофиқ ва омода, онро боло гардонед, зеро он вазнин мешавад. Муҳаббати ӯ мисли маводи мухаддир аст. Ман фикр мекунам, ки ман фаромӯш кардам, ки интихоб доштам.

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>

Ва бо доруҳои амудӣ.

Мундариҷаи ҷойнишин барои панели ҷадвал. Ин ба ҷадвали хонагӣ дахл дорад. Дидам, ки шумо дар маркази шаҳр блюз месароиед. Нигоҳ кунед, ки шумо дар атрофи заҳкаш давр мезанед. Чаро ба ман иҷозат намедиҳед, ки дар он ҷо истам? Вазнин аст саре, ки тоҷ бар дорад. Бале, мо фариштагонро гиря мекунем, ки аз боло бар замин борон меборад. Мехоҳед намоишро дар 3D, филм бубинед. Оё шумо ягон бор эҳсос мекунед, коғазро лоғар ҳис мекунед. Ин ҳа ё не, шояд не.

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>

Истифодаи атрибутҳои маълумот

Шумо метавонед новбари ҷадвал ё ҳабҳоро бидуни навиштани ягон JavaScript бо танҳо нишон data-toggle="tab"додан ё data-toggle="pill"дар элемент фаъол созед. Ин атрибутҳои маълумотро дар .nav-tabsё .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-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

Ҷадвалҳои ҷадвалбандишавандаро тавассути JavaScript фаъол созед (ҳар як ҷадвал бояд алоҳида фаъол карда шавад):

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

Шумо метавонед ҷадвалҳои инфиродиро бо чанд роҳ фаъол созед:

$('#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

Таъсири пажмурда

Барои пажмурда шудани ҷадвалҳо, .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-и мо нигаред .

$().таб

Унсури ҷадвал ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд як data-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-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('нишон')

Ҷадвали додашударо интихоб мекунад ва панели алоқаманди онро нишон медиҳад. Ҳар ҷадвали дигаре, ки қаблан интихоб шуда буд, интихоб намешавад ва панели алоқаманди он пинҳон мешавад. Ба зангзананда пеш аз намоиш додани панели ҷадвал бармегардад (яъне пеш аз shown.bs.tabрух додани ҳодиса).

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

.tab('дастрас кардан')

Варақаи элементро нест мекунад.

Ҳодисаҳо

Ҳангоми нишон додани ҷадвали нав, рӯйдодҳо бо тартиби зерин оташ мегиранд:

  1. hide.bs.tab(дар ҷадвали фаъоли ҷорӣ)
  2. show.bs.tab(дар ҷадвали нишон дода мешавад)
  3. hidden.bs.tab(дар ҷадвали фаъоли қаблӣ, ҳамон чизе, ки барои hide.bs.tabҳодиса)
  4. shown.bs.tab(дар ҷадвали нав фаъол, ки ба тозагӣ нишон дода шудааст, ҳамон чизе, ки барои show.bs.tabчорабинӣ)

Агар ягон ҷадвал аллакай фаъол набошад, hide.bs.tabва hidden.bs.tabрӯйдодҳо барканор карда намешаванд.

Навъи ҳодиса Тавсифи
show.bs.tab Ин ҳодиса дар намоиши ҷадвалҳо оғоз мешавад, аммо пеш аз он ки ҷадвали нав нишон дода шавад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.targetва истифода баред .event.relatedTarget
нишон дода шудааст Ин ҳодиса пас аз нишон додани ҷадвал дар намоиши ҷадвал оташ мегирад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан event.targetва истифода баред .event.relatedTarget
hide.bs.tab Ин ҳодиса ҳангоми намоиш додани ҷадвали нав оғоз меёбад (ва аз ин рӯ, ҷадвали фаъоли қаблӣ пинҳон карда мешавад). Барои мақсаднок кардани ҷадвали фаъоли ҷорӣ ва ҷадвали нави ба зудӣ фаъолшаванда мутаносибан ва истифода event.targetбаред .event.relatedTarget
hidden.bs.tab Ин ҳодиса пас аз нишон додани ҷадвали нав оғоз меёбад (ва ба ин васила ҷадвали фаъоли қаблӣ пинҳон мешавад). Барои ҳадаф кардани ҷадвали фаъоли қаблӣ ва ҷадвали нави фаъол, event.targetва истифода баред .event.relatedTarget 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})