Навъҳо ва ҷадвалҳо

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

Дар ин саҳифа

Пойгоҳи нав

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

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

Қисмати асосӣ .navягон ҳолатро дар бар намегирад .active. Намунаҳои зерин синфро дар бар мегиранд, асосан барои нишон додани он, ки ин синфи мушаххас ягон услуби махсусро ба вуҷуд намеорад.

Барои интиқол додани ҳолати фаъол ба технологияҳои ёрирасон, атрибутро истифода баред aria-current— бо истифода аз pageарзиши саҳифаи ҷорӣ ё trueҷузъи ҷорӣ дар маҷмӯа.

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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

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

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

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

Дар марказ бо .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Ба тарафи рост ҳамоҳангшуда бо .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Амудӣ

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

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

<nav class="nav flex-column">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Ҷадвалҳо

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Ҳабҳо

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

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

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Ҳангоми истифодабарии <nav>навигатсия дар асоси, шумо метавонед онро бехатар тарк кунед, .nav-itemзеро танҳо .nav-linkбарои <a>унсурҳои ороиш зарур аст.

<nav class="nav nav-pills nav-fill">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

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

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Монанд ба .nav-fillмисоли истифодаи <nav>навигатсия дар асоси.

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Кор бо utilities flex

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

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled">Disabled</a>
</nav>

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

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

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

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

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

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Separated link</a></li>
    </ul>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

Сасс

Тағйирёбандаҳо

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    $link-color;
$nav-link-hover-color:              $link-hover-color;
$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
$nav-link-disabled-color:           $gray-600;

$nav-tabs-border-color:             $gray-300;
$nav-tabs-border-width:             $border-width;
$nav-tabs-border-radius:            $border-radius;
$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color;
$nav-tabs-link-active-color:        $gray-700;
$nav-tabs-link-active-bg:           $body-bg;
$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg;

$nav-pills-border-radius:           $border-radius;
$nav-pills-link-active-color:       $component-active-color;
$nav-pills-link-active-bg:          $component-active-bg;

Рафтори JavaScript

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

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

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

Ин баъзе мундариҷаи ҷойнишини мундариҷаи алоқаманди ҷадвали Home мебошад. Ангуштзании ҷадвали дигар намуди зоҳирии ин ҷадвалро барои навбати дигар иваз мекунад. Ҷадвали JavaScript синфҳоро иваз мекунад, то ки намуди мундариҷа ва услубро назорат кунад. Шумо метавонед онро бо ҷадвалҳо, ҳабҳо ва ҳама гуна .navнавигатсияҳои пурқувват истифода баред.

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

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

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

Барои мувофиқ кардани эҳтиёҷоти шумо, ин бо <ul>аломатгузории -асоси, тавре ки дар боло нишон дода шудааст, ё бо ягон аломати худсаронаи "меғелонидани худ" кор мекунад. Дар хотир доред, ки агар шумо -ро истифода баред <nav>, шумо набояд role="tablist"мустақиман ба он илова кунед, зеро ин нақши аслии элементро ҳамчун аломати навигатсия бекор мекунад. Ба ҷои ин, ба унсури алтернативӣ гузаред (дар мисоли дар поён овардашуда, оддӣ <div>) ва <nav>гирди онро печонед.

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

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

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

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

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

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

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

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

Шумо метавонед новбари ҷадвал ё ҳабҳоро бидуни навиштани ягон JavaScript бо танҳо нишон data-bs-toggle="tab"додан ё data-bs-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-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

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

Тавассути JavaScript

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

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab button'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

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

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

Барои пажмурда шудани ҷадвалҳо, .fadeба ҳар як .tab-pane. Панели ҷадвали аввал низ бояд .showмундариҷаи ибтидоиро намоён гардонад.

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

Усулҳо

Усулҳо ва гузаришҳои асинхронӣ

Ҳама усулҳои API асинхронӣ мебошанд ва гузаришро оғоз мекунанд. Онҳо баробари оғоз шудани гузариш ба зангзананда бармегарданд, аммо пеш аз анҷоми он . Илова бар ин, даъвати методӣ ба ҷузъи гузариш нодида гирифта мешавад.

Барои маълумоти бештар ба ҳуҷҷатҳои JavaScript-и мо нигаред .

constructor

Унсури ҷадвал ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд як data-bs-targetё агар истинод истифода шавад, атрибут дошта бошад href, ки ба гиреҳи контейнер дар DOM нигаронида шудааст.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </li>
</ul>

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

<script>
  var firstTabEl = document.querySelector('#myTab li:last-child button')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

нишон додан

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

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

  tab.show()

ихтиёр кардан

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

гирифтани Instance

Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли ҷадвалро бо унсури DOM алоқаманд ба даст оред

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

getOrCreateInstance

Усули статикӣ , ки ба шумо имкон медиҳад, ки мисоли ҷадвалбандии бо унсури DOM алоқамандро ба даст оред ё дар сурати оғоз нашудани он як нав эҷод кунед.

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

Ҳодисаҳо

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

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

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

Навъи ҳодиса	Тавсифи
`show.bs.tab`	Ин ҳодиса дар намоиши ҷадвалҳо оғоз мешавад, аммо пеш аз он ки ҷадвали нав нишон дода шавад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан `event.target`ва истифода баред .`event.relatedTarget`
`shown.bs.tab`	Ин ҳодиса пас аз нишон додани ҷадвал дар намоиши ҷадвал оташ мегирад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан `event.target`ва истифода баред .`event.relatedTarget`
`hide.bs.tab`	Ин ҳодиса ҳангоми намоиш додани ҷадвали нав оғоз меёбад (ва аз ин рӯ, ҷадвали фаъоли қаблӣ пинҳон карда мешавад). Барои мақсаднок кардани ҷадвали фаъоли ҷорӣ ва ҷадвали нави ба зудӣ фаъолшаванда мутаносибан ва истифода `event.target`баред .`event.relatedTarget`
`hidden.bs.tab`	Ин ҳодиса пас аз нишон додани ҷадвали нав оғоз меёбад (ва ба ин васила ҷадвали фаъоли қаблӣ пинҳон мешавад). Барои ҳадаф кардани ҷадвали фаъоли қаблӣ ва ҷадвали нави фаъол, `event.target`ва истифода баред .`event.relatedTarget`

var tabEl = document.querySelector('button[data-bs-toggle="tab"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})