Группы списков Bootstrap 5

базовая список групп

Самая базовая список групп - это unordered list, содержащая элементы списка:

Чтобы создать базовую список групп, используйте класс .list-group of <ul> элемент и класс: .list-group-item of <li> элемент:

Пример

<ul class="list-group">
  <li class="list-group-item">Первый элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
</ul>

Попробуйте сами

активное состояние

Используйте .active класс для подчеркивания текущего пункта:

Пример

<ul class="list-group">
  <li class="list-group-item active">активный пункт</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-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">первый пункт</a>
  <a href="#" class="list-group-item list-group-item-action">второй пункт</a>
  <a href="#" class="list-group-item list-group-item-action">Третий элемент</a>
</div>

Попробуйте сами

Отключенные элементы

.disabled класс добавляет более светлый текстовый цвет для отключенных элементов. При использовании в ссылках эффект наведения будет удален:

Пример

<div class="list-group">
  <a href="#" class="list-group-item disabled">Отключенный элемент</a>
  <a href="#" class="list-group-item disabled">Отключенный элемент</a>
  <a href="#" class="list-group-item">Третий элемент</a>
</div>

Попробуйте сами

удалить рамки

Использование .list-group-flush класс удаляет рамки и закругления:

Пример

<ul class="list-group list-group-flush">
  <li class="list-group-item">Первый элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
  <li class="list-group-item">Четвертый элемент</li>
</ul>

Попробуйте сами

с编号的列表组

Использование .list-group-numbered класс создает элементы списка с числами впереди:

Пример

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Первый элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
</ol>

Попробуйте сами

горизонтальный список

Если вы хотите, чтобы элементы списка отображались горизонтально, а не вертикально (рядом, а не стопкой), добавьте .list-group-horizontal класс добавить к .list-group:

Пример

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Первый элемент</li>
  <li class="list-group-item">Второй элемент</li>
  <li class="list-group-item">Третий элемент</li>
  <li class="list-group-item">Четвертый элемент</li>
</ul>

Попробуйте сами

Контекстные классы

Контекстные классы можно использовать для добавления цвета элементам списка:

Классы для окраски элементов списка:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

Пример

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Успешный элемент</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">Элемент опасности</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Основной элемент</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Тёмный элемент</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Световой элемент</a>
</div>

Попробуйте сами

Список групп с значками

Перенести .badge Сочетание класса с классом utility/helper позволяет добавлять значки в список групп:

Пример

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Входящие
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Рекламные письма
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Корзина
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Попробуйте сами