Төп эчтәлеккә күчү Документлар навигациясенә күчү
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өчен а өстәргә ..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а өстәгез . Игътибар итегез, кайбер элементлар шулай ук ​​махсус 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 кулланыгыз . Без бу псевдо-классларны интерактив булмаган элементлардан ясалган исемлек төркемнәрен ( с яки с кебек) басу яки мөмкинлекне тәэмин итмәү өчен аерабыз.<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>

S ярдәмендә сез класс урынына атрибутны <button>куллана аласыз . Кызганыч, инвалид атрибутны хупламыйлар.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>

Флуш

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

  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. Хәзерге вакытта горизонталь исемлек төркемнәрен флеш исемлек төркемнәре белән берләштереп булмый.

ProTip: Горизонталь булганда тигез киңлектәге исемлек төркем әйберләрен телисезме? .flex-fillListәрбер исемлек төркеменә өстәгез .

  • Бер әйбер
  • Икенче пункт
  • Өченче пункт
  • Бер әйбер
  • Икенче пункт
  • Өченче пункт
  • Бер әйбер
  • Икенче пункт
  • Өченче пункт
  • Бер әйбер
  • Икенче пункт
  • Өченче пункт
  • Бер әйбер
  • Икенче пункт
  • Өченче пункт
  • Бер әйбер
  • Икенче пункт
  • Өченче пункт
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>

Махсус эчтәлек

Флексбокс ярдәмендә, хәтта түбәндәге кебек бәйләнгән исемлек төркемнәре өчен теләсә нинди 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>кертергә онытмагыз .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>

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

Variзгәрешләр

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

Сасс үзгәрүләр

$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-colorsS өчен контекстуаль вариант класслары булдыру өчен кулланыла .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файл аша кертегез - безнең исемлек төркемен киңәйтеп, җирле эчтәлекнең таблицаларын булдыру өчен.

"Өй" белән бәйле абзацтагы кайбер урын ияләренең эчтәлеге. Moreәм тагын берничә эчтәлек, монда бу таблицаны тутыру өчен. Productionитештерүдә, сез монда күбрәк реаль эчтәлеккә ия булырсыз. Текст кына түгел. Бу теләсә нәрсә булырга мөмкин. Текст, рәсемнәр, формалар.

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.tabhide.bs.tab(алдагы актив кыстыргычта, вакыйга белән бер үк )
  4. shown.bs.tabshow.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
  })
})