Посмотреть на GitHub Оригинал

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

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

Простой пример

Самая основная группа списков - это неупорядоченный список с элементами списка и соответствующими классами. Развивайте его, используя следующие параметры или собственный 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> чтобы создать действенные элементы группы списка с наведением, отключенным и активным состояниями, добавьте .list-group-item-action. Мы разделяем эти псевдоклассы, чтобы группы списков, состоящие из неинтерактивных элементов (таких как <li> или <div>) не обеспечивали доступность щелчка или касания.

Обязательно не используйте здесь стандартные классы .btn.

The current link item A second link item A third link item A fourth link item A disabled link item

<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">A disabled link item</a>
</div>

С помощью <button> Вы также можете использовать атрибут disabled вместо класса .disabled. К сожалению, <a> не поддерживают атрибут disabled.

<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}, чтобы сделать группу списков горизонтальной, начиная с 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

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

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

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

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">primary элемент группы простого списка</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">secondary элемент группы простого списка</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">success элемент группы простого списка</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">danger элемент группы простого списка</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">warning элемент группы простого списка</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">info элемент группы простого списка</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">light элемент группы простого списка</a>
  <a href="#" 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

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-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">
    <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>

Поведение JavaScript

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

Главная Профиль Сообщения Настройки

Some placeholder content in a paragraph relating to "Home". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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">Главная</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">Профиль</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">Сообщения</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">Настройки</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.

<div role="tabpanel">
  <!-- Группа списка -->
  <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">Главная</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Профиль</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Сообщения</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Настройки</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>
</div>

Через JavaScript

Включить элемент списка с вкладками через 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, чтобы исходное содержимое было видимым.

<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">Главная</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Профиль</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Сообщения</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Настройки</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')

События

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

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 // предыдущая активная вкладка
})