В Bootstrap группы списков — это компонент, который стилизует неупорядоченные списки определённым образом. Это открывает путь для создания более сложных списков с пользовательским содержимым, не увязая в проблемах с презентацией.
Создание группы по умолчанию
Чтобы создать группу списка по умолчанию, примените класс .list-group к элементу <ul> и класс .list-group-item к каждому элементу <li>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<ul class="list-group">
<li class="list-group-item justify-content-between">
These Boots Are Made For Walking
<span class="badge badge-secondary badge-pill">15</span>
</li>
<li class="list-group-item justify-content-between">
Eleanor, Put Your Boots On
<span class="badge badge-secondary badge-pill">38</span>
</li>
<li class="list-group-item justify-content-between">
Puss 'n' Boots
<span class="badge badge-secondary badge-pill">76</span>
</li>
<li class="list-group-item justify-content-between">
Die With Your Boots On
<span class="badge badge-secondary badge-pill">112</span>
</li>
<li class="list-group-item justify-content-between">
Fairies Wear Boots
<span class="badge badge-secondary badge-pill">181</span>
</li>
</ul>
Группа списка со ссылками
Вы можете использовать класс .list-group-item-action для ссылок внутри пунктов списка. При этом весь пункт становится кликабельным (а не только текстовая часть), также весь пункт списка меняет стиль при наведении указателя.
Чтобы создать группу списка со ссылками, поменяйте элемент <ul> на <div>, а элемент <li> на <a>. Вы также можете использовать класс .active, чтобы выделить текущий пункт списка.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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, чтобы он выглядел отключенным.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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-* к пункту группы списка.
Когда к пункту добавляется класс .active, контекстный класс отображается в затемнённой версии.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="list-group">
<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 4 есть класс .list-group-item-heading для заголовков и класс .list-group-item-text для текста.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<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>