Группы списков Bootstrap
Базовые группы списков
Самая простая группа списков — это неупорядоченный список с элементами списка:
- Первый элемент
- Второй элемент
- Третий пункт
Чтобы создать базовую группу списка, используйте <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>
Список групп со значками
Вы также можете добавить значки в группу списка. Значки будут автоматически расположены справа:
- 12Новый
- 5Удалено
- 3Предупреждения
Чтобы создать значок, создайте <span>элемент с классом .badge
внутри элемента списка:
Пример
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
Группа списка со связанными элементами
Элементы в группе списка также могут быть гиперссылками. Это добавит серый цвет фона при наведении:
Чтобы создать группу списка со связанными элементами, используйте <div>вместо <ul>
и <a>вместо <li>:
Пример
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Активное состояние
Используйте .activeкласс, чтобы выделить текущий элемент:
Пример
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Отключенный элемент
В следующей группе списка есть отключенный элемент:
Чтобы отключить элемент, добавьте .disabledкласс:
Пример
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
Контекстные классы
Контекстные классы можно использовать для окрашивания элементов списка:
- Первый элемент
- Второй элемент
- Третий пункт
- Четвертый пункт
Классы для раскрашивания элементов списка:
.list-group-item-success, list-group-item-info,
list-group-item-warningи .list-group-item-danger:
Пример
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
Пользовательский контент
Вы можете добавить практически любой HTML в элемент группы списка.
Bootstrap предоставляет классы .list-group-item-headingи
.list-group-item-textкоторые можно использовать следующим образом:
Пример
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>