Группа списков — это набор элементов списка, сгруппированных в один компонент. Это один из полезных компонентов Bootstrap 5 для создания навигационных ссылок и пунктов меню на боковой панели. Вы можете иметь различный фон, отображать элементы списка вместе со значком и использовать в качестве ссылки или кнопки. В этом руководстве по группам списков Bootstrap 5 давайте рассмотрим все возможности с примерами и кодом.
Руководство Bootstrap 5 List Group
В этом руководстве рассматриваются следующие темы:
Создание группы списка по умолчанию
Использование тега привязки в группе списка
Добавление кнопок в группу списка
Отображение активных и отключенных элементов
Список групп с разными цветами фона
Добавление значков
Настроить с помощью фона и значка
Вставка HTML-содержимого
Вертикальная группа списка вкладок
1. Группа списка по умолчанию
По умолчанию группа списков создается с помощью тегов
и
. Тег
должен использовать «.list-group», чтобы указать, что элемент является группой списка, и каждый тег
должен использовать «.list-group-item» для обозначения элемента группы списка. По умолчанию каждый элемент списка будет разделен линией-разделителем.
Группа списка по умолчанию будет выглядеть в браузере, как показано ниже. Помните, что группа списка будет занимать всю ширину контейнера, поэтому вы должны использовать дополнительный CSS, чтобы ограничить ширину, если хотите.
2. Использование тега привязки в группе списка
Использование тега
ограничено, поскольку текст не может быть связан. Таким образом, вы можете использовать тег вместо
И снова результат будет похожим, но разница элементов будет иметь эффект кнопки.
4. Отображение активных и отключенных элементов
Просто добавьте классы «.active» или «.disabled» к любому из элементов группы списка, чтобы сделать его активным или отключенным. Активный элемент будет иметь основной цвет фона, а отключенный элемент будет тусклым, показывая символ остановки курсора при наведении курсора мыши.
<ul class="list-group">
<li class="list-group-item active">Active List Item 1</li>
<li class="list-group-item">Normal List Item 2</li>
<li class="list-group-item disabled">Disabled List Item 3</li>
</ul>
Как объяснено, он должен дать следующие результаты:
5. Группа списков Bootstrap 4 с цветами фона
Всегда смотреть на белый фон будет скучно. Добавьте цвета фона к элементам группы списка с помощью предопределенных классов фона. Например, цвет успеха можно добавить с помощью класса «.list-group-item-success» к требуемому элементу списка.
Результат будет выглядеть в браузере, как показано ниже:
6. Группа списков Bootstrap 4 со значками
Мы объяснили компонент значка в предыдущем руководстве. Показывать значки напротив элементов группы списков легко, используя дополнительный тег с классами значков. Это наиболее часто используется на панелях администратора для отображения напоминаний.
«.Justify-content-between» используется для выравнивания промежутка между текстом элемента списка и значком. Это даст результат, как показано ниже:
В приведенном выше примере мы использовали элементы группы списков без фона и значки таблеток разного цвета. Вы можете использовать значки по умолчанию или любые собственные цвета с настраиваемым CSS.
7. Список групп с фоном и значком
Цвет фона элемента списка будет светлым при использовании классов фона элементов группы списков, таких как «.list-group-item-success». Вы можете использовать фоновые контекстные классы вместо того, чтобы иметь более темный фон.
Результат будет выглядеть привлекательно, как показано ниже:
8. Список групп с HTML-контентом
Служебные классы flexbox позволяют добавлять любой тип содержимого HTML внутри компонента группы списков.
<div class="list-group">
<a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action flex-column align-items-start active">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">This is a heading1</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Enter any content here.</p>
<small>Some small text here.</small>
</a>
<a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">This is a heading2</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Enter any content here.</p>
<small>Some small text here.</small>
</a>
</div>
Это даст следующий результат:
9. Группа списков Bootstrap 4 с вертикальными вкладками
Также возможно создать содержимое с вкладками, используя группу списков и стандартный JavaScript Bootstrap. Ниже приведен пример кода для создания вкладок с вертикальным выравниванием, и под каждой вкладкой будет отображаться различное содержимое.
Контент с вертикальными вкладками будет выглядеть следующим образом:
Заключение
Группа списка помогает отобразить список элементов в меньшем пространстве. Вы можете использовать вкладки, ссылки, кнопки и многое другое с группой списков. Мы рекомендуем использовать группу списков на боковой панели вашего сайта, чтобы отображать связанный или популярный контент.
