Группа списков

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

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

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

Самый базовый список группы - это неупорядоченный список с элементами списка и правильными классами. Создайте один с помощью <ul> и <li>.

Элемент
Второй элемент
Третий элемент
Четвертый элемент
Пятый элемент

html

<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 для указания текущего активного выбора.

Активный элемент
Второй элемент
Третий элемент
Четвертый элемент
Пятый элемент

html

<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 для полностью отключения их функций (например, ссылки).

Чтобы элементы .list-group-item-action выглядели отключёнными, добавьте класс .disabled и атрибут aria-disabled="true", чтобы сообщить вспомогательным технологиям, что элемент отключён. Для полной деактивации ссылок и кнопок может потребоваться дополнительный JavaScript.

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

Текущий элемент ссылка Второй элемент ссылки Третий элемент ссылки Четвертый элемент ссылки Отключенный элемент ссылки

html

<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" tabindex="-1" aria-disabled="true">Отключенный элемент ссылки</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">
    Текущая кнопка
  </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>

Flush

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

Элемент
Второй элемент
Третий элемент
Четвертый элемент
Пятый элемент

html

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

Элемент списка
Элемент списка

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Элемент списка</li>
  <li class="list-group-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">Заголовок подсписка</div>
      Содержимое для элемента списка
    </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">Заголовок подсписка</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>

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

Добавьте .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">Элемент</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>

Варианты

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

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

Простой элемент списка группы
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

html

<ul class="list-group">
  <li class="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; примените его для обозначения активного выбора на контекстном элементе списка группы.

Простой элемент списка группы A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

html

<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 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">
    Элемент списка
    <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>

Пользовательское содержимое

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

Заголовок элемента списка группы

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">Заголовок элемента списка группы</h5>
      <small>3 дня назад</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">Заголовок элемента списка группы</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">Заголовок элемента списка группы</h5>
      <small class="text-body-secondary">3 дня назад</small>
    </div>
    <p class="mb-1">Содержимое для элемента списка группы.</p>
    <small class="text-body-secondary">И небольшой текст.</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">Первый чекбокс</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>

Первый радио
Второй радио
Третий радио

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">Первый радио</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>, чтобы сделать весь элемент списка группы кликабельным.

Первый чекбокс
Второй чекбокс
Третий чекбокс

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">Первый чекбокс</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

Переменные

Добавлено в 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

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

Дом Профиль Сообщения Настройки

Некоторое заполнительное содержимое в абзаце, относящееся к «Дом». И ещё немного текста, который используется здесь просто для заполнения этой панели вкладки. В реальном проекте здесь, конечно, будет больше настоящего содержимого. И не только текст. Это может быть что угодно: текст, изображения, формы.

Некоторое заполнительное содержимое в абзаце, относящееся к «Профиль». И ещё немного текста, который используется здесь просто для заполнения этой панели вкладки. В реальном проекте здесь, конечно, будет больше настоящего содержимого. И не только текст. Это может быть что угодно: текст, изображения, формы.

Некоторое заполнительное содержимое в абзаце, относящееся к «Сообщения». И ещё немного текста, который используется здесь просто для заполнения этой панели вкладки. В реальном проекте здесь, конечно, будет больше настоящего содержимого. И не только текст. Это может быть что угодно: текст, изображения, формы.

Некоторое заполнительное содержимое в абзаце, относящееся к «Настройки». И ещё немного текста, который используется здесь просто для заполнения этой панели вкладки. В реальном проекте здесь, конечно, будет больше настоящего содержимого. И не только текст. Это может быть что угодно: текст, изображения, формы.

<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">Дом</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">Профиль</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">Сообщения</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">Настройки</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

Вы можете активировать навигацию списка группы без написания любого JavaScript, просто указав data-bs-toggle="list" или на элемент. Используйте эти атрибуты data на .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">Дом</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Профиль</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Сообщения</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Настройки</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() // Выбрать вкладку по имени

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Выбрать первую вкладку

Эффект затухания

Чтобы сделать панель вкладок затухающей, добавьте .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`).

События

При отображении новой вкладки события срабатывают в следующем порядке:

hide.bs.tab (на текущей активной вкладке)
show.bs.tab (на то, что будет показано)
hidden.bs.tab (на предыдущей активной вкладке, той же, что и для события hide.bs.tab)
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 // новой активированной вкладкой
    event.relatedTarget // предыдущей активной вкладкой
  })
})