Группа списков
Группы списков - это гибкий и мощный компонент для отображения контента. Измените и расширьте их так, чтобы поддерживать практически любой контент внутри.
Базовые примеры
Самая простая группа списков – это неупорядоченный список из элементов нужных классов. Создавайте на этой основе свою разметку и свой CSS, если нужно.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ulclass="list-group"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li><liclass="list-group-item">Porta ac consectetur ac</li><liclass="list-group-item">Vestibulum at eros</li></ul>Активные элементы
Добавьте в .list-group-item класс .active для обозначения текущего активного выбора.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ulclass="list-group"><liclass="list-group-item active">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li><liclass="list-group-item">Porta ac consectetur ac</li><liclass="list-group-item">Vestibulum at eros</li></ul>Неактивные элементы
Добавьте класс .disabled к элементу класса .list-group-item для придания последнему вида «неактивного». Заметьте, что некоторые элементы класса .disabled также потребуют JavaScript для полной деактивации их событий клика (например, ссылки).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ulclass="list-group"><liclass="list-group-item disabled">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li><liclass="list-group-item">Porta ac consectetur ac</li><liclass="list-group-item">Vestibulum at eros</li></ul>Ссылки и кнопки
Используйте <a> или <button> для создания элементов группы списка с возможностью возложить на них некое действие – с наличием «ховера» (наведения), неактивных и активных состояний – добавляя в них .list-group-item-action. Мы разделяем эти псевдоклассы для уверенности в том, что группы списков, созданные из не-интерактивных элементов (как <li> или <div>), не будут позволять поддержку касания или клика.
Удостоверьтесь, что не используете стандартные классы .btn в описанном выше случае.
<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action active"> Cras justo odio </a><ahref="#"class="list-group-item list-group-item-action">Dapibus ac facilisis in</a><ahref="#"class="list-group-item list-group-item-action">Morbi leo risus</a><ahref="#"class="list-group-item list-group-item-action">Porta ac consectetur ac</a><ahref="#"class="list-group-item list-group-item-action disabled">Vestibulum at eros</a></div>В <button> вы можете также использовать атрибут disabled вместо класса .disabled. К сожалению, <a> не поддерживают отключенный атрибут.
<divclass="list-group"><buttontype="button"class="list-group-item list-group-item-action active"> Cras justo odio </button><buttontype="button"class="list-group-item list-group-item-action">Dapibus ac facilisis in</button><buttontype="button"class="list-group-item list-group-item-action">Morbi leo risus</button><buttontype="button"class="list-group-item list-group-item-action">Porta ac consectetur ac</button><buttontype="button"class="list-group-item list-group-item-action"disabled>Vestibulum at eros</button></div>Смывание
Добавьте класс .list-group-flush чтобы удалить некоторые границы и закругленные углы, а также чтобы отображать элементы группы списка от края до края в родительском контейнере (например, в карточках).
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ulclass="list-group list-group-flush"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li><liclass="list-group-item">Porta ac consectetur ac</li><liclass="list-group-item">Vestibulum at eros</li></ul>Горизонтальный
Добавьте .list-group-horizontal, чтобы изменить расположение элементов группы списков с вертикального на горизонтальное для всех точек останова. Или же выберите адаптивный вариант .list-group-horizontal-{sm|md|lg|xl}, чтобы сделать группу списков горизонтальной, начиная с min-width точки останова. В настоящее время горизонтальные группы списков не могут быть объединены с группами списков смывания.
ProTip: Хотите, чтобы элементы списка равной ширины были горизонтальными? Добавьте .flex-fill к каждому элементу группы списков.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
<ulclass="list-group list-group-horizontal"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li></ul>- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
<ulclass="list-group list-group-horizontal-sm"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li></ul>- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
<ulclass="list-group list-group-horizontal-md"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li></ul>- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
<ulclass="list-group list-group-horizontal-lg"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li></ul>- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
<ulclass="list-group list-group-horizontal-xl"><liclass="list-group-item">Cras justo odio</li><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item">Morbi leo risus</li></ul>Контекстуальные классы
Используйте их для стилизации элементов списка и придания им оттенков смысла с помощью цвета и фона.
- Dapibus ac facilisis in
- Элемент основной группы списков
- Дополнительный элемент группы списков
- Элемент группы списка успешных действий
- Элемент группы списка опасности
- Элемент группы списка предупреждений
- Элемент группы списка информации
- Элемент группы с легким списком
- Элемент группы темных списков
<ulclass="list-group"><liclass="list-group-item">Dapibus ac facilisis in</li><liclass="list-group-item list-group-item-primary">Элемент основной группы списков</li><liclass="list-group-item list-group-item-secondary">Дополнительный элемент группы списков</li><liclass="list-group-item list-group-item-success">Элемент группы списка успешных действий</li><liclass="list-group-item list-group-item-danger">Элемент группы списка опасности</li><liclass="list-group-item list-group-item-warning">Элемент группы списка предупреждений</li><liclass="list-group-item list-group-item-info">Элемент группы списка информации</li><liclass="list-group-item list-group-item-light">Элемент группы с легким списком</li><liclass="list-group-item list-group-item-dark">Элемент группы темных списков</li></ul>Контекстуальные классы также работают с классом .list-group-item-action. Отметим наличие дополнения стилей «ховера» (наведения), которых нет в предыдущем примере. Активное состояние .active также поддерживается, применяйте его для индикации активного выбора в элементе контекстуальной группы списка.
<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action">Dapibus ac facilisis in</a><ahref="#"class="list-group-item list-group-item-action list-group-item-primary">Элемент основной группы списков</a><ahref="#"class="list-group-item list-group-item-action list-group-item-secondary">Дополнительный элемент группы списков</a><ahref="#"class="list-group-item list-group-item-action list-group-item-success">Элемент группы списка успешных действий</a><ahref="#"class="list-group-item list-group-item-action list-group-item-danger">Элемент группы списка опасности</a><ahref="#"class="list-group-item list-group-item-action list-group-item-warning">Элемент группы списка предупреждений</a><ahref="#"class="list-group-item list-group-item-action list-group-item-info">Элемент группы списка информации</a><ahref="#"class="list-group-item list-group-item-action list-group-item-light">Элемент группы с легким списком</a><ahref="#"class="list-group-item list-group-item-action list-group-item-dark">Элемент группы темных списков</a></div>Использование вспомогательных технологий
Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.
Со значками
Добавляйте значки в любой элемент группы списков для показа счетчиков, активности и т.п. с помощью утилит.
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
<ulclass="list-group"><liclass="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <spanclass="badge badge-primary badge-pill">14</span></li><liclass="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <spanclass="badge badge-primary badge-pill">2</span></li><liclass="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <spanclass="badge badge-primary badge-pill">1</span></li></ul>Стандартное содержимое
Добавьте почти любой код HTML с помощью утилит флексбокса, даже для групп списков со ссылками, как в примере ниже.
List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.List group item heading
3 days agoDonec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action active"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">List group item heading</h5><small>3 days ago</small></div><pclass="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><small>Donec id elit non mi porta.</small></a><ahref="#"class="list-group-item list-group-item-action"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">List group item heading</h5><smallclass="text-muted">3 days ago</small></div><pclass="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><smallclass="text-muted">Donec id elit non mi porta.</small></a><ahref="#"class="list-group-item list-group-item-action"><divclass="d-flex w-100 justify-content-between"><h5class="mb-1">List group item heading</h5><smallclass="text-muted">3 days ago</small></div><pclass="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p><smallclass="text-muted">Donec id elit non mi porta.</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">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">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">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">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.
<!-- List group --><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><!-- Tab panes --><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>Через JavaScript
Задействуйте навигацию через TAB через JavaScript (каждый элемент списка надо активировать отдельно):
$('#myList a').on('click',function(e){e.preventDefault()$(this).tab('show')})Вы можете активировать отдельный элемент списка несколькими способами:
$('#myList a[href="#profile"]').tab('show')// Select tab by name$('#myList a:first-child').tab('show')// Select first tab$('#myList a:last-child').tab('show')// Select last tab$('#myList a:nth-child(3)').tab('show')// Select third tabЭффект угасания
Чтобы заставить панель вкладок постепенно появиться, добавьте класс .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(e){e.target// newly activated tabe.relatedTarget// previous active tab})