Source

Навс

Ҳуҷҷатҳо ва мисолҳо барои чӣ гуна истифода бурдани ҷузъҳои навигатсионии 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Дарсҳо дар саросари ҷаҳон истифода мешаванд, аз ин рӯ аломатгузории шумо метавонад хеле чандир бошад. <ul>Агар тартиби ҷузъҳои шумо муҳим бошад, s-ро мисли дар боло зикршуда истифода баред <ol>ё худатонро бо як <nav>элемент гузоред. Азбаски .navистифодабарии display: 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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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" href="#" tabindex="-1" aria-disabled="true">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="#">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>

Ҳангоми истифодаи <nav>новбари асоси, боварӣ ҳосил кунед, ки ба .nav-itemлангар дохил кунед.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

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

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">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>

Монанди .nav-fillмисоле, ки <nav>новбари асосиро истифода мебарад, ҳатман ба .nav-itemлангарҳо дохил кунед.

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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="#">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>

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

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

Дар хотир доред, ки панҷараҳои паймоиш, ҳатто агар ба таври визуалӣ ҳамчун ҷадвалҳо бо .nav-tabsсинф услубӣ карда шаванд, набояд ,role="tablist" ё role="tab"атрибутҳо role="tabpanel"дода шаванд . Инҳо танҳо барои интерфейсҳои ҷадвалбандии динамикӣ мувофиқанд, тавре ки дар Амалияи муаллифии WAI ARIA тавсиф шудааст . Барои мисол ба рафтори 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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">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-haspopup="true" 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" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

Рафтори JavaScript

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

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

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

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

Ҷинси хом шумо эҳтимол дар бораи онҳо шортҳои ҷинс Остин нашунидаед. Nesciunt tofu stumptown aliqua, retro synth усто пок. Мӯйлаб клише tempor, Williamsburg Carles vegan helvetica. Reprehenderit қассоб ретро keffiyeh dreamcatcher synth. Косби свитер eu Banh mi, qui irure Терри Ричардсон собиқ калмар. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan либоси амрикоӣ, қассоб ихтиёрӣ аст.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </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">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </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>

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

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in Veniaam ad. Eiusmod consequat eu adipisicing minimum anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </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>

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

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Вениам дар ин ҷо ягон чизи ғайриоддӣ нест. Id id reprehenderit est est eu aliqua occaecat quis and electeur exciteur laborum mollit dolor eiusmod. Ipsum dolor дар як коммодо ва ихтиёрӣ ба ҳадди ақал бозмегардонад. Deserunt non laborum enim et cillum eu deserunt excepteur ea incididunt minimum occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

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

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').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">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </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 a').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 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})