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

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

Дар ин саҳифа

Пойгоҳи нав

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

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

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

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

html

<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

html

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

html

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

html

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

html

<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 низ имконпазир аст.

html

<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 ҷадвали мо истифода баред .

html

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

html

<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. Аҳамият диҳед, ки тамоми фазои уфуқӣ ишғол шудааст, аммо на ҳар як банди нав паҳнои якхела дорад.

html

<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>унсурҳои ороиш зарур аст.

html

<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боло зикршуда, ҳар як ҷузъи нав як паҳно хоҳад буд.

html

<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>навигатсия дар асоси.

html

<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 фикр кунед . Дар ҳоле ки муфассалтар, ин утилитҳо мутобиқсозии бештарро дар байни нуқтаҳои қатъшавии ҷавоб пешниҳод мекунанд. Дар мисоли зер, навоварии мо дар нуқтаи пасттарин ҷойгир карда мешавад ва сипас ба тарҳбандии уфуқӣ мутобиқ мешавад, ки паҳнои дастрасро аз нуқтаи хурд сар карда пур мекунад.

html

<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"дода шаванд . Инҳо танҳо барои интерфейсҳои ҷадвалбандии динамикӣ мувофиқанд, тавре ки дар намунаи ҷадвалбандиҳои Дастури ARIA Authoring Practices тавсиф шудааст . Барои мисол ба рафтори JavaScript барои интерфейсҳои ҷадвалбандии динамикӣ дар ин бахш нигаред. Аттрибут aria-currentдар интерфейсҳои ҷадвалбандии динамикӣ лозим нест, зеро JavaScript мо ҳолати интихобшударо бо илова кардани aria-selected="true"ҷадвали фаъол идора мекунад.

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

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

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

html

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

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

html

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

CSS

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

Дар v5.2.0 илова карда шудааст

Ҳамчун як қисми равиши таҳаввулшавандаи CSS-и Bootstrap, navs ҳоло тағирёбандаҳои CSS-и маҳаллиро дар .nav, .nav-tabs, ва .nav-pillsбарои мутобиқсозии мукаммали вақти воқеӣ истифода мебаранд. Арзишҳо барои тағирёбандаҳои CSS тавассути Sass муқаррар карда мешаванд, аз ин рӯ мутобиқсозии Sass ҳанӯз ҳам дастгирӣ карда мешавад.

Дар .navсинфи асосӣ:

  --#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
  --#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
  @include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
  --#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
  --#{$prefix}nav-link-color: #{$nav-link-color};
  --#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
  --#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};

Дар .nav-tabsсинфи тағирдиҳанда:

  --#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
  --#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
  --#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
  --#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
  --#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
  --#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
  --#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};

Дар .nav-pillsсинфи тағирдиҳанда:

  --#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
  --#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
  --#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};

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

$nav-link-padding-y:                .5rem;
$nav-link-padding-x:                1rem;
$nav-link-font-size:                null;
$nav-link-font-weight:              null;
$nav-link-color:                    var(--#{$prefix}link-color);
$nav-link-hover-color:              var(--#{$prefix}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файли тартибдодашуда дохил кунед - барои васеъ кардани ҷадвалҳо ва доруҳои навигатсионӣ барои сохтани панелҳои ҷадвалбандии мундариҷаи маҳаллӣ.

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

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

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.

This is some placeholder content the Disabled tab's associated content.

<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-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" 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-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">...</div>
</div>

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

<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>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

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

This is some placeholder content the Disabled tab's associated content.

<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>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
</div>

Ва бо доруҳои амудӣ. Идеалӣ, барои ҷадвалбандиҳои амудӣ, шумо инчунин бояд aria-orientation="vertical"ба контейнери рӯйхати ҷадвал илова кунед.

This is some placeholder content the Disabled tab's associated content.

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-disabled-tab" data-bs-toggle="pill" data-bs-target="#v-pills-disabled" type="button" role="tab" aria-controls="v-pills-disabled" aria-selected="false" disabled>Disabled</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" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-disabled" role="tabpanel" aria-labelledby="v-pills-disabled-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">...</div>
    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">...</div>
  </div>
</div>

Дастрасӣ

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

Мувофиқи намунаи ARIA Authoring Practices, танҳо ҷадвали ҳозира фаъол фокуси клавиатураро мегирад. Вақте, ки плагини JavaScript оғоз карда мешавад, он tabindex="-1"дар ҳама назорати ҷадвалҳои ғайрифаъол насб мешавад. Пас аз он ки варақаи фаъоли ҳозир фокус дорад, калидҳои курсор ҷадвали қаблӣ/ояндиро фаъол мекунанд ва плагин ротингроtabindex мутаносибан тағир медиҳад. Бо вуҷуди ин, қайд кунед, ки плагини JavaScript байни рӯйхати ҷадвалҳои уфуқӣ ва амудӣ фарқ намекунад: новобаста аз самти рӯйхати ҷадвалҳо, курсори боло ва чап ба ҷадвали қаблӣ ва курсор ба поён ва рост ба ҷадвал меравад. ҷадвали оянда.

Умуман, барои осон кардани паймоиши клавиатура, тавсия дода мешавад, ки худи панелҳои ҷадвалро низ мутамарказ созанд, ба шарте ки унсури аввалини дорои мундариҷаи пурмазмун дар дохили панели ҷадвал аллакай мутамарказ набошад. Васлкунаки JavaScript кӯшиш намекунад, ки ин ҷанбаро ҳал кунад - агар лозим бошад, шумо бояд ба таври возеҳ панелҳои ҷадвалбандии худро тавассути илова кардани аломатгузории худ мутамарказ tabindex="0"кунед.

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

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

Шумо метавонед новбари ҷадвал ё ҳабҳоро бидуни навиштани ягон 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" tabindex="0">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Тавассути JavaScript

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

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

const 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" tabindex="0">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">...</div>
</div>

Усулҳо

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

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

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

Мундариҷаи шуморо ҳамчун унсури ҷадвал фаъол мекунад.

Шумо метавонед бо конструктор мисоли ҷадвал эҷод кунед, масалан:

const bsTab = new bootstrap.Tab('#myTab')

Усул	Тавсифи
`dispose`	Варақаи элементро нест мекунад.
`getInstance`	Усули статикӣ, ки ба шумо имкон медиҳад, ки мисоли ҷадвалбандии бо унсури DOM алоқамандро гиред, шумо метавонед онро чунин истифода баред: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	Усули статикӣ, ки як мисоли ҷадвалро, ки ба унсури DOM алоқаманд аст, бармегардонад ё дар сурати оғоз нашудани он як нав эҷод мекунад. Шумо метавонед онро чунин истифода баред: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Ҷадвали додашударо интихоб мекунад ва панели алоқаманди онро нишон медиҳад. Ҳар ҷадвали дигаре, ки қаблан интихоб шуда буд, интихоб намешавад ва панели алоқаманди он пинҳон мешавад. Ба зангзананда пеш аз намоиш додани панели ҷадвал бармегардад (яъне пеш аз `shown.bs.tab`рух додани ҳодиса).

Ҳодисаҳо

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

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

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

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

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