Bootstrap 4 группы списков
Базовые группы списков
Самая простая группа списков — это неупорядоченный список с элементами списка:
- Первый элемент
- Второй элемент
- Третий пункт
Чтобы создать базовую группу списка, используйте <ul>элемент с классом .list-groupи
<li>элементы с классом .list-group-item:
Пример
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Активное состояние
- Активный элемент
- Второй элемент
- Третий пункт
Используйте .activeкласс, чтобы выделить текущий элемент:
Пример
<ul class="list-group">
<li class="list-group-item
active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Группа списка со связанными элементами
Чтобы создать группу списка со связанными элементами, используйте <div>вместо <ul>
и <a>вместо <li>. При желании добавьте .list-group-item-actionкласс, если вы хотите серый цвет фона при наведении:
Пример
<div class="list-group">
<a href="#"
class="list-group-item list-group-item-action">First item</a>
<a
href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
Отключенный элемент
Класс .disabledдобавляет более светлый цвет текста к отключенному элементу. А при использовании на ссылках удалит эффект наведения:
Пример
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#"
class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Смыть/удалить границы
Используйте .list-group-flushкласс, чтобы удалить некоторые границы и закругленные углы:
- Первый элемент
- Второй элемент
- Третий пункт
- Четвертый пункт
Пример
<ul class="list-group
list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
Горизонтальные группы списков
Если вы хотите, чтобы элементы списка отображались горизонтально, а не вертикально (бок о бок, а не друг над другом), добавьте .list-group-horizontalкласс в .list-group:
- Первый элемент
- Второй элемент
- Третий пункт
- Четвертый пункт
Пример
<ul class="list-group
list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth 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-primary, list-group-item-darkи list-group-item-light,:
Пример
<ul class="list-group">
<li class="list-group-item
list-group-item-success">Success item</li>
<li
class="list-group-item list-group-item-secondary">Secondary item</li>
<li class="list-group-item list-group-item-info">Info item</li>
<li
class="list-group-item list-group-item-warning">Warning item</li>
<li class="list-group-item list-group-item-danger">Danger item</li>
<li class="list-group-item list-group-item-primary">Primary item</li>
<li class="list-group-item list-group-item-dark">Dark item</li>
<li
class="list-group-item list-group-item-light">Light item</li>
</ul>
Связывание элементов с контекстными классами
Пример
<div class="list-group">
<a href="#" class="list-group-item
list-group-item-action">Action item</a>
<a href="#"
class="list-group-item list-group-item-action list-group-item-success">Success item</a>
<a
href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>
Список групп со значками
Объедините .badgeклассы с служебными/вспомогательными классами, чтобы добавить значки в группу списка:
- Входящие 12
- Объявления 50
- Хлам 99
Пример
<ul class="list-group">
<li class="list-group-item d-flex
justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary
badge-pill">50</span>
</li>
<li class="list-group-item
d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
Совет. Узнайте больше о классах Bootstrap 4 Utility/Helper в нашей главе «Утилиты BS4» .