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

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

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

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

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

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

<ulclass="list-group"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li><liclass="list-group-item">Четвертый элемент</li><liclass="list-group-item">И пятый</li></ul>

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

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

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

<ulclass="list-group"><liclass="list-group-item active"aria-current="true">Активный элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li><liclass="list-group-item">Четвертый элемент</li><liclass="list-group-item">И пятый</li></ul>

Неактивные элементы

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

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

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

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

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

Заполнение

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

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

<ulclass="list-group list-group-flush"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li><liclass="list-group-item">Четвертый элемент</li><liclass="list-group-item">И пятый</li></ul>

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

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

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

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

<olclass="list-group list-group-numbered"><liclass="list-group-item">Элемент списка</li><liclass="list-group-item">Элемент списка</li><liclass="list-group-item">Элемент списка</li></ol>

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

Подзаголовок
Контент для элемента списка
14
Подзаголовок
Контент для элемента списка
14
Подзаголовок
Контент для элемента списка
14

<olclass="list-group list-group-numbered"><liclass="list-group-item d-flex justify-content-between align-items-start"><divclass="ms-2 me-auto"><divclass="fw-bold">Подзаголовок</div> Контент для элемента списка </div><spanclass="badge bg-primary rounded-pill">14</span></li><liclass="list-group-item d-flex justify-content-between align-items-start"><divclass="ms-2 me-auto"><divclass="fw-bold">Подзаголовок</div> Контент для элемента списка </div><spanclass="badge bg-primary rounded-pill">14</span></li><liclass="list-group-item d-flex justify-content-between align-items-start"><divclass="ms-2 me-auto"><divclass="fw-bold">Подзаголовок</div> Контент для элемента списка </div><spanclass="badge bg-primary rounded-pill">14</span></li></ol>

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

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

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

Элемент
Второй элемент
Третий элемент

Элемент
Второй элемент
Третий элемент

Элемент
Второй элемент
Третий элемент

Элемент
Второй элемент
Третий элемент

Элемент
Второй элемент
Третий элемент

Элемент
Второй элемент
Третий элемент

<ulclass="list-group list-group-horizontal"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul><ulclass="list-group list-group-horizontal-sm"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul><ulclass="list-group list-group-horizontal-md"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul><ulclass="list-group list-group-horizontal-lg"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul><ulclass="list-group list-group-horizontal-xl"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul><ulclass="list-group list-group-horizontal-xxl"><liclass="list-group-item">Элемент</li><liclass="list-group-item">Второй элемент</li><liclass="list-group-item">Третий элемент</li></ul>

Контекстные классы

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

Простой элемент группы списка по умолчанию
Простой primary элемент группы списка
Простой secondary элемент группы списка
Простой success элемент группы списка
Простой danger элемент группы списка
Простой warning элемент группы списка
Простой info элемент группы списка
Простой light элемент группы списка
Простой dark элемент группы списка

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

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

Простой элемент группы списка по умолчанию Простой primary элемент группы списка Простой secondary элемент группы списка Простой success элемент группы списка Простой danger элемент группы списка Простой warning элемент группы списка Простой info элемент группы списка Простой light элемент группы списка Простой dark элемент группы списка

<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action">Простой элемент группы списка по умолчанию</a><ahref="#"class="list-group-item list-group-item-action list-group-item-primary">Простой primary элемент группы списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-secondary">Простой secondary элемент группы списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-success">Простой success элемент группы списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-danger">Простой danger элемент группы списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-warning">Простой warning элемент группы списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-info">Простой info элемент группы списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-light">Простой light элемент группы списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-dark">Простой dark элемент группы списка</a></div>

Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden.

Со значками

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

Элемент списка 14
Второй элемент списка 2
Третий элемент списка 1

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

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

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

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

3 дня назад

Некоторый заполнитель в абзаце.

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

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

3 дня назад

Некоторый заполнитель в абзаце.

И какой-то приглушенный мелкий шрифт.

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

3 дня назад

Некоторый заполнитель в абзаце.

И какой-то приглушенный мелкий шрифт.

<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action active"aria-current="true"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">Заголовок элемента группы списка</h5><small>3 дня назад</small></div><pclass="mb-1">Некоторый заполнитель в абзаце.</p><small>И немного мелкого шрифта.</small></a><ahref="#"class="list-group-item list-group-item-action"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">Заголовок элемента группы списка</h5><smallclass="text-muted">3 дня назад</small></div><pclass="mb-1">Некоторый заполнитель в абзаце.</p><smallclass="text-muted">И какой-то приглушенный мелкий шрифт.</small></a><ahref="#"class="list-group-item list-group-item-action"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">Заголовок элемента группы списка</h5><smallclass="text-muted">3 дня назад</small></div><pclass="mb-1">Некоторый заполнитель в абзаце.</p><smallclass="text-muted">И какой-то приглушенный мелкий шрифт.</small></a></div>

Чекбоксы (флажки) и радиокнопки

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

<ulclass="list-group"><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="..."> Первый чекбокс </li><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="..."> Второй чекбокс </li><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="..."> Третий чекбокс </li><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="..."> Четвертый чекбокс </li><liclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""aria-label="..."> Пятый чекбокс </li></ul>

И если Вы хотите, чтобы <label> в качестве .list-group-item для больших областей попадания, Вы тоже могли это сделать.

<divclass="list-group"><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""> Первый чекбокс </label><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""> Второй чекбокс </label><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""> Третий чекбокс </label><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""> Четвертый чекбокс </label><labelclass="list-group-item"><inputclass="form-check-input me-1"type="checkbox"value=""> Пятый чекбокс </label></div>

Sass

Переменные

$list-group-color:$gray-900;$list-group-bg:$white;$list-group-border-color:rgba($black,.125);$list-group-border-width:$border-width;$list-group-border-radius:$border-radius;$list-group-item-padding-y:$spacer*.5;$list-group-item-padding-x:$spacer;$list-group-item-bg-scale:-80%;$list-group-item-color-scale:40%;$list-group-hover-bg:$gray-100;$list-group-active-color:$component-active-color;$list-group-active-bg:$component-active-bg;$list-group-active-border-color:$list-group-active-bg;$list-group-disabled-color:$gray-600;$list-group-disabled-bg:$list-group-bg;$list-group-action-color:$gray-700;$list-group-action-hover-color:$list-group-action-color;$list-group-action-active-color:$body-color;$list-group-action-active-bg:$gray-200;

Миксины

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

@mixin list-group-item-variant($state,$background,$color){.list-group-item-#{$state}{color:$color;background-color:$background;&.list-group-item-action{&:hover,&:focus{color:$color;background-color:shade-color($background,10%);}&.active{color:$white;background-color:$color;border-color:$color;}}}}

Цикл

Цикл, который генерирует классы модификаторов с помощью миксина list-group-item-variant().

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each$state,$valuein$theme-colors{$list-group-variant-bg:shift-color($value,$list-group-item-bg-scale);$list-group-variant-color:shift-color($value,$list-group-item-color-scale);@if(contrast-ratio($list-group-variant-bg,$list-group-variant-color)<$min-contrast-ratio){$list-group-variant-color:mix($value,color-contrast($list-group-variant-bg),abs($list-group-item-color-scale));}@include list-group-item-variant($state,$list-group-variant-bg,$list-group-variant-color);}

Поведение JavaScript

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

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

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

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

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

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

<divclass="row"><divclass="col-4"><divclass="list-group"id="list-tab"role="tablist"><aclass="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><aclass="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><aclass="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><aclass="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><divclass="col-8"><divclass="tab-content"id="nav-tabContent"><divclass="tab-pane fade show active"id="list-home"role="tabpanel"aria-labelledby="list-home-list">...</div><divclass="tab-pane fade"id="list-profile"role="tabpanel"aria-labelledby="list-profile-list">...</div><divclass="tab-pane fade"id="list-messages"role="tabpanel"aria-labelledby="list-messages-list">...</div><divclass="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.

<divrole="tabpanel"><!-- List group --><divclass="list-group"id="myList"role="tablist"><aclass="list-group-item list-group-item-action active"data-bs-toggle="list"href="#home"role="tab">Home</a><aclass="list-group-item list-group-item-action"data-bs-toggle="list"href="#profile"role="tab">Profile</a><aclass="list-group-item list-group-item-action"data-bs-toggle="list"href="#messages"role="tab">Messages</a><aclass="list-group-item list-group-item-action"data-bs-toggle="list"href="#settings"role="tab">Settings</a></div><!-- Tab panes --><divclass="tab-content"><divclass="tab-pane active"id="home"role="tabpanel">...</div><divclass="tab-pane"id="profile"role="tabpanel">...</div><divclass="tab-pane"id="messages"role="tabpanel">...</div><divclass="tab-pane"id="settings"role="tabpanel">...</div></div></div>

Через JavaScript

Включите элемент списка с вкладками через JavaScript (каждый элемент списка надо активировать отдельно):

vartriggerTabList=[].slice.call(document.querySelectorAll('#myTab a'))triggerTabList.forEach(function(triggerEl){vartabTrigger=newbootstrap.Tab(triggerEl)triggerEl.addEventListener('click',function(event){event.preventDefault()tabTrigger.show()})})

Вы можете активировать отдельный элемент списка несколькими способами:

vartriggerEl=document.querySelector('#myTab a[href="#profile"]')bootstrap.Tab.getInstance(triggerEl).show()// Select tab by name
vartriggerFirstTabEl=document.querySelector('#myTab li:first-child a')bootstrap.Tab.getInstance(triggerFirstTabEl).show()// Select first tab

Эффект угасания

Чтобы заставить панель вкладок постепенно появиться, добавьте класс .fade в каждый элемент класса .tab-pane. На первой панели вкладки также должно быть выставлено значение .show, чтобы сделать начальное содержимое видимым.

<divclass="tab-content"><divclass="tab-pane fade show active"id="home"role="tabpanel">...</div><divclass="tab-pane fade"id="profile"role="tabpanel">...</div><divclass="tab-pane fade"id="messages"role="tabpanel">...</div><divclass="tab-pane fade"id="settings"role="tabpanel">...</div></div>

Методы

constructor

Активирует элемент списка и контейнер содержимого. Вкладка должна иметь или data-bs-target, или href «нацеленный» на «узел контейнера» в DOM.

<divclass="list-group"id="myList"role="tablist"><aclass="list-group-item list-group-item-action active"data-bs-toggle="list"href="#home"role="tab">Home</a><aclass="list-group-item list-group-item-action"data-bs-toggle="list"href="#profile"role="tab">Profile</a><aclass="list-group-item list-group-item-action"data-bs-toggle="list"href="#messages"role="tab">Messages</a><aclass="list-group-item list-group-item-action"data-bs-toggle="list"href="#settings"role="tab">Settings</a></div><divclass="tab-content"><divclass="tab-pane active"id="home"role="tabpanel">...</div><divclass="tab-pane"id="profile"role="tabpanel">...</div><divclass="tab-pane"id="messages"role="tabpanel">...</div><divclass="tab-pane"id="settings"role="tabpanel">...</div></div><script>varfirstTabEl=document.querySelector('#myTab a:last-child')varfirstTab=newbootstrap.Tab(firstTabEl)firstTab.show()</script>

show

Выбирает данный элемент списка и показывает связанные с ним панели. Любой другой элемент списка, который был ранее выбран, становится «невыбранным», а связанные с ним панели – скрытыми. Возвращается к функции-вызову до того, как показалась панель вкладки (например, до события shown.bs.tab).

varsomeListItemEl=document.querySelector('#someListItem')vartab=newbootstrap.Tab(someListItemEl)tab.show()

dispose

Уничтожает вкладку TAB элемента.

getInstance

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

vartriggerEl=document.querySelector('#trigger')vartab=bootstrap.Tab.getInstance(triggerEl)// Returns a Bootstrap tab instance

getOrCreateInstance

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

vartriggerEl=document.querySelector('#trigger')vartab=bootstrap.Tab.getOrCreateInstance(triggerEl)// Возвращает экземпляр таба Bootstrap

События

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

hide.bs.tab (на текущей активной вкладке)
show.bs.tab (на вкладке, которая вот-вот покажется)
hidden.bs.tab (на предыдущей активной вкладке, такое же, как для события hide.bs.tab)
shown.bs.tab (на вкладке, только что ставшей активной и только что ставшей показанной, такое же, как для события show.bs.tab)

Если ни одна вкладка еще не была активной, события hide.bs.tab и hidden.bs.tab не произойдут.

Тип события	Описание
`show.bs.tab`	Используйте события `event.target` и `event.relatedTarget` для «нацеливания» на соответственно на активную и предыдущую активную (если она доступна) вкладки.
`shown.bs.tab`	Это событие наступает при показе вкладки, после того, как она показана. Используйте события `event.target` и `event.relatedTarget` для «нацеливания» соответственно на активную и предыдущую активную (если она доступна) вкладки.
`hide.bs.tab`	Это событие наступает, когда вот-вот покажется новая вкладка (и предыдущая, т.о., вот-вот скроется). Используйте события `event.target` и `event.relatedTarget` для «нацеливания» соответственно на активную текущую вкладку и ту, которая вот-вот откроется.
`hidden.bs.tab`	Это событие наступает, когда показана новая вкладка (и предыдущая активная, т.о., скрылась). Используйте события `event.target` и `event.relatedTarget` для «нацеливания» соответственно на предыдущую активную и новую активную вкладки.

vartabElms=document.querySelectorAll('a[data-bs-toggle="list"]')tabElms.forEach(function(tabElm){tabElm.addEventListener('shown.bs.tab',function(event){event.target// недавно активированная вкладка
event.relatedTarget// предыдущая активная вкладка
})}