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

Группа списков Bootstrap 5 — это компонент, используемый для отображения серии элементов или содержимого, часто применяемый для навигации, тегов, меню или других подобных списков.

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

Базовая структура

Группа списков Bootstrap 5 состоит из следующих частей:

  • .list-group: Контейнер, используемый для обёртывания всего списка.
  • .list-group-item: Каждый элемент списка, обычно содержащий текст, ссылки или другое содержимое.
  • .list-group-item-action: Делает элементы списка кликабельными, часто используется для создания интерактивных списков.
  • .list-group-item-primaryи т. д.: Используется для добавления разных цветов фона или других стилей к элементам списка.

Большинство базовых групп списков являются неупорядоченными.

Чтобы создать группу списков, вы можете добавить<ul>к элементу.list-groupкласс, к<li>добавьте к элементу.list-group-itemкласс:

Пример

<ul class="list-group"> <li class="list-group-item">Первый элемент</li> <li class="list-group-item">Второй элемент</li> <li class="list-group-item">Третий элемент</li> </ul>

Попробуйте сами »

Активный элемент списка

С помощью добавления.activeкласса можно задать активный элемент списка:

Пример

<ul class="list-group"> <li class="list-group-item active">Активный элемент списка</li> <li class="list-group-item">Второй элемент</li> <li class="list-group-item">Третий элемент</li> </ul>

Попробуйте сами »

Отключенный элемент списка

.disabledкласс используется для установки отключенных элементов списка:

Пример

<ul class="list-group"> <li class="list-group-item disabled">Отключенный элемент</li> <li class="list-group-item">Второй элемент</li> <li class="list-group-item">Третий элемент</li> </ul>

Попробуйте сами »

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

Чтобы создать элемент списка-ссылки, вы можете заменить<ul>на<div> ， <a>заменить<li>. Если вы хотите показать серый фон при наведении мыши, добавьте.list-group-item-actionкласс:

Пример

<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">Второй элемент</a> <a href="#" class="list-group-item list-group-item-action">Третий элемент</a> </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> </ul>

Попробуйте сами »

Горизонтальная группа списка

Мы можем добавить.list-group-horizontalкласс к.list-groupпосле класса, чтобы создать горизонтальную группу списка:

Пример

<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> <li class="list-group-item">Четвертый элемент</li> </ul>

Попробуйте сами »

Многоцветные элементы списка

Цвет элементов списка можно задать с помощью следующих классов: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-darkиlist-group-item-light:

Пример

<ul class="list-group"> <li class="list-group-item list-group-item-success">Успешный элемент списка</li> <li class="list-group-item list-group-item-secondary">Вторичный элемент списка</li> <li class="list-group-item list-group-item-info">Элемент списка с информацией</li> <li class="list-group-item list-group-item-warning">Элемент списка с предупреждением</li> <li class="list-group-item list-group-item-danger">Элемент списка с опасностью</li> <li class="list-group-item list-group-item-primary">Основной элемент списка</li> <li class="list-group-item list-group-item-dark">Тёмный элемент списка</li> <li class="list-group-item list-group-item-light">Светлый элемент списка</li> </ul>

Попробуйте сами »

Связанные многоцветные элементы списка

Пример

<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Активный элемент списка</a> <a href="#" class="list-group-item list-group-item-success">Элемент списка успеха</a> <a href="#" class="list-group-item list-group-item-secondary">Вторичный элемент списка</a> <a href="#" class="list-group-item list-group-item-info">Элемент списка информации</a> <a href="#" class="list-group-item list-group-item-warning">Элемент списка с предупреждением</a> <a href="#" class="list-group-item list-group-item-danger">Элемент списка опасности</a> <a href="#" class="list-group-item list-group-item-primary">Основной элемент списка</a> <a href="#" class="list-group-item list-group-item-dark">Тёмный элемент списка</a> <a href="#" class="list-group-item list-group-item-light">Светлый элемент списка</a> </div>

Попробуйте »

Пример группы списка

Пример


Попробуйте »
Другие расширения