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>

Белсенді заттар

Ағымдағы белсенді таңдауды көрсету .activeүшін a -ға қосыңыз ..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 қосу арқылы меңзерді апаратын, өшірілген және белсенді күйлері бар әрекет ететін тізім тобы элементтерін жасау.list-group-item-action үшін пайдаланыңыз . <li>Интерактивті емес элементтерден (мысалы, s немесе <div>s) жасалған тізім топтары басу немесе түрту мүмкіндігін қамтамасыз етпеуі үшін біз бұл жалған сыныптарды бөлеміз .

Мұнда стандартты сыныптарды пайдаланбағаныңызға.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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>

<button>s көмегімен сыныптың disabledорнына төлсипатты пайдалануға болады . .disabledӨкінішке орай, <a>s disabled төлсипатын қолдамайды.

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

Жуу

.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>содан кейін мәнерленеді және with және псевдоэлементімен ::beforeорналастырылады .<li>counter-incrementcontent

Cras justo odio
Cras justo odio
Cras justo odio

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

Бұл реттелетін мазмұнмен де тамаша жұмыс істейді.

Тақырыпша
Cras justo odio
14
Тақырыпша
Cras justo odio
14
Тақырыпша
Cras justo odio
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>
      Cras justo odio
    </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>
      Cras justo odio
    </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>
      Cras justo odio
    </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>

Сасс

Айнымалылар

$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;
      }
    }
  }
}

Цикл

Миксинмен модификатор кластарын жасайтын цикл 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 әрекеті

bootstrap.jsЖергілікті мазмұнның қойынды тақталарын жасау үшін тізім тобымызды кеңейту үшін қойынды JavaScript плагинін пайдаланыңыз (оны жеке немесе құрастырылған файл арқылы қосыңыз).

Үй Профиль Хабарламалар Параметрлер

"Үйге" қатысты абзацтағы кейбір толтырғыш мазмұны. Және осы қойындылар тақтасын толтыру және толтыру үшін ғана қолданылған тағы біраз мазмұн. Өндірісте сіз мұнда нақты мазмұнға ие болар едіңіз. Тек мәтін емес. Бұл кез келген нәрсе болуы мүмкін, шынымен. Мәтін, суреттер, пішіндер.

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>

Деректер атрибуттарын пайдалану

Тізім тобының шарлауын кез келген JavaScript жазбастан жай ғана көрсету data-bs-toggle="list"немесе элемент бойынша қосуға болады. Бұл деректер атрибуттарын параметрінде пайдаланыңыз .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>

show

Берілген тізім элементін таңдап, оның байланысты тақтасын көрсетеді. Бұрын таңдалған кез келген басқа тізім элементі таңдалмайды және оның байланысты тақтасы жасырылады. Қоңырау шалушыға қойындылар тақтасы нақты көрсетілмей тұрып қайтарады (мысалы, shown.bs.tabоқиға болғанға дейін).

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

  tab.show()

dispose

Элемент қойындысын жояды.

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оқиғалары өшірілмейді.

Оқиға түрі	Сипаттама
`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
  })
}