Группа списков

Группы списков - это гибкий и мощный компонент для отображения контента. Измените и расширьте их так, чтобы поддерживать практически любой контент внутри.

Базовые примеры

Самая простая группа списков – это неупорядоченный список из элементов нужных классов. Создавайте на этой основе свою разметку и свой 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
<ul class="list-group">
  <li class="list-group-item disabled">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>

Используйте <a> или <button> для создания элементов группы списка с возможностью возложить на них некое действие – с наличием «ховера» (наведения), неактивных и активных состояний – добавляя в них .list-group-item-action. Мы разделяем эти псевдоклассы для уверенности в том, что группы списков, созданные из не-интерактивных элементов (как <li> или <div>), не будут позволять поддержку касания или клика.

Удостоверьтесь, что не используете стандартные классы .btn в описанном выше случае.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros 
<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>

Контекстуальные классы

Используйте их для стилизации элементов списка и придания им оттенков смысла с помощью цвета и фона.

  • 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 также поддерживается, применяйте его для индикации активного выбора в элементе контекстуальной группы списка.

Dapibus ac facilisis in Элемент основной группы списков Дополнительный элемент группы списков Элемент группы списка успешных действий Элемент группы списка опасности Элемент группы списка предупреждений Элемент группы списка информации Элемент группы с легким списком Элемент группы темных списков 
<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 ago

Donec 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 ago

Donec 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 ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
    <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">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>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
    <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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

Поведение JavaScript

Используйте плагин вкладок JavaScript – индивидуальный или через bootstrap.js - для расширения группы списков и создания панелей содержимого с возможностью навигации через TAB.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="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>
  <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-toggle="list" в элемент. Используйте эти атрибуты в .list-group-item.

<!-- List group -->
<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>

Через 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').tab('show') // Select first tab
$('#myList a:last').tab('show') // Select last tab
$('#myList li:eq(2) a').tab('show') // Select third tab (0-indexed)

Эффект угасания

Чтобы заставить панель вкладок постепенно появиться, добавьте класс .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>

Методы

$().tab

Активирует элемент списка и контейнер содержимого. Вкладка должна иметь или data-target, или href «нацеленный» на «узел контейнера» в DOM.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab(‘show’)

Выбирает данный элемент списка и показывает связанные с ним панели. Любой другой элемент списка, который был ранее выбран, становится «невыбранным», а связанные с ним панели – скрытыми. Возвращается к функции-вызову до того, как показалась панель вкладки (например, до события shown.bs.tab).

$('#someListItem').tab('show')

События

При показе новой вкладки события запускаются в таком порядке:

  1. hide.bs.tab (на текущей активной вкладке)
  2. show.bs.tab (на вкладке, которая вот-вот покажется)
  3. hidden.bs.tab (на предыдущей активной вкладке, такое же, как для события hide.bs.tab)
  4. 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 tab
  e.relatedTarget // previous active tab
})