Группа списков
Группы списков - это гибкий и мощный компонент для отображения контента. Изменяйте и расширйяте его для поддержки внутри практически любого содержимого.
Базовые примеры
Самая простая группа списков – это неупорядоченный список из элементов нужных классов. Создавайте на этой основе свою разметку и свой CSS, если нужно.
- An item
- A second item
- A third item
- A fourth item
- And a fifth one
<ulclass="list-group"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><liclass="list-group-item">A fourth item</li><liclass="list-group-item">And a fifth one</li></ul>Активные элементы
Добавьте в .list-group-item класс .active для обозначения текущего активного выбора.
- An active item
- A second item
- A third item
- A fourth item
- And a fifth one
<ulclass="list-group"><liclass="list-group-item active"aria-current="true">An active item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><liclass="list-group-item">A fourth item</li><liclass="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
<ulclass="list-group"><liclass="list-group-item disabled"aria-disabled="true">A disabled item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><liclass="list-group-item">A fourth item</li><liclass="list-group-item">And a fifth one</li></ul>Ссылки и кнопки
Используйте <a> или <button> для создания элементов группы списка с возможностью возложить на них некое действие – с наличием «ховера» (наведения), неактивных и активных состояний – добавляя в них .list-group-item-action. Мы разделяем эти псевдоклассы для уверенности в том, что группы списков, созданные из не-интерактивных элементов (как <li> или <div>), не будут позволять поддержку касания или клика.
Удостоверьтесь, что не используете стандартные классы .btn в описанном выше случае.
<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action active"aria-current="true"> The current link item </a><ahref="#"class="list-group-item list-group-item-action">A second link item</a><ahref="#"class="list-group-item list-group-item-action">A third link item</a><ahref="#"class="list-group-item list-group-item-action">A fourth link item</a><ahref="#"class="list-group-item list-group-item-action disabled"tabindex="-1"aria-disabled="true">A disabled link item</a></div>В <button> вы можете также использовать атрибут disabled вместо класса .disabled. К сожалению, <a> не поддерживают отключенный атрибут.
<divclass="list-group"><buttontype="button"class="list-group-item list-group-item-action active"aria-current="true"> The current button </button><buttontype="button"class="list-group-item list-group-item-action">A second item</button><buttontype="button"class="list-group-item list-group-item-action">A third button item</button><buttontype="button"class="list-group-item list-group-item-action">A fourth button item</button><buttontype="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
<ulclass="list-group list-group-flush"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li><liclass="list-group-item">A fourth item</li><liclass="list-group-item">And a fifth one</li></ul>Горизонтальный
Добавьте .list-group-horizontal, чтобы изменить расположение элементов группы списков с вертикального на горизонтальное для всех точек останова. Или же выберите адаптивный вариант .list-group-horizontal-{sm|md|lg|xl}, чтобы сделать группу списков горизонтальной, начиная с 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
<ulclass="list-group list-group-horizontal"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><ulclass="list-group list-group-horizontal-sm"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><ulclass="list-group list-group-horizontal-md"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><ulclass="list-group list-group-horizontal-lg"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul><ulclass="list-group list-group-horizontal-xl"><liclass="list-group-item">An item</li><liclass="list-group-item">A second item</li><liclass="list-group-item">A third item</li></ul>Контекстуальные классы
Используйте их для стилизации элементов списка и придания им оттенков смысла с помощью цвета и фона.
- A simple default list group item
- primary элемент группы простого списка
- secondary элемент группы простого списка
- success элемент группы простого списка
- danger элемент группы простого списка
- warning элемент группы простого списка
- info элемент группы простого списка
- light элемент группы простого списка
- dark элемент группы простого списка
<ulclass="list-group"><liclass="list-group-item">A simple default list group item</li><liclass="list-group-item list-group-item-primary">primary элемент группы простого списка</li><liclass="list-group-item list-group-item-secondary">secondary элемент группы простого списка</li><liclass="list-group-item list-group-item-success">success элемент группы простого списка</li><liclass="list-group-item list-group-item-danger">danger элемент группы простого списка</li><liclass="list-group-item list-group-item-warning">warning элемент группы простого списка</li><liclass="list-group-item list-group-item-info">info элемент группы простого списка</li><liclass="list-group-item list-group-item-light">light элемент группы простого списка</li><liclass="list-group-item list-group-item-dark">dark элемент группы простого списка</li></ul>Контекстуальные классы также работают с классом .list-group-item-action. Отметим наличие дополнения стилей «ховера» (наведения), которых нет в предыдущем примере. Активное состояние .active также поддерживается, применяйте его для индикации активного выбора в элементе контекстуальной группы списка.
<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action">A simple default list group item</a><ahref="#"class="list-group-item list-group-item-action list-group-item-primary">primary элемент группы простого списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-secondary">secondary элемент группы простого списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-success">success элемент группы простого списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-danger">danger элемент группы простого списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-warning">warning элемент группы простого списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-info">info элемент группы простого списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-light">light элемент группы простого списка</a><ahref="#"class="list-group-item list-group-item-action list-group-item-dark">dark элемент группы простого списка</a></div>Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Со значками
Добавляйте значки в любой элемент группы списков для показа счетчиков, активности и т.п. с помощью утилит.
- A list item 14
- A second list item 2
- A third list item 1
<ulclass="list-group"><liclass="list-group-item d-flex justify-content-between align-items-center"> A list item <spanclass="badge badge-primary badge-pill">14</span></li><liclass="list-group-item d-flex justify-content-between align-items-center"> A second list item <spanclass="badge badge-primary badge-pill">2</span></li><liclass="list-group-item d-flex justify-content-between align-items-center"> A third list item <spanclass="badge badge-primary badge-pill">1</span></li></ul>Пользовательское содержимое
Добавляйте практически любой код HTML с помощью утилит флексбокса, даже для групп списков со ссылками, как в примере ниже.
Заголовок элемента группы списка
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.<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action active"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">Заголовок элемента группы списка</h5><small>3 дня назад</small></div><pclass="mb-1">Some placeholder content in a paragraph.</p><small>And some small print.</small></a><ahref="#"class="list-group-item list-group-item-action"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">Заголовок элемента группы списка</h5><smallclass="text-muted">3 дня назад</small></div><pclass="mb-1">Some placeholder content in a paragraph.</p><smallclass="text-muted">And some muted small print.</small></a><ahref="#"class="list-group-item list-group-item-action"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">Заголовок элемента группы списка</h5><smallclass="text-muted">3 дня назад</small></div><pclass="mb-1">Some placeholder content in a paragraph.</p><smallclass="text-muted">And some muted small print.</small></a></div>Поведение JavaScript
Используйте плагин вкладок JavaScript – индивидуальный или через bootstrap.js - для расширения группы списков и создания панелей содержимого с возможностью навигации через TAB.
<divclass="row"><divclass="col-4"><divclass="list-group"id="list-tab"role="tablist"><aclass="list-group-item list-group-item-action active"id="list-home-list"data-toggle="list"href="#list-home"role="tab"aria-controls="home">Главная</a><aclass="list-group-item list-group-item-action"id="list-profile-list"data-toggle="list"href="#list-profile"role="tab"aria-controls="profile">Профиль</a><aclass="list-group-item list-group-item-action"id="list-messages-list"data-toggle="list"href="#list-messages"role="tab"aria-controls="messages">Сообщения</a><aclass="list-group-item list-group-item-action"id="list-settings-list"data-toggle="list"href="#list-settings"role="tab"aria-controls="settings">Настройки</a></div></div><divclass="col-8"><divclass="tab-content"id="nav-tabContent"><divclass="tab-pane fade show active"id="list-home"role="tabpanel"aria-labelledby="list-home-list">...</div><divclass="tab-pane fade"id="list-profile"role="tabpanel"aria-labelledby="list-profile-list">...</div><divclass="tab-pane fade"id="list-messages"role="tabpanel"aria-labelledby="list-messages-list">...</div><divclass="tab-pane fade"id="list-settings"role="tabpanel"aria-labelledby="list-settings-list">...</div></div></div></div>Используя атрибуты
Вы можете активировать навигацию в группе списка без JavaScript, а просто добавив data-toggle="list" в элемент. Используйте эти атрибуты в .list-group-item.
<divrole="tabpanel"><!-- Группа списка --><divclass="list-group"id="myList"role="tablist"><aclass="list-group-item list-group-item-action active"data-toggle="list"href="#home"role="tab">Главная</a><aclass="list-group-item list-group-item-action"data-toggle="list"href="#profile"role="tab">Профиль</a><aclass="list-group-item list-group-item-action"data-toggle="list"href="#messages"role="tab">Сообщения</a><aclass="list-group-item list-group-item-action"data-toggle="list"href="#settings"role="tab">Настройки</a></div><!-- Панели вкладок --><divclass="tab-content"><divclass="tab-pane active"id="home"role="tabpanel">...</div><divclass="tab-pane"id="profile"role="tabpanel">...</div><divclass="tab-pane"id="messages"role="tabpanel">...</div><divclass="tab-pane"id="settings"role="tabpanel">...</div></div></div>Через JavaScript
Задействуйте навигацию через TAB через JavaScript (каждый элемент списка надо активировать отдельно):
$('#myList a').on('click',function(event){event.preventDefault()$(this).tab('show')})Вы можете активировать отдельный элемент списка несколькими способами:
$('#myList a[href="#profile"]').tab('show')// Выбрать вкладку по названию
$('#myList a:first-child').tab('show')// Выбрать первую вкладку
$('#myList a:last-child').tab('show')// Выбрать последнюю вкладку
$('#myList a:nth-child(3)').tab('show')// Выбрать третью вкладку
Эффект угасания
Чтобы заставить панель вкладок постепенно появиться, добавьте класс .fade в каждый элемент класса .tab-pane. На первой панели вкладки также должно быть выставлено значение .show, чтобы сделать начальное содержимое видимым.
<divclass="tab-content"><divclass="tab-pane fade show active"id="home"role="tabpanel">...</div><divclass="tab-pane fade"id="profile"role="tabpanel">...</div><divclass="tab-pane fade"id="messages"role="tabpanel">...</div><divclass="tab-pane fade"id="settings"role="tabpanel">...</div></div>Методы
$().tab
Активирует элемент списка и контейнер содержимого. Вкладка должна иметь или data-target, или href «нацеленный» на «узел контейнера» в DOM.
<divclass="list-group"id="myList"role="tablist"><aclass="list-group-item list-group-item-action active"data-toggle="list"href="#home"role="tab">Home</a><aclass="list-group-item list-group-item-action"data-toggle="list"href="#profile"role="tab">Profile</a><aclass="list-group-item list-group-item-action"data-toggle="list"href="#messages"role="tab">Messages</a><aclass="list-group-item list-group-item-action"data-toggle="list"href="#settings"role="tab">Settings</a></div><divclass="tab-content"><divclass="tab-pane active"id="home"role="tabpanel">...</div><divclass="tab-pane"id="profile"role="tabpanel">...</div><divclass="tab-pane"id="messages"role="tabpanel">...</div><divclass="tab-pane"id="settings"role="tabpanel">...</div></div><script>$(function(){$('#myList a:last-child').tab('show')})</script>.tab(‘show’)
Выбирает данный элемент списка и показывает связанные с ним панели. Любой другой элемент списка, который был ранее выбран, становится «невыбранным», а связанные с ним панели – скрытыми. Возвращается к функции-вызову до того, как показалась панель вкладки (например, до события shown.bs.tab).
$('#someListItem').tab('show')События
При показе новой вкладки события запускаются в таком порядке:
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 для «нацеливания» соответственно на предыдущую активную и новую активную вкладки. |
$('a[data-toggle="list"]').on('shown.bs.tab',function(event){event.target// недавно активированная вкладка
event.relatedTarget// предыдущая активная вкладка
})