В Bootstrap группы списков — это компонент, который стилизует неупорядоченные списки определённым образом. Это позволяет создавать более сложные списки с пользовательским содержимым, не увязая в проблемах с оформлением.
Создание группы списков по умолчанию
Чтобы создать группу списков по умолчанию, примените класс .list-group к тегу <ul> и класс .list-group-item к каждому тегу <li>.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="list-group">
<li class="list-group-item">These Boots Are Made For Walking</li>
<li class="list-group-item">Eleanor, Put Your Boots On</li>
<li class="list-group-item">Puss 'n' Boots</li>
<li class="list-group-item">Die With Your Boots On</li>
<li class="list-group-item">Fairies Wear Boots</li>
</ul>
Значки
Вы можете добавить значки в группу списков. Выровнять их по отношению к остальному содержимому можно с помощью классов типа .justify-content-between (что расшифровывается как justify-content: space-between).
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
These Boots Are Made For Walking
<span class="badge bg-primary rounded-pill">15</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Eleanor, Put Your Boots On
<span class="badge bg-primary rounded-pill">38</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Puss 'n' Boots
<span class="badge bg-primary rounded-pill">76</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Die With Your Boots On
<span class="badge bg-primary rounded-pill">112</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Fairies Wear Boots
<span class="badge bg-primary rounded-pill">181</span>
</li>
</ul>
Ссылки в группе списков
Вы можете использовать .list-group-item-action для ссылок в группе списка. Это приводит к тому, что кликабельным становится весь элемент (а не только его текстовая часть). Весь пункт списка также меняет стиль при «наведении».
Чтобы создать ссылки в группе списков, замените тег <ul> на тег <div> и теги <li> на <a> или кнопку.
Вы также можете использовать класс .active, чтобы выделить пункт списка как текущий.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">These Boots Are Made For Walking</a>
<a href="#" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</a>
<a href="#" class="list-group-item list-group-item-action">Puss 'n' Boots</a>
<a href="#" class="list-group-item list-group-item-action">Die With Your Boots On</a>
<a href="#" class="list-group-item list-group-item-action">Fairies Wear Boots</a>
</div>
Кнопки
Вместо ссылок можно также использовать кнопки. Просто используйте тег <button> для классов .list-group-item и .list-group-item-action.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action">These Boots Are Made For Walking</button>
<button type="button" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</button>
<button type="button" class="list-group-item list-group-item-action">Puss 'n' Boots</button>
<button type="button" class="list-group-item list-group-item-action">Die With Your Boots On</button>
<button type="button" class="list-group-item list-group-item-action">Fairies Wear Boots</button>
</div>
Отключенные пункты
Вы также можете применить класс .disabled к элементу .list-group-item, чтобы он отображался отключенным.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">These Boots Are Made For Walking</a>
<a href="#" class="list-group-item list-group-item-action disabled">Eleanor, Put Your Boots On</a>
<a href="#" class="list-group-item list-group-item-action">Puss 'n' Boots</a>
<a href="#" class="list-group-item list-group-item-action">Die With Your Boots On</a>
<a href="#" class="list-group-item list-group-item-action">Fairies Wear Boots</a>
</div>
Контекстные классы
Вы также можете применить контекстные классы Bootstrap к пунктам группы списка. Для этого добавьте один из классов .list-group-item-* к пункту группы списка.
Когда элемент становится активным, его контекстный класс отображается в затемнённом варианте.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Boot Up</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Toot It & Boot It</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">These Boots Are Made For Walking</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success active">Eleanor, Put Your Boots On</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Puss 'n' Boots</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Die With Your Boots On</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Fairies Wear Boots</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Head Over Boots</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Boot Scootin' Boogie</a>
</div>
Пользовательское содержимое
Группы списков могут содержать и другие элементы HTML. И вы можете сделать всё это кликабельным, если вложить их в элемент <a>.
В Bootstrap 5 имеется класс .list-group-item-heading для заголовков и класс .list-group-item-text для текста.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<style>body { margin: 1rem; }</style>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action list-group-item-info">
<h4>These Boots Are Made For Walking</h4>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">
<h4>Puss 'n' Boots</h4>
<p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning active">
<h4>Fairies Wear Boots</h4>
<p>Omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
</a>
</div>