Spec-Zone.ru › Bootstrap 5

Группа элементов списка

Основной пример

Самая базовая группа элементов списка — неупорядоченный список с элементами списка и соответствующими классами. Используйте дополнительные параметры или свой 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 к элементу .list-group-item, чтобы сделать его визуально отключённым. Обратите внимание, что некоторым элементам с .disabled может потребоваться дополнительный JavaScript для полного отключения событий кликов (например, для ссылок).

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> или <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" aria-disabled="true">A disabled link item</a>
</div>

С помощью <button> можно также использовать атрибут disabled вместо класса .disabled. К сожалению, <a> не поддерживают атрибут 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>, а затем форматируются и размещаются с помощью псевдоэлемента ::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>

Они отлично подходят и для пользовательского содержимого.

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>

Варианты

Внимание! Начиная с версии v5.3.0, миксин list-group-item-variant() Sass устарел. Теперь варианты стилей элементов списка переопределяются с помощью переменных CSS в цикле Sass.

Используйте контекстные классы для стилизации элементов списка с фоном и цветом состояния.

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 для элементов <a> и <button>. Обратите внимание на добавление эффектов наведения, отсутствующих в предыдущем примере. Также поддерживается состояние .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 .

С метками

Добавьте метки к любому элементу группы списка, чтобы отобразить количество непрочитанных сообщений, активность и т. д. с помощью некоторых утилит.

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, даже для ссылочных групп списков, как в примере ниже, с помощью утилит гибкой компоновки.

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-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">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-body-secondary">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-body-secondary">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

Переменные

Добавлена в v5.2.0

В рамках эволюционирующего подхода Bootstrap к переменным CSS, группы списков теперь используют локальные переменные CSS на .list-group для улучшения настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому поддержка настройки через Sass также сохраняется.

scss/_list-group.scss 
--#{$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

scss/_variables.scss 
$list-group-color:                  var(--#{$prefix}body-color);
$list-group-bg:                     var(--#{$prefix}body-bg);
$list-group-border-color:           var(--#{$prefix}border-color);
$list-group-border-width:           var(--#{$prefix}border-width);
$list-group-border-radius:          var(--#{$prefix}border-radius);

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
// fusv-disable
$list-group-item-bg-scale:          -80%; // Deprecated in v5.3.0
$list-group-item-color-scale:       40%; // Deprecated in v5.3.0
// fusv-enable

$list-group-hover-bg:               var(--#{$prefix}tertiary-bg);
$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:         var(--#{$prefix}secondary-color);
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           var(--#{$prefix}secondary-color);
$list-group-action-hover-color:     var(--#{$prefix}emphasis-color);

$list-group-action-active-color:    var(--#{$prefix}body-color);
$list-group-action-active-bg:       var(--#{$prefix}secondary-bg);

Миксины Sass

Устарело в v5.3.0

Используется в сочетании с $theme-colors для генерации контекстных вариантов классов .list-group-item.

scss/mixins/_list-group.scss 
@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;
      }
    }
  }
}

Циклы Sass

Цикл, генерирующий модификаторные классы с переопределением переменных CSS.

scss/_list-group.scss 
// 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 in map-keys($theme-colors) {
  .list-group-item-#{$state} {
    --#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
    --#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

Поведение JavaScript

Используйте плагин JavaScript для вкладок — включите его отдельно или через скомпилированный файл bootstrap.js — для расширения нашей группы элементов списка, чтобы создать переключаемые вкладки с локальным содержимым.

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

© 2011–2022 Twitter, Inc.
© 2011–2022 The Bootstrap Authors
Code licensed under the MIT License.
Documentation licensed under the Creative Commons Attribution License v3.0.
https://getbootstrap.com/docs/5.3/components/list-group/

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API