Основні групи списків
Найпростіша група списків - це найновіший список елементів елементів:
- Перший пункт
- Другий пункт
- Третій пункт
Щоб створити основну групу списків, використовуйте <ul> елемент з класом .list-group і <li> елементи з класом .list-group-item:
See the Pen
list-group-bs4 by kravets (@raisa69)
on CodePen.
З двома класами .list-group & .list-group-item можна створити список не використовуючи пари тегів <ul>, <li>:
<div class="list-group"> <div class="list-group-item">Java</div> <div class="list-group-item">C</div> <div class="list-group-item">C++</div></div>Активний стан елементу списку
See the Pen list-group-item active by kravets (@raisa69) on CodePen.
Група списків із зв'язаними елементами
Щоб створити групу списків із зв'язаними елементами, потрібно використовувати div замість ul a li. При необхідності додати клас, .list-group-item-action якщо ви потрібен сірий колір фону при наведенні:
See the Pen list-group-item-action by kravets (@raisa69) on CodePen.
Контекстні класи
Елементам списку можна змінювати фон для цього використовується клас list-group-item - * (де * - назва фону). Цк контексні класи.
Контекстні класи можуть використовуватися для колірних елементів списку:
.list-group-item-success.list-group-item-info.list-group-item-warning.list-group-item-danger
.list-group-item-success.list-group-item-info.list-group-item-warning.list-group-item-dangerSee the Pen list-group-item-success-bs4 by kravets (@raisa69) on CodePen.
Завдання 1
