Bootstrap 4 List Groups
Основные группы списков
Самая базовая группа списков — это неупорядоченный список с элементами списка:
- First item
- Second item
- Third item
Чтобы создать основную группу списков, используйте <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 item
- Second item
- Third item
Используйте .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>
Контекстные классы
Контекстные классы могут использоваться для цветовых элементов списка:
- Success item
- Secondary item
- Info item
- Warning item
- Danger item
- Primary item
- Dark item
- Light item
Классы для раскраски список-элементы:
.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">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>