Рӯйхати гурӯҳ

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

Дар ин саҳифа

Намунаи асосӣ

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

Ададҳои ғайрифаъол

Ба .disableda илова кунед ,.list-group-item то он ғайрифаъол намуд. Дар хотир доред, ки баъзе унсурҳои дорои JavaScript-и фармоиширо низ талаб мекунанд, то рӯйдодҳои клики худро комилан ғайрифаъол кунанд (масалан, истинодҳо)..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>

Пайвандҳо ва тугмаҳо

s <a>ё <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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

Бо <button>s, шумо инчунин метавонед disabledатрибутро ба ҷои .disabledсинф истифода баред. Мутаассифона, <a>s атрибути маъюбонро дастгирӣ намекунад.

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

Миксинҳо

Дар якҷоягӣ бо $theme-colorsбарои тавлиди синфҳои вариантҳои контекстӣ барои .list-group-items истифода мешавад.

@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

Васлкунаки 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>

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

Шумо метавонед паймоиши гурӯҳи рӯйхатро бидуни навиштани ягон 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

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

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

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

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

гирифтани Instance

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

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

getOrCreateInstance

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

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

Ҳодисаҳо

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

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

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

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

var 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
  })
}