Группа списка
Группы списков — это гибкий и мощный компонент для отображения серии содержимого. Модифицируйте и расширяйте их для поддержки практически любого содержимого внутри.
Базовый пример
Самая простая группа списков — это неупорядоченный список с элементами списка и соответствующими классами. Разработайте его с помощью следующих опций или с помощью собственного CSS по мере необходимости.
- Пункт
- Второй элемент
- Третий элемент
- Четвертый пункт
- И пятый
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Активные элементы
Добавить .active
к a, .list-group-item
чтобы указать текущий активный выбор.
- Активный элемент
- A second item
- A third item
- A fourth item
- And a fifth one
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Отключенные элементы
Добавьте .disabled
к a .list-group-item
, чтобы он казался отключенным. Обратите внимание, что для некоторых элементов .disabled
также потребуется пользовательский JavaScript, чтобы полностью отключить их события щелчка (например, ссылки).
- Отключенный элемент
- A second item
- A third item
- A fourth item
- And a fifth one
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Ссылки и кнопки
Используйте <a>
s или <button>
s, чтобы создать активные элементы группы списка с состояниями наведения, отключения и активности, добавив .list-group-item-action
. Мы разделяем эти псевдоклассы, чтобы гарантировать, что группы списков, состоящие из неинтерактивных элементов (таких как <li>
s или <div>
s), не обеспечивают возможности щелчка или касания.
Не используйте здесь стандартные .btn
классы .
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
С <button>
s вы также можете использовать disabled
атрибут вместо .disabled
класса. К сожалению, <a>
s не поддерживает атрибут disabled.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
Румянец
Добавьте .list-group-flush
, чтобы удалить некоторые границы и закругленные углы, чтобы отобразить элементы группы списка от края до края в родительском контейнере (например, карточки).
- Пункт
- Второй элемент
- Третий элемент
- Четвертый пункт
- И пятый
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Пронумерованный
Добавьте .list-group-numbered
класс модификатора (и при необходимости используйте <ol>
элемент), чтобы выбрать элементы группы нумерованного списка. Числа генерируются с помощью CSS (в отличие от <ol>
стиля браузера по умолчанию) для лучшего размещения внутри элементов группы списка и для лучшей настройки.
Числа генерируются с counter-reset
помощью <ol>
, а затем стилизуются и размещаются с помощью ::before
псевдоэлемента <li>
с помощью counter-increment
и content
.
- Крас Хусто Одио
- Крас Хусто Одио
- Крас Хусто Одио
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
Они отлично работают и с пользовательским контентом.
-
ПодзаголовокКрас Хусто Одио
-
ПодзаголовокКрас Хусто Одио
-
ПодзаголовокКрас Хусто Одио
<ol class="list-group list-group-numbered">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Горизонтальный
Добавьте .list-group-horizontal
, чтобы изменить расположение элементов группы списка с вертикального на горизонтальное во всех контрольных точках. В качестве альтернативы выберите адаптивный вариант .list-group-horizontal-{sm|md|lg|xl|xxl}
, чтобы сделать группу списка горизонтальной, начиная с этой точки останова min-width
. В настоящее время группы горизонтального списка не могут быть объединены с группами скрытого списка.
ProTip: хотите, чтобы элементы списка были одинаковой ширины в горизонтальном положении? Добавить .flex-fill
к каждому элементу группы списка.
- Пункт
- Второй элемент
- Третий элемент
- Пункт
- Второй элемент
- Третий элемент
- Пункт
- Второй элемент
- Третий элемент
- Пункт
- Второй элемент
- Третий элемент
- Пункт
- Второй элемент
- Третий элемент
- Пункт
- Второй элемент
- Третий элемент
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Контекстные классы
Используйте контекстные классы для оформления элементов списка с помощью фона и цвета с отслеживанием состояния.
- Простой элемент группы списка по умолчанию
- Простой элемент группы основного списка
- Простой групповой элемент вторичного списка
- Простой групповой элемент списка успеха
- Простой групповой элемент списка опасностей
- Простой групповой элемент списка предупреждений
- Простой групповой элемент информационного списка
- Простой групповой элемент списка источников света
- Простой групповой элемент темного списка
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
Контекстные классы также работают с .list-group-item-action
. Обратите внимание на добавление здесь стилей наведения, отсутствующих в предыдущем примере. Также поддерживается .active
государство; примените его, чтобы указать активный выбор в элементе группы контекстного списка.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Передача смысла вспомогательным технологиям
Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый вместе с .visually-hidden
классом.
С значками
Добавьте значки к любому элементу группы списка, чтобы показать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит .
- Элемент списка14
- Второй элемент списка2
- Третий элемент списка1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
Пользовательский контент
Добавьте практически любой HTML-код внутри, даже для групп связанных списков, таких как приведенный ниже, с помощью утилит flexbox .
Заголовок элемента группы списка
3 дня назадНекоторый заполнитель содержимого в абзаце.
И немного мелкого шрифта.Заголовок элемента группы списка
3 дня назадНекоторый заполнитель содержимого в абзаце.
И немного приглушенного мелкого шрифта.Заголовок элемента группы списка
3 дня назадНекоторый заполнитель содержимого в абзаце.
И немного приглушенного мелкого шрифта.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
Флажки и радио
Поместите флажки и переключатели Bootstrap в элементы группы списка и настройте их по мере необходимости. Вы можете использовать их без <label>
s, но не забудьте включить aria-label
атрибут и значение для доступности.
- Первый флажок
- Второй флажок
- Третий флажок
- Четвертый флажок
- Пятый флажок
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
И если вы хотите <label>
использовать s .list-group-item
для больших областей поражения, вы тоже можете это сделать.
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
Сасс
Переменные
$list-group-color: $gray-900;
$list-group-bg: $white;
$list-group-border-color: rgba($black, .125);
$list-group-border-width: $border-width;
$list-group-border-radius: $border-radius;
$list-group-item-padding-y: $spacer * .5;
$list-group-item-padding-x: $spacer;
$list-group-item-bg-scale: -80%;
$list-group-item-color-scale: 40%;
$list-group-hover-bg: $gray-100;
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-color: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;
Миксины
Используется в сочетании с $theme-colors
для создания классов контекстных вариантов для .list-group-item
s.
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
Петля
Цикл, который генерирует классы модификаторов с list-group-item-variant()
примесью.
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
Поведение JavaScript
Используйте подключаемый модуль JavaScript для вкладок — включите его отдельно или через скомпилированный bootstrap.js
файл — чтобы расширить нашу группу списков для создания вкладок с локальным контентом.
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
Использование атрибутов данных
Вы можете активировать групповую навигацию списка без написания JavaScript, просто указав data-bs-toggle="list"
или на элементе. Используйте эти атрибуты данных в .list-group-item
.
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
Через JavaScript
Включить элемент списка с вкладками через JavaScript (каждый элемент списка необходимо активировать отдельно):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
Вы можете активировать отдельный элемент списка несколькими способами:
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
Эффект затухания
Чтобы панель вкладок исчезала, добавьте .fade
к каждому файлу .tab-pane
. Первая панель вкладок также должна .show
отображать начальное содержимое.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
Методы
constructor
Активирует элемент элемента списка и контейнер содержимого. Вкладка должна иметь либо a, data-bs-target
либо href
целевой узел контейнера в DOM.
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
show
Выбирает данный элемент списка и показывает связанную с ним панель. Любой другой элемент списка, который был выбран ранее, становится невыбранным, а связанная с ним панель скрывается. Возвращает вызывающему объекту до фактического отображения панели вкладок (например, до shown.bs.tab
возникновения события).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
Уничтожает вкладку элемента.
getInstance
Статический метод, который позволяет получить экземпляр вкладки, связанный с элементом DOM.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Статический метод, который позволяет вам получить экземпляр вкладки, связанный с элементом DOM, или создать новый, если он не был инициализирован.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
События
При отображении новой вкладки события запускаются в следующем порядке:
hide.bs.tab
(на текущей активной вкладке)show.bs.tab
(на вкладке "Показать")hidden.bs.tab
(на предыдущей активной вкладке, той же, что и дляhide.bs.tab
события)shown.bs.tab
(на вновь-активной только что показанной вкладке, той же, что и дляshow.bs.tab
события)
Если ни одна вкладка не была активна, события hide.bs.tab
и hidden.bs.tab
не будут запущены.
Тип события | Описание |
---|---|
show.bs.tab |
Это событие срабатывает при показе вкладки, но до того, как будет показана новая вкладка. Используйте event.target и event.relatedTarget для выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно. |
shown.bs.tab |
Это событие срабатывает при показе вкладки после того, как вкладка была показана. Используйте event.target и event.relatedTarget для выбора активной вкладки и предыдущей активной вкладки (если она доступна) соответственно. |
hide.bs.tab |
Это событие срабатывает, когда должна быть показана новая вкладка (и, следовательно, предыдущая активная вкладка должна быть скрыта). Используйте event.target и event.relatedTarget для выбора текущей активной вкладки и новой вкладки, которая скоро станет активной, соответственно. |
hidden.bs.tab |
Это событие срабатывает после отображения новой вкладки (и, таким образом, предыдущая активная вкладка скрыта). Используйте event.target и event.relatedTarget для выбора предыдущей активной вкладки и новой активной вкладки соответственно. |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}