Основной список групп
Самый основной список групп представляет собой неупорядоченный список с элементами списка:
- Первый пункт
- Второй пункт
- Третий пункт
Для того, чтобы создать базовый список группы, используйте <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"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</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> Попробуй сам " Проверьте себя с упражнениями!
Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 »