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

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

Дар ин саҳифа

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

Рӯйхати асосӣтарин ин рӯйхати номатлуб бо ҷузъҳои рӯйхат ва синфҳои мувофиқ мебошад. Дар асоси он бо имконоти зерин ё бо CSS-и худ, агар лозим бошад, созед.

Як ашё
Як ҷузъи дуюм
Моддаи сеюм
Моддаи чорум
Ва панҷум

html

<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барои нишон додани интихоби фаъоли ҷорӣ.

Як ҷузъи фаъол
Як ҷузъи дуюм
Моддаи сеюм
Моддаи чорум
Ва панҷум

html

<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

Як ашёи ғайрифаъол
Як ҷузъи дуюм
Моддаи сеюм
Моддаи чорум
Ва панҷум

html

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

Объекти пайванди ҷорӣ Як ҷузъи дуюми пайванд Қисми сеюми пайванд Як ҷузъи чоруми пайванд Як ҷузъи истиноди ғайрифаъол

html

<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 атрибути маъюбонро дастгирӣ намекунад.

html

<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 button 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, то баъзе сарҳадҳо ва кунҷҳои мудавваршударо нест кунед, то ҷузъҳои гурӯҳи рӯйхатро дар як контейнери волидайн канор ба канор нишон диҳед (масалан, кортҳо).

Як ашё
Як ҷузъи дуюм
Моддаи сеюм
Моддаи чорум
Ва панҷум

html

<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ҷойгир карда мешаванд.

Як ҷузъи рӯйхат
Як ҷузъи рӯйхат
Як ҷузъи рӯйхат

html

<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

html

<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ҳар як ҷузъи гурӯҳи рӯйхат илова кунед.

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

Як ашё
Як ҷузъи дуюм
Моддаи сеюм

html

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

Синфҳои контекстӣ

Синфҳои контекстӣ барои услуби ҷузъҳои рӯйхат бо замина ва ранги ҳолатиро истифода баред.

Унсури оддии рӯйхати пешфарз
Ҷузъи оддии гурӯҳи рӯйхати ибтидоӣ
Унсури гурӯҳи оддии дуюмдараҷа
Як ҷузъи оддии рӯйхати муваффақият
Як ҷузъи оддии гурӯҳи хатарҳо
Унсури гурӯҳи оддии огоҳкунанда
Унсури гурӯҳи оддии рӯйхати маълумот
Як унсури гурӯҳи оддии рӯшноӣ
Як ҷузъи оддии гурӯҳи рӯйхати торик

html

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

Унсури оддии рӯйхати пешфарз Ҷузъи оддии гурӯҳи рӯйхати ибтидоӣ Унсури гурӯҳи оддии дуюмдараҷа Як ҷузъи оддии рӯйхати муваффақият Як ҷузъи оддии гурӯҳи хатарҳо Унсури гурӯҳи оддии огоҳкунанда Унсури гурӯҳи оддии рӯйхати маълумот Як унсури гурӯҳи оддии рӯшноӣ Як ҷузъи оддии гурӯҳи рӯйхати торик

html

<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

html

<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 руз пеш

Баъзе мундариҷаи ҷойнишин дар параграф.

Ва баъзе чопи хурди хомӯшшуда.

html

<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атрибут ва арзиш барои дастрасӣ дохил кунед.

Қуттии аввал
Қуттии дуюм
Қуттии сеюм

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

Аввалин радио
Радиои дуюм
Радиои сеюм

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Шумо метавонед .stretched-linkдар бораи <label>s истифода баред, то тамоми ҷузъи гурӯҳи рӯйхатро клик кардан мумкин бошад.

Қуттии аввал
Қуттии дуюм
Қуттии сеюм

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

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

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

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

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Тағйирёбандаҳои 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;

Миксинҳо

Дар якҷоягӣ бо $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 фаъол созед (ҳар як ҷузъи рӯйхат бояд алоҳида фаъол карда шавад):

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

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

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

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

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

Усулҳо

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

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

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

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

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

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

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

Ҳодисаҳо

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

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

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

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

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})