Негізгі мазмұнға өту Құжаттар шарлауына өту
Check
in English

Тізім тобы

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

Бұл бетте

Негізгі мысал

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

Өшірілген элементтер

Оны өшірулі етіп көрсету.disabled үшін a -ға қосыңыз . Кейбір элементтерді басу оқиғаларын (мысалы, сілтемелер) толығымен өшіру үшін теңшелетін JavaScript қажет болатынын ескеріңіз ..list-group-item.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>

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

Мұнда стандартты сыныптарды пайдаланбағаныңызға.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 disabled төлсипатын қолдамайды.

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

  1. Тізім элементі
  2. Тізім элементі
  3. Тізім элементі
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>

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

  1. Тақырыпша
    Тізім элементіне арналған мазмұн
    14
  2. Тақырыпша
    Тізім элементіне арналған мазмұн
    14
  3. Тақырыпша
    Тізім элементіне арналған мазмұн
    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 құсбелгілері мен радиоларды қойыңыз және қажетінше теңшеңіз. Оларды sсыз пайдалануға болады , бірақ қол жетімділік үшін төлсипат пен мәнді <label>қосуды ұмытпаңыз .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-linkon s пайдалана аласыз .<label>

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 нұсқасына қосылды

.list-groupBootstrap-тың дамып келе жатқан CSS айнымалы мәндері тәсілінің бөлігі ретінде тізім топтары нақты уақытта жақсартылған теңшеу үшін жергілікті CSS айнымалы мәндерін пайдаланады . 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;

Миксиндер

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 арқылы қойындылар тізімінің элементін қосыңыз (әр тізім элементі жеке белсендірілуі керек):

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оқиға болғанға дейін) қоңырау шалушыға оралады.

Оқиғалар

Жаңа қойындыны көрсеткенде оқиғалар келесі ретпен іске қосылады:

  1. hide.bs.tab(ағымдағы белсенді қойындыда)
  2. show.bs.tab(көрсетілетін қойындыда)
  3. hidden.bs.tab(алдыңғы белсенді қойындыда hide.bs.tabоқиғамен бірдей)
  4. 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
  })
})