Bootstrap Llist group (группы списков)

Группы списков - это гибкий и мощный компонент для отображения ряда содержимого. Изменяйте и расширяйте их для поддержки практически любого содержимого внутри.

Базовый пример

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

<ul class="list-group">
  <li class="list-group-item">Элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
  <li class="list-group-item">Четвертый элемент</li>
  <li class="list-group-item">И пятый</li>
</ul>
Результат:
  • Элемент
  • Второй элемент
  • Третий элемент
  • Четвертый элемент
  • И пятый

Активные элементы

Добавить класс .active в .list-group-item для указания текущего активного элемента.

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">Активный элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
  <li class="list-group-item">Четвертый элемент</li>
  <li class="list-group-item">И пятый</li>
</ul>
Результат:
  • Активный элемент
  • Второй элемент
  • Третий элемент
  • Четвертый элемент
  • И пятый

Отключенные элементы

Добавьте класс .disabled в .list-group-item, чтобы она выглядела отключенной. Обратите внимание, что для некоторых элементов с .disabled также потребуется пользовательский JavaScript для полного отключения их событий перехода (например, ссылок).

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Отключенный элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
  <li class="list-group-item">Четвертый элемент</li>
  <li class="list-group-item">И пятый</li>
</ul>
Результат:
  • Отключенный элемент
  • Второй элемент
  • Третий элемент
  • Четвертый элемент
  • И пятый

Ссылки и кнопки

Используйте <a> или <button> для создания активных элементов группы списков с состояниями наведения, отключено и активно путем добавления .list-group-item-action. Мы разделяем эти псевдоклассы, чтобы гарантировать, что группы списков, состоящие из неинтерактивных элементов (таких как <li> или <div>), не предоставляют возможности щелчка мышью.

Убедитесь, что не используйте здесь стандартные .btn классы.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    Текущий элемент ссылки
  </a>
  <a href="#" class="list-group-item list-group-item-action">Второй элемент ссылки</a>
  <a href="#" class="list-group-item list-group-item-action">Третий элемент ссылки</a>
  <a href="#" class="list-group-item list-group-item-action">Четвертый элемент ссылки</a>
  <a class="list-group-item list-group-item-action disabled" aria-disabled="true">Отключенный элемент ссылки</a>
</div>
Результат:
Текущий элемент ссылки Второй элемент ссылки Третий элемент ссылки Четвертый элемент ссылки Отключенный элемент ссылки

С <button>s вы также можете использовать disabled атрибут вместо .disabled класса. К сожалению, <a>s не поддерживают отключенный атрибут.

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    Текущая кнопка
  </button>
  <button type="button" class="list-group-item list-group-item-action">Второй элемент кнопки</button>
  <button type="button" class="list-group-item list-group-item-action">Третий элемент кнопки</button>
  <button type="button" class="list-group-item list-group-item-action">Четвертый элемент кнопки</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Отключенный элемент кнопки</button>
</div>
Результат:

Промывка

Добавить .list-group-flush для удаления некоторых границ и закругленных углов для отображения элементов группы списков от края до края в родительском контейнере (например, карточек).

<ul class="list-group list-group-flush">
  <li class="list-group-item">Элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
  <li class="list-group-item">Четвертый элемент</li>
  <li class="list-group-item">И пятый</li>
</ul>
Результат:
  • Элемент
  • Второй элемент
  • Третий элемент
  • Четвертый элемент
  • И пятый

Пронумерованный

Добавьте .list-group-numbered класс-модификатор (и, при необходимости, используйте <ol> элемент), чтобы выбирать элементы группы нумерованных списков. Числа генерируются с помощью CSS (в отличие от <ol>стиля браузера по умолчанию) для лучшего размещения внутри элементов группы списков и обеспечения лучшей настройки.

Числа генерируются с помощью counter-reset на <ol>, а затем оформляются и помещаются с помощью ::before псевдоэлемента на <li> с counter-increment и content.

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Элемент списка</li>
  <li class="list-group-item">Элемент списка</li>
  <li class="list-group-item">Элемент списка</li>
</ol>
Результат:
  1. Элемент списка
  2. Элемент списка
  3. Элемент списка

Они также отлично работают с пользовательским контентом.

<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">Подзаголовок</div>
      Содержимое элемента списка
    </div>
    <span class="badge text-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">Подзаголовок</div>
      Содержимое элемента списка
    </div>
    <span class="badge text-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">Подзаголовок</div>
      Содержимое элемента списка
    </div>
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
</ol>
Результат:
  1. Подзаголовок
    Содержимое элемента списка
    14
  2. Подзаголовок
    Содержимое элемента списка
    14
  3. Подзаголовок
    Содержимое элемента списка
    14

Горизонтальный

Добавить .list-group-horizontal для изменения расположения элементов группы списков с вертикального на горизонтальное во всех точках останова. В качестве альтернативы, выберите адаптивный вариант, .list-group-horizontal-{sm|md|lg|xl|xxl} чтобы сделать группу списков горизонтальной, начиная с этой точки останова min-width. В настоящее время группы списков по горизонтали нельзя комбинировать с группами сплошных списков.

Подсказка: Требуется группировать элементы списка одинаковой ширины по горизонтали? Добавьте .flex-fill к каждому элементу группы списков.

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
  <li class="list-group-item">Элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
</ul>
Результат:
  • Элемент
  • Второй элемент
  • Третий элемент
  • Элемент
  • Второй элемент
  • Третий элемент
  • Элемент
  • Второй элемент
  • Третий элемент
  • Элемент
  • Второй элемент
  • Третий элемент
  • Элемент
  • Второй элемент
  • Третий элемент
  • Элемент
  • Второй элемент
  • Третий элемент

Варианты

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

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

<ul class="list-group">
  <li class="list-group-item">Простой элемент группы списков по умолчанию</li>
  <li class="list-group-item list-group-item-primary">Простой элемент основной группы списков</li>
  <li class="list-group-item list-group-item-secondary">Простой элемент дополнительной группы списков</li>
  <li class="list-group-item list-group-item-success">Простой элемент группы списка успешных действий</li>
  <li class="list-group-item list-group-item-danger">Простой элемент группы списков опасностей</li>
  <li class="list-group-item list-group-item-warning">Простой элемент группы списков предупреждений</li>
  <li class="list-group-item list-group-item-info">Простой элемент группы информационных списков</li>
  <li class="list-group-item list-group-item-light">Простой элемент группы облегченных списков</li>
  <li class="list-group-item list-group-item-dark">Простой элемент группы темных списков</li>
</ul>
Результат:
  • Простой элемент группы списков по умолчанию
  • Простой элемент основной группы списков
  • Простой элемент дополнительной группы списков
  • Простой элемент группы списка успешных действий
  • Простой элемент группы списков опасностей
  • Простой элемент группы списков предупреждений
  • Простой элемент группы информационных списков
  • Простой элемент группы облегченных списков
  • Простой элемент группы темных списков

Для ссылок и кнопок

Контекстные классы также работают с элементами .list-group-item-action for <a> и <button>. Обратите внимание на добавление стилей наведения, отсутствующих в предыдущем примере. Также поддерживается состояние .active; примените его для указания активного выбора элемента контекстной группы списков.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Простой элемент группы списков по умолчанию</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Простой элемент основной группы списков</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Простой элемент дополнительной группы списков</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Простой элемент группы списка успешных действий</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Простой элемент группы списков опасностей</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Простой элемент группы списков предупреждений</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Простой элемент группы информационных списков</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Простой элемент группы облегченных списков</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Простой элемент группы темных списков</a>
</div>
Результат:
Простой элемент группы списков по умолчанию Простой элемент основной группы списков Простой элемент дополнительной группы списков Простой элемент группы списка успешных действий Простой элемент группы списков опасностей Простой элемент группы списков предупреждений Простой элемент группы информационных списков Простой элемент группы облегченных списков Простой элемент группы темных списков
Совет по доступности: Использование цвета для придания значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Пожалуйста, убедитесь, что значение очевидно из самого содержимого (например, видимого текста с достаточным цветовым контрастом) или включено альтернативными средствами, такими как дополнительный текст, скрытый с помощью класса .visually-hidden.

Со значками

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

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Элемент списка
    <span class="badge text-bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Второй элемент списка
    <span class="badge text-bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Третий элемент списка
    <span class="badge text-bg-primary rounded-pill">1</span>
  </li>
</ul>
Результат:
  • Элемент списка 14
  • Второй элемент списка 2
  • Третий элемент списка 1

Пользовательский контент

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

<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">Заголовок элемента группы списков</h5>
      <small>2 дня назад</small>
    </div>
    <p class="mb-1">Некоторое содержимое-заполнитель в абзаце.</p>
    <small>И немного мелкого шрифта.</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 дня назад</small>
    </div>
    <p class="mb-1">Некоторое содержимое-заполнитель в абзаце.</p>
    <small class="text-body-secondary">И немного мелкого шрифта.</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">4 дня назад</small>
    </div>
    <p class="mb-1">Некоторое содержимое-заполнитель в абзаце.</p>
    <small class="text-body-secondary">И немного мелкого шрифта.</small>
  </a>
</div>
Результат:
Заголовок элемента группы списков
2 дня назад

Некоторое содержимое-заполнитель в абзаце.

И немного мелкого шрифта.
List group item heading
3 дня назад

Некоторое содержимое-заполнитель в абзаце.

И немного мелкого шрифта.
List group item heading
4 дня назад

Некоторое содержимое-заполнитель в абзаце.

И немного мелкого шрифта.

Флажки и радиоприемники

Установите флажки и радиоприемники Bootstrap в элементах группы списков и настройте по мере необходимости. Вы можете использовать их без <label>, но, пожалуйста, не забудьте включить атрибут aria-label и значение для обеспечения доступности.

<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">Первый флажок</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">Второй флажок</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">Третий флажок</label>
  </li>
</ul>
Результат:
<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">Первое радио</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">Второе радио</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">Третье радио</label>
  </li>
</ul>
Результат:

Вы можете использовать .stretched-link с <label>, чтобы сделать весь элемент группы списков интерактивным.

<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">Первый флажок</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">Второй флажок</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">Третий флажок</label>
  </li>
</ul>
Результат:

CSS

Переменные

Добавлено в версии 5.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

Устарело в версии 5.3.0

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—плагин tab - включайте его отдельно или через скомпилированный bootstrap.js файл — чтобы расширить нашу группу списков для создания панелей локального содержимого с вкладками.

Немного содержимого-заполнителя в абзаце, относящемся к "Home". И еще немного содержимого, используемого здесь только для заполнения этой панели вкладок. В рабочей среде у вас, очевидно, было бы больше реального содержимого здесь. И не только текст. На самом деле это может быть что угодно. Текст, изображения, формы.

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

Активирует ваш контент как элемент вкладки.

Вы можете создать экземпляр tab с помощью конструктора, например:

const bsTab = new bootstrap.Tab('#myTab')
Метод Описание
dispose Уничтожает вкладку элемента.
getInstance Статический метод, который позволяет вам получить экземпляр tab, связанный с элементом DOM, вы можете использовать его следующим образом: bootstrap.Tab.getInstance(element).
getOrCreateInstance Статический метод, который возвращает экземпляр tab, связанный с элементом 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
  })
})

На этой странице

  1. Базовый пример
  2. Активные элементы
  3. Отключенные элементы
  4. Ссылки и кнопки
  5. Промывка
  6. Пронумерованный
  7. Горизонтальный
  8. Варианты
    1. Для ссылок и кнопок
  9. Со значками
  10. CSS
    1. Переменные
    2. Переменные Sass
    3. Смешивания Sass
    4. Циклы Sass
  11. Поведение JavaScript
    1. Использование атрибутов данных
    2. С помощью JavaScript
    3. Эффект затухания
    4. Методы