У Bootstrap групи списків — це компонент, який стилізує неупорядковані списки певним чином. Це відкриває шлях для створення більш складних списків з вмістом користувача, не ув'язуючи в проблемах з презентацією.
Створення групи за замовчуванням
Щоб створити групу списку за замовчуванням, застосуйте клас .list-group до елемента <ul> та клас .list-group-item до кожного елемента <li>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="list-group"> <li class="list-group-item">These Boots Are Made For Walking</li> <li class="list-group-item">Eleanor, Put Your Boots On</li> <li class="list-group-item">Puss 'n' Boots</li> <li class="list-group-item">Die With Your Boots On</li> <li class="list-group-item">Fairies Wear Boots</li> </ul>
Значки
Ви можете додати значки до групи списку та вирівняти їх з іншим вмістом через класи на кшталт .justify-content-between (що перекладається як justify-content: space-between).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <ul class="list-group"> <li class="list-group-item justify-content-between"> These Boots Are Made For Walking <span class="badge badge-secondary badge-pill">15</span> </li> <li class="list-group-item justify-content-between"> Eleanor, Put Your Boots On <span class="badge badge-secondary badge-pill">38</span> </li> <li class="list-group-item justify-content-between"> Puss 'n' Boots <span class="badge badge-secondary badge-pill">76</span> </li> <li class="list-group-item justify-content-between"> Die With Your Boots On <span class="badge badge-secondary badge-pill">112</span> </li> <li class="list-group-item justify-content-between"> Fairies Wear Boots <span class="badge badge-secondary badge-pill">181</span> </li> </ul>
Група списку з посиланнями
Ви можете використовувати клас .list-group-item-action для посилань усередині пунктів списку. При цьому весь пункт стає клікабельним (а не тільки текстова частина), також весь пункт списку змінює стиль при наведенні покажчика. Щоб створити групу списку з посиланнями, поміняйте елемент <ul> на <div>, а елемент <li> на <a>. Ви також можете використовувати клас .active, щоб виділити поточний пункт списку.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">These Boots Are Made For Walking</a> <a href="#" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</a> <a href="#" class="list-group-item list-group-item-action">Puss 'n' Boots</a> <a href="#" class="list-group-item list-group-item-action">Die With Your Boots On</a> <a href="#" class="list-group-item list-group-item-action">Fairies Wear Boots</a> </div>
Кнопки
Ви також можете змінити посилання на кнопки — просто використовуйте елементи <button> для класу .list-group-item або .list-group-item-action.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="list-group"> <button type="button" class="list-group-item list-group-item-action">These Boots Are Made For Walking</button> <button type="button" class="list-group-item list-group-item-action active">Eleanor, Put Your Boots On</button> <button type="button" class="list-group-item list-group-item-action">Puss 'n' Boots</button> <button type="button" class="list-group-item list-group-item-action">Die With Your Boots On</button> <button type="button" class="list-group-item list-group-item-action">Fairies Wear Boots</button> </div>
Відключені пункти
Ви також можете застосувати клас .disabled до елемента .list-group, щоб він виглядав вимкненим.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action">These Boots Are Made For Walking</a> <a href="#" class="list-group-item list-group-item-action disabled">Eleanor, Put Your Boots On</a> <a href="#" class="list-group-item list-group-item-action">Puss 'n' Boots</a> <a href="#" class="list-group-item list-group-item-action">Die With Your Boots On</a> <a href="#" class="list-group-item list-group-item-action">Fairies Wear Boots</a> </div>
Контекстні класи
З іншого боку, ви можете використовувати контекстні класи Bootstrap для пунктів групи списку. Для цього додайте один із класів .list-group-item-* до групи списку.
Коли до пункту додається клас .active, контекстний клас відображається у затемненій версії.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action list-group-item-success">These Boots Are Made For Walking</a> <a href="#" class="list-group-item list-group-item-action list-group-item-success active">Eleanor, Put Your Boots On</a> <a href="#" class="list-group-item list-group-item-action list-group-item-info">Puss 'n' Boots</a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Die With Your Boots On</a> <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Fairies Wear Boots</a> <a href="#" class="list-group-item list-group-item-action list-group-item-light">Head Over Boots</a> <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Boot Scootin' Boogie</a> </div>
Зміст користувача
Групи списків можуть містити інші елементи HTML. І ви можете зробити це клікабельним, якщо вкласти все в елемент <a>.
У Bootstrap 4 є клас .list-group-item-heading для заголовків та клас .list-group-item-text для тексту.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div class="list-group"> <a href="#" class="list-group-item list-group-item-action list-group-item-info"> <h4>These Boots Are Made For Walking</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </a> <a href="#" class="list-group-item list-group-item-action list-group-item-success"> <h4>Puss 'n' Boots</h4> <p> </a> <a href="#" class="list-group-item list-group-item-action list-group-item-warning active"> <h4>Fairies Wear Boots</h4> <p>Omnis iste natus error voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p> </a> </div>