in English

Тізім тобы

Тізім топтары мазмұн сериясын көрсетуге арналған икемді және қуатты құрамдас болып табылады. Кез келген мазмұнды қолдау үшін оларды өзгертіңіз және кеңейтіңіз.

Бұл бетте

Basic example

Ең негізгі тізім тобы тізім элементтері мен тиісті сыныптары бар ретсіз тізім болып табылады. Оны келесі опциялармен немесе қажет болған жағдайда жеке 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

Белсенді элемент
Екінші элемент
Үшінші элемент
Төртінші элемент
Және бесінші

<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

Өшірілген элемент
Екінші элемент
Үшінші элемент
Төртінші элемент
Және бесінші

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

<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

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

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

Сасс

Айнымалылар

$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 плагинін пайдаланыңыз (оны жеке немесе құрастырылған файл арқылы қосыңыз).

Үй профилінің хабарлары параметрлері

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

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

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

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

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

көрсету

Берілген тізім элементін таңдап, оның байланысты тақтасын көрсетеді. Бұрын таңдалған кез келген басқа тізім элементі таңдалмайды және оның байланысты тақтасы жасырылады. Қойындылар тақтасы нақты көрсетілмей тұрып (мысалы, 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оқиғалары өшірілмейді.

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