Тизме тобу

Тизме топтору бир катар мазмунду көрсөтүү үчүн ийкемдүү жана күчтүү компонент болуп саналат. Өзгөртүү жана алардын ичиндеги бардык мазмунду колдоо үчүн кеңейтүү.

Бул бетте

Негизги мисал

Эң негизги тизме тобу - тизме элементтери жана тийиштүү класстары бар иретсиз тизме. Аны кийинки варианттар менен же керек болсо өз 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>

Активдүү заттар

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

s менен класстын ордуна атрибутун <button>колдоно аласыз . Тилекке каршы, s disabled атрибутун колдобойт.disabled.disabled<a>

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>

Flush

.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'тын белги кутучаларын жана радиолорун коюп, керек болсо ыңгайлаштырыңыз. Аларды 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 кошулган

Bootstrap'тин өнүгүп жаткан CSS өзгөрмөлөр ыкмасынын бир бөлүгү катары, тизме топтору .list-groupреалдуу убакыт режиминде жакшыртылган ыңгайлаштыруу үчүн жергиликтүү 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;

Mixins

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

Loop

Миксин менен модификатор класстарын түзүүчү цикл 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>

Маалымат атрибуттарын колдонуу

data-bs-toggle="list"Сиз жөн гана белгилөө же элемент боюнча эч кандай JavaScript жазбастан тизме тобунун навигациясын иштете аласыз . Бул маалымат атрибуттарын колдонуу .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')

Метод	Description
`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окуялар өчүрүлбөйт.

Окуя түрү	Description
`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
  })
})