in English

Тизме тобу

Тизме топтору бир катар мазмунду көрсөтүү үчүн ийкемдүү жана күчтүү компонент болуп саналат. Өзгөртүү жана алардын ичиндеги бардык мазмунду колдоо үчүн кеңейтүү.

Бул бетте

Негизги мисал

Эң негизги тизме тобу - тизме элементтери жана тийиштүү класстары бар иретсиз тизме. Аны кийинки варианттар менен же керек болсо өз CSS менен куруңуз.

Буюм
Экинчи нерсе
Үчүнчү нерсе
Төртүнчү пункт
Жана бешинчи

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Активдүү заттар

Учурдагы активдүү тандоону көрсөтүү үчүн aга .activeкошуңуз ..list-group-item

Активдүү нерсе
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Өчүрүлгөн нерселер

Өчүк болуп көрүнүү.disabled үчүн aга кошуңуз . Кээ бир элементтерди чыкылдатуу окуяларын (мисалы, шилтемелер) толугу менен өчүрүү үчүн ыңгайлаштырылган JavaScript талап кылынарын эске алыңыз..list-group-item.disabled

Өчүрүлгөн нерсе
A second item
A third item
A fourth item
And a fifth one

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Шилтемелер жана баскычтар

Кошуу менен <a>s же <button>s колдонуңуз . Интерактивдүү эмес элементтерден турган тизме топтору (мисалы, s же s) чыкылдатууну же таптап алууну камсыз кылбасын камсыз кылуу үчүн бул псевдокласстарды бөлөбүз..list-group-item-action<li><div>

Бул жерде стандарттык класстарды колдонбоңуз.btn .

Учурдагы шилтеме элементи Экинчи шилтеме нерсе Үчүнчү шилтеме нерсе Төртүнчү шилтеме нерсе Өчүрүлгөн шилтеме элементи

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

s менен класстын ордуна атрибутун <button>колдоно аласыз . Тилекке каршы, s disabled атрибутун колдобойт.disabled.disabled<a>

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

Flush

.list-group-flushТизме тобунун элементтерин ата-энелик контейнерде (мисалы, карталар) четинен четине көрсөтүү үчүн кээ бир чектерди жана тегеректелген бурчтарды алып салуу үчүн кошуңуз .

Буюм
Экинчи нерсе
Үчүнчү нерсе
Төртүнчү пункт
Жана бешинчи

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Номерленген

Номерленген тизме тобунун элементтерине кошулуу үчүн модификатор классын кошуңуз .list-group-numbered(жана кошумча элементти колдонуңуз ). Сандар тизме тобунун элементтеринин ичинде жакшыраак жайгаштыруу жана жакшыраак ыңгайлаштырууга мүмкүндүк берүү үчүн <ol>CSS аркылуу түзүлөт (демейки серепчи стилинен айырмаланып ).<ol>

Сандар генерацияланат counter-reset, <ol>андан кийин стилделет жана менен жана менен ::beforeпсевдо-элемент <li>менен counter-incrementжайгаштырылат content.

Тизме элементи
Тизме элементи
Тизме элементи

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Булар жеке мазмун менен да сонун иштешет.

Почта аталышы
Тизме объектисинин мазмуну
14
Почта аталышы
Тизме объектисинин мазмуну
14
Почта аталышы
Тизме объектисинин мазмуну
14

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Горизонталдуу

.list-group-horizontalТизме тобунун элементтеринин жайгашуусун вертикальдан горизонтальга бардык үзгүлтүккө учуратуу чекиттеринде өзгөртүү үчүн кошуу . .list-group-horizontal-{sm|md|lg|xl|xxl}Же болбосо, ошол үзүү чекитинен баштап тизме тобун горизонталдуу кылуу үчүн жооп берүүчү вариантты тандаңыз min-width. Учурда горизонталдуу тизме топторун таза тизме топтору менен айкалыштыруу мүмкүн эмес.

Кеңеш: горизонталдуу болгондо бирдей тууралыктагы тизме тобунун элементтерин каалайсызбы? .flex-fillАр бир тизмеге топко кошуу .

Буюм
Экинчи нерсе
Үчүнчү нерсе

Буюм
Экинчи нерсе
Үчүнчү нерсе

Буюм
Экинчи нерсе
Үчүнчү нерсе

Буюм
Экинчи нерсе
Үчүнчү нерсе

Буюм
Экинчи нерсе
Үчүнчү нерсе

Буюм
Экинчи нерсе
Үчүнчү нерсе

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Контексттик класстар

Тизме элементтерин фон жана түс менен стилдөө үчүн контексттик класстарды колдонуңуз.

Жөнөкөй демейки тизме тобу элементи
Жөнөкөй негизги тизме тобунун элементи
Жөнөкөй кошумча тизме тобунун элементи
Жөнөкөй ийгилик тизмеси топ пункту
Жөнөкөй коркунуч тизмеси тобунун элементи
Жөнөкөй эскертүү тизмеси тобунун элементи
Жөнөкөй маалымат тизмеси тобу элементи
Жөнөкөй жарык тизме тобунун элементи
Жөнөкөй караңгы тизме тобунун элементи

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

Контексттик класстар да менен иштешет .list-group-item-action. Мурунку мисалда жок бул жердеги чапкыч стилдеринин кошулушун белгилеңиз. Ошондой эле мамлекет тарабынан колдоого алынат .active; контексттик тизме тобунун элементинде активдүү тандоону көрсөтүү үчүн колдонуңуз.

Жөнөкөй демейки тизме тобу элементи Жөнөкөй негизги тизме тобунун элементи Жөнөкөй кошумча тизме тобунун элементи Жөнөкөй ийгилик тизмеси топ пункту Жөнөкөй коркунуч тизмеси тобунун элементи Жөнөкөй эскертүү тизмеси тобунун элементи Жөнөкөй маалымат тизмеси тобу элементи Жөнөкөй жарык тизме тобунун элементи Жөнөкөй караңгы тизме тобунун элементи

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Көмөкчү технологияларга маани берүү

Маани кошуу үчүн түстү колдонуу визуалдык көрсөткүчтү гана камсыз кылат, ал жардамчы технологиялардын колдонуучуларына – мисалы, экранды окугучтарга жеткирилбейт. Түс менен белгиленген маалымат мазмундун өзүнөн (мисалы, көрүнүүчү текст) ачык-айкын болушун же .visually-hiddenкласс менен жашырылган кошумча текст сыяктуу альтернативалуу каражаттар аркылуу камтылганын текшериңиз.

Белгилери менен

Кээ бир утилиталардын жардамы менен окула элек сандарды, аракеттерди жана башкаларды көрсөтүү үчүн тизменин каалаган тобуна бейджиктерди кошуңуз .

Тизме элементи14
Экинчи тизме элементи2
Үчүнчү тизме элементи1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Ыңгайлаштырылган мазмун

Flexbox утилиталарынын жардамы менен, төмөнкүдөй шилтемеленген тизме топторуна да дээрлик каалаган HTML кошуңуз .

Тизме тобунун аталышы

3 күн мурун

Абзацтагы айрым толтуруучу мазмун.

Жана кээ бир кичинекей басуу.

Тизме тобунун аталышы

3 күн мурун

Абзацтагы айрым толтуруучу мазмун.

Ал эми кээ бир үнү басылган кичинекей тамгалар.

Тизме тобунун аталышы

3 күн мурун

Абзацтагы айрым толтуруучу мазмун.

Ал эми кээ бир үнү басылган кичинекей тамгалар.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

Белгилөө кутучалары жана радиолор

Тизме тобунун элементтеринин ичинде Bootstrap'тын белги кутучаларын жана радиолорун коюп, керек болсо ыңгайлаштырыңыз. Аларды s жок колдонсоңуз болот , бирок жеткиликтүүлүк үчүн атрибутун жана маанисин <label>кошууну унутпаңыз .aria-label

Биринчи кутуча
Экинчи кутуча
Үчүнчү кутуча
Төртүнчү кутуча
Бешинчи кутуча

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

Жана эгер сиз <label>s дегенди .list-group-itemчоң хит аймактар үчүн кааласаңыз, муну да жасай аласыз.

Биринчи кутуча Экинчи кутуча Үчүнчү кутуча Төртүнчү кутуча Бешинчи кутуча

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Sass

Өзгөрмөлөр

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Миксиндер

s үчүн контексттик вариант класстарын$theme-colors түзүү үчүн айкалышта колдонулат ..list-group-item

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Loop

Миксин менен модификатор класстарын түзүүчү цикл list-group-item-variant().

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

JavaScript жүрүм-туруму

Таблетка JavaScript плагинин колдонуңуз — аны жекече же компиляцияланган bootstrap.jsфайл аркылуу кошуңуз — жергиликтүү мазмундун өтмөктөр панелдерин түзүү үчүн тизме тобубузду кеңейтүү үчүн.

Үй Профиль Кабарлар Орнотуулар

"Үйгө" тиешелүү абзацтагы айрым толтуруучу мазмун. Жана дагы бир нече мазмун, бул жерде жөн гана бул өтмөк панелин толтуруу жана толтуруу үчүн колдонулат. Өндүрүштө сиз бул жерде көбүрөөк реалдуу мазмунга ээ болосуз. Жана жөн гана текст эмес. Бул, чынында эле, эч нерсе болушу мүмкүн. Текст, сүрөттөр, формалар.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Маалымат атрибуттарын колдонуу

data-bs-toggle="list"Сиз жөн гана белгилөө же элемент боюнча эч кандай JavaScript жазбастан тизме тобунун навигациясын иштете аласыз . Бул маалымат атрибуттарын боюнча колдонуңуз .list-group-item.

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

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

JavaScript аркылуу

JavaScript аркылуу табулатура тизме элементин иштетүү (ар бир тизме элементи өзүнчө активдештирилиши керек):

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

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

Сиз жеке тизме элементин бир нече жол менен активдештире аласыз:

var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
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">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

Методдор

constructor

Тизме элементинин элементин жана мазмун контейнерин иштетет. Өтмөктө DOMдагы контейнер түйүнү data-bs-targetже максаттуу болушу керек .href

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>

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

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

  firstTab.show()
</script>

көрсөтүү

Берилген тизме элементин тандап, ага байланышкан панелди көрсөтөт. Мурда тандалган каалаган башка тизме элементи тандоодон чыгарылат жана ага байланышкан панель жашырылат. Өтмөк панели иш жүзүндө көрсөтүлгөнгө чейин (мисалы, shown.bs.tabокуя болгонго чейин) чалуучуга кайтат.

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

тескөө

Элементтин өтмөктү жок кылат.

getInstance

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окуялар өчүрүлбөйт.

Окуя түрү	Description
`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 tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
  tabElm.addEventListener('shown.bs.tab', function (event) {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
}