Перейти к основному содержанию Перейти к навигации по документам
Cмотреть на GitHub

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

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

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

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

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

  • Элемент
  • Второй элемент
  • Третий элемент
  • Четвертый элемент
  • И пятый
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>

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

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

  • Активный элемент
  • Второй элемент
  • Третий элемент
  • Четвертый элемент
  • И пятый
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, чтобы полностью отключить их события щелчка (например, ссылки).

  • Отключенный элемент
  • Второй элемент
  • Третий элемент
  • Четвертый элемент
  • И пятый
html 
<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>, чтобы создать элементы группы actionable списка с наведением, отключенным и активным состояниями, добавив .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">
    Текущий элемент ссылка
  </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">Отключенный элемент ссылка</a>
</div>

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

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>

Заполнение

Добавьте класс .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.

  1. Элемент списка
  2. Элемент списка
  3. Элемент списка
html 
<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. Подзаголовок
    Контент для элемента списка
    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">Подзаголовок</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 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 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>

Варианты

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

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

  • Простой элемент группы списка по умолчанию
  • Простой primary элемент группы списка
  • Простой secondary элемент группы списка
  • Простой success элемент группы списка
  • Простой danger элемент группы списка
  • Простой warning элемент группы списка
  • Простой info элемент группы списка
  • Простой light элемент группы списка
  • Простой dark элемент группы списка
html 
<ul class="list-group">
  <li class="list-group-item">Простой элемент группы списка по умолчанию</li>

  <li class="list-group-item list-group-item-primary">Простой primary элемент группы списка</li>
  <li class="list-group-item list-group-item-secondary">Простой secondary элемент группы списка</li>
  <li class="list-group-item list-group-item-success">Простой success элемент группы списка</li>
  <li class="list-group-item list-group-item-danger">Простой danger элемент группы списка</li>
  <li class="list-group-item list-group-item-warning">Простой warning элемент группы списка</li>
  <li class="list-group-item list-group-item-info">Простой info элемент группы списка</li>
  <li class="list-group-item list-group-item-light">Простой light элемент группы списка</li>
  <li class="list-group-item list-group-item-dark">Простой dark элемент группы списка</li>
</ul>

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

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

Со значками

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

  • Элемент списка 14
  • Второй элемент списка 2
  • Третий элемент списка 1
html 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Элемент списка
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Второй элемент списка
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Третий элемент списка
    <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">Заголовок элемента группы списка</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-muted">3 дня назад</small>
    </div>
    <p class="mb-1">Некоторый заполнитель в абзаце.</p>
    <small class="text-muted">И какой-то приглушенный мелкий шрифт.</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-muted">3 дня назад</small>
    </div>
    <p class="mb-1">Некоторый заполнитель в абзаце.</p>
    <small class="text-muted">И какой-то приглушенный мелкий шрифт.</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

Переменные

Добавлено в версии 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 миксины

Устарело начиная с 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">Главная</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>

Использование атрибутов данных

Вы можете активировать навигацию по группам списков без написания кода JavaScript, просто указав data-bs-toggle="list" или на элементе. Используйте эти атрибуты данных в .list-group-item.

<div role="tabpanel">
  <!-- Группа списка -->
  <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>

<!-- Панели вкладок -->
  <div 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
  })
})