Группы списков
Группы списков - это гибкий и мощный компонент для отображения серии контента. Измените и расширьте их для поддержки практически любого содержимого внутри.
Простой пример
Самая основная группа списков - это неупорядоченный список с элементами списка и соответствующими классами. Развивайте его, используя следующие параметры или собственный CSS, если необходимо.
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
<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
к .list-group-item
, чтобы указать текущий активный выбор.
- An active 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
к .list-group-item
, чтобы он показался отключенным. Обратите внимание, что для некоторых элементов с .disabled
также потребуется специальный JavaScript, чтобы полностью отключить их события щелчка (например, ссылки).
- A disabled item
- 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>
или <button>
, чтобы создать элементы группы actionable списка с наведением, отключенным и активным состояниями, добавив .list-group-item-action
. Мы разделяем эти псевдоклассы, чтобы группы списков, состоящие из неинтерактивных элементов (таких как <li>
или <div>
) не обеспечивали доступность щелчка или касания.
Обязательно не используйте здесь стандартные классы .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>
Вы также можете использовать атрибут disabled
вместо класса .disabled
. К сожалению, <a>
не поддерживают атрибут.
<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
, чтобы удалить некоторые границы и закругленные углы для рендеринга элементов группы списков от края до края в родительском контейнере (например, карточки).
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
<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-horizontal
, чтобы изменить расположение элементов группы списков с вертикального на горизонтальное во всех контрольных точках. В качестве альтернативы, выберите адаптивный вариант .list-group-horizontal-{sm|md|lg|xl|xxl}
, чтобы сделать группу списков горизонтальной, начиная с min-width
контрольной точки. В настоящее время группы горизонтального списка нельзя комбинировать с группами скрытого списка.
Совет: Хотите элементы группы списков одинаковой ширины в горизонтальном положении? Добавьте .flex-fill
к каждому элементу группы списка.
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
- An item
- A second item
- A third item
<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>
Контекстные классы
Используйте контекстные классы для стилизации элементов списка с фоном и цветом с отслеживанием состояния.
- A simple default list group item
- Простой primary элемент группы списка
- Простой secondary элемент группы списка
- Простой success элемент группы списка
- Простой danger элемент группы списка
- Простой warning элемент группы списка
- Простой info элемент группы списка
- Простой light элемент группы списка
- Простой dark элемент группы списка
<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">Простой primary элемент группы списка</li>
<li class="list-group-item list-group-item-secondary">Простой secondary элемент группы списка</li>
<li class="list-group-item list-group-item-success">Простой success элемент группы списка</li>
<li class="list-group-item list-group-item-danger">Простой danger элемент группы списка</li>
<li class="list-group-item list-group-item-warning">Простой warning элемент группы списка</li>
<li class="list-group-item list-group-item-info">Простой info элемент группы списка</li>
<li class="list-group-item list-group-item-light">Простой light элемент группы списка</li>
<li class="list-group-item list-group-item-dark">Простой dark элемент группы списка</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
.
Со значками
Добавьте значки к любому элементу группы списка, чтобы показать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит.
- A list item 14
- A second list item 2
- A third list item 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 дня назадSome placeholder content in a paragraph.
And some small print.Заголовок элемента группы списка
3 дня назадSome placeholder content in a paragraph.
And some muted small print.Заголовок элемента группы списка
3 дня назадSome placeholder content in a paragraph.
And some muted small print.<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">Заголовок элемента группы списка</h5>
<small>3 дня назад</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">Заголовок элемента группы списка</h5>
<small class="text-muted">3 дня назад</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">Заголовок элемента группы списка</h5>
<small class="text-muted">3 дня назад</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>
, но не забудьте включить атрибут и значение aria-label
для доступности.
- First checkbox
- Second checkbox
- Third checkbox
- Fourth checkbox
- Fifth checkbox
<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>
в качестве .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>
Поведение 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="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="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="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="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">
<!-- Группа списка -->
<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">Главная</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Профиль</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Сообщения</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Настройки</a>
</div>
<!-- Панели вкладок -->
<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>
</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>
Методы
конструктор
Активирует элемент элемента списка и контейнер содержимого. Вкладка должна иметь либо 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
События
При отображении новой вкладки события запускаются в следующем порядке:
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 tabEl = document.querySelector('a[data-bs-toggle="list"]')
tabEl.addEventListener('shown.bs.tab', function (event) {
event.target // недавно активированная вкладка
event.relatedTarget // предыдущая активная вкладка
})