Группа списков
Группы списков - это гибкий и мощный компонент для отображения контента. Измените и расширьте их так, чтобы поддерживать практически любой контент внутри.
Базовые примеры
Самая простая группа списков – это неупорядоченный список из элементов нужных классов. Создавайте на этой основе свою разметку и свой CSS, если нужно.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="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
<ul class="list-group">
<li class="list-group-item active">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="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
Ссылки и кнопки
Используйте <a>
или <button>
для создания элементов группы списка с возможностью возложить на них некое действие – с наличием «ховера» (наведения), неактивных и активных состояний – добавляя в них .list-group-item-action
. Мы разделяем эти псевдоклассы для уверенности в том, что группы списков, созданные из не-интерактивных элементов (как <li>
или <div>
), не будут позволять поддержку касания или клика.
Удостоверьтесь, что не используете стандартные классы .btn
в описанном выше случае.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">
Cras justo odio
</a>
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
</div>
В <button>
вы можете также использовать атрибут disabled
вместо класса .disabled
. К сожалению, <a>
не поддерживают отключенный атрибут.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active">
Cras justo odio
</button>
<button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
<button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
<button type="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
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="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
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
Контекстуальные классы
Используйте их для стилизации элементов списка и придания им оттенков смысла с помощью цвета и фона.
- Dapibus ac facilisis in
- Элемент основной группы списков
- Дополнительный элемент группы списков
- Элемент группы списка успешных действий
- Элемент группы списка опасности
- Элемент группы списка предупреждений
- Элемент группы списка информации
- Элемент группы с легким списком
- Элемент группы темных списков
<ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-primary">Элемент основной группы списков</li>
<li class="list-group-item list-group-item-secondary">Дополнительный элемент группы списков</li>
<li class="list-group-item list-group-item-success">Элемент группы списка успешных действий</li>
<li class="list-group-item list-group-item-danger">Элемент группы списка опасности</li>
<li class="list-group-item list-group-item-warning">Элемент группы списка предупреждений</li>
<li class="list-group-item list-group-item-info">Элемент группы списка информации</li>
<li class="list-group-item list-group-item-light">Элемент группы с легким списком</li>
<li class="list-group-item list-group-item-dark">Элемент группы темных списков</li>
</ul>
Контекстуальные классы также работают с классом .list-group-item-action
. Отметим наличие дополнения стилей «ховера» (наведения), которых нет в предыдущем примере. Активное состояние .active
также поддерживается, применяйте его для индикации активного выбора в элементе контекстуальной группы списка.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</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-secondary">Дополнительный элемент группы списков</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Элемент группы списка успешных действий</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-warning">Элемент группы списка предупреждений</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Элемент группы списка информации</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">Элемент группы с легким списком</a>
<a href="#" 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
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Cras justo odio
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dapibus ac facilisis in
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Morbi leo risus
<span class="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.Поведение JavaScript
Используйте плагин вкладок JavaScript – индивидуальный или через bootstrap.js
- для расширения группы списков и создания панелей содержимого с возможностью навигации через TAB.
Используя атрибуты
Вы можете активировать навигацию в группе списка без JavaScript, а просто добавив data-toggle="list"
в элемент. Используйте эти атрибуты в .list-group-item
.
Через JavaScript
Задействуйте навигацию через TAB через JavaScript (каждый элемент списка надо активировать отдельно):
Вы можете активировать отдельный элемент списка несколькими способами:
Эффект угасания
Чтобы заставить панель вкладок постепенно появиться, добавьте класс .fade
в каждый элемент класса .tab-pane
. На первой панели вкладки также должно быть выставлено значение .show
, чтобы сделать начальное содержимое видимым.
Методы
$().tab
Активирует элемент списка и контейнер содержимого. Вкладка должна иметь или data-target
, или href
«нацеленный» на «узел контейнера» в DOM.
.tab(‘show’)
Выбирает данный элемент списка и показывает связанные с ним панели. Любой другой элемент списка, который был ранее выбран, становится «невыбранным», а связанные с ним панели – скрытыми. Возвращается к функции-вызову до того, как показалась панель вкладки (например, до события shown.bs.tab
).
События
При показе новой вкладки события запускаются в таком порядке:
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 для «нацеливания» соответственно на предыдущую активную и новую активную вкладки. |