Bootstrap 4 списки: Группа списков. Компоненты · Bootstrap. Версия v4.0.0

Группа списков. Компоненты · Bootstrap. Версия v4.0.0

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

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

Самая простая группа списков – это неупорядоченный список из элементов нужных классов. Создавайте на этой основе свою разметку и свой CSS, если нужно.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>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>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>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>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>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>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

В <button> вы можете также использовать атрибут disabled вместо класса

. disabled. К сожалению, <a> не поддерживают отключенный атрибут.

<div>
  <button type="button">
    Cras justo odio
  </button>
  <button type="button">Dapibus ac facilisis in</button>
  <button type="button">Morbi leo risus</button>
  <button type="button">Porta ac consectetur ac</button>
  <button type="button" 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>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

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

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

• Dapibus ac facilisis in
• Элемент основной группы списков
• Дополнительный элемент группы списков
• Элемент группы списка успешных действий
• Элемент группы списка опасности
• Элемент группы списка предупреждений
• Элемент группы списка информации
• Элемент группы с легким списком
• Элемент группы темных списков

 <ul>
  <li>Dapibus ac facilisis in</li>

  
  <li>Элемент основной группы списков</li>
  <li>Дополнительный элемент группы списков</li>
  <li>Элемент группы списка успешных действий</li>
  <li>Элемент группы списка опасности</li>
  <li>Элемент группы списка предупреждений</li>
  <li>Элемент группы списка информации</li>
  <li>Элемент группы с легким списком</li>
  <li>Элемент группы темных списков</li>
</ul>

Контекстуальные классы также работают с классом .

list-group-item-action. Отметим наличие дополнения стилей «ховера» (наведения), которых нет в предыдущем примере. Активное состояние .active также поддерживается, применяйте его для индикации активного выбора в элементе контекстуальной группы списка.

Dapibus ac facilisis in Элемент основной группы списков Дополнительный элемент группы списков Элемент группы списка успешных действий Элемент группы списка опасности Элемент группы списка предупреждений Элемент группы списка информации Элемент группы с легким списком Элемент группы темных списков

<div>
  <a href="#">Dapibus ac facilisis in</a>

  
  <a href="#">Элемент основной группы списков</a>
  <a href="#">Дополнительный элемент группы списков</a>
  <a href="#">Элемент группы списка успешных действий</a>
  <a href="#">Элемент группы списка опасности</a>
  <a href="#">Элемент группы списка предупреждений</a>
  <a href="#">Элемент группы списка информации</a>
  <a href="#">Элемент группы с легким списком</a>
  <a href="#">Элемент группы темных списков</a>
</div>

Использование вспомогательных технологий

Использование цвета как дополнительного инструмента информативности доступно только в визуальной сфере, что ограничивает пользователей вспомогательных технологий, например, программ для чтения текста с экрана. Удостоверьтесь, что информация, обозначенная цветом, также доступна из самого контента (т.е. в тексте) или содержится в альтернативных средствах – таких как дополнительный скрытый в классе .sr-only текст.

Со значками

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

• Cras justo odio 14
• Dapibus ac facilisis in 2
• Morbi leo risus 1

<ul>
  <li>
    Cras justo odio
    <span>14</span>
  </li>
  <li>
    Dapibus ac facilisis in
    <span>2</span>
  </li>
  <li>
    Morbi leo risus
    <span>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>
  <a href="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>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="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>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="#">
    <div>
      <h5>List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p>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>
</div>

Поведение JavaScript

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

Home Profile Messages Settings

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>
  <div>
    <div role="tablist">
      <a data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div>
    <div>
      <div role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

Используя атрибуты

Вы можете активировать навигацию в группе списка без JavaScript, а просто добавив data-toggle="list" в элемент. Используйте эти атрибуты в .list-group-item.

<!-- List group -->
<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div 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>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
</div>

Методы

$().

tab

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

<div role="tablist">
  <a data-toggle="list" href="#home" role="tab">Home</a>
  <a data-toggle="list" href="#profile" role="tab">Profile</a>
  <a data-toggle="list" href="#messages" role="tab">Messages</a>
  <a data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div role="tabpanel">...</div>
  <div 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
})

Группа списков · Bootstrap на русском

Более десятка повторно используемых компонентов построены так, чтобы обеспечить кнопки, выпадающие меню, группы ввода, навигации, оповещения, и многое другое.

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

Содержание

• Содержание
• Основной пример
• Теги
• Неактивные пункты
• Якоря и кнопки
• Контекстные классы
• Настраиваемое содержимое

Основной пример

Самым базовым является простой группа списков с ненумерованими пунктами, и собственными классами. Добавляйте к нему опции, как показано ниже, или при необходимости добавляйте собственные стили CSS.

• Cras justo odio
• Dapibus ac facilisis in
• Morbi leo risus
• Porta ac consectetur ac
• Vestibulum at eros

<ul>
  <li>Cras justo odio</li>
  <li>Dapibus ac facilisis in</li>
  <li>Morbi leo risus</li>
  <li>Porta ac consectetur ac</li>
  <li>Vestibulum at eros</li>
</ul>

Теги

Добавить Теги к любому элементу группы списков, чтобы показать непрочитанных сообщений, активности и т. д.

• 14 Cras justo odio
• 2 Dapibus ac facilisis in
• 1 Morbi leo risus

<ul>
  <li>
    <span>14</span>
    Cras justo odio
  </li>
  <li>
    <span>2</span>
    Dapibus ac facilisis in
  </li>
  <li>
    <span>1</span>
    Morbi leo risus
  </li>
</ul>

Неактивные пункты

Добавьте . disabled к .list-group-item для серого оттенка сделав неактивным.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

Якоря и кнопки

Используй якоря или кнопки для создания актуального списка элементов, группу наведение, неактивного и активного состояния путем добавления .list-group-item-action. Это отдельный класс содержит несколько переопределений для добавления совместимости для <a>S и <button>s, а также в наведение и фокусом состояния.

Будьте уверены, чтобы не использовать стандартный . btn классы здесь.

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

<div>
  <a href="#">
    Cras justo odio
  </a>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Morbi leo risus</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

<div>
  <button type="button">
    Cras justo odio
  </button>
  <button type="button">Dapibus ac facilisis in</button>
  <button type="button">Morbi leo risus</button>
  <button type="button">Porta ac consectetur ac</button>
  <button type="button">Vestibulum at eros</button>
</div>

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

Используйте контекстные классы для стилизации элементов списка, по умолчанию или связанно. Также включают в себя состояние . active.

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

<div>
  <a href="#">Dapibus ac facilisis in</a>
  <a href="#">Cras sit amet nibh libero</a>
  <a href="#">Porta ac consectetur ac</a>
  <a href="#">Vestibulum at eros</a>
</div>

Передать смысл для ассистивных технологий

Используя цвет, чтобы добавить смысл только обеспечивает визуальную индикацию, которая не будет доведена до пользователей ассистивных технологий, таких как экранные дикторы. Убедитесь, что информация обозначается цвет либо очевидно из самого содержимого (например, текст), или включен с помощью альтернативных средств, таких как дополнительный текст, скрытый с .sr-only класс.

Настраиваемое содержимое

Добавляйте практически любой HTML, даже для связанного групп списка, как показано ниже.

List group item heading

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

List group item heading

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

List group item heading

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

<div>
  <a href="#">
    <h5>List group item heading</h5>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#">
    <h5>List group item heading</h5>
    <p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
  </a>
  <a href="#">
    <h5>List group item heading</h5>
    <p>Donec id elit non mi porta gravida at eget metus.  Maecenas sed diam eget risus varius blandit.</p>
  </a>
</div>

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

В Bootstrap группы списков — это компонент, который стилизует неупорядоченные списки определённым образом. Это открывает путь для создания более сложных списков с пользовательским содержимым, не увязая в проблемах с презентацией.

Создание группы по умолчанию

Чтобы создать группу списка по умолчанию, примените класс .list-group к элементу <ul> и класс .list-group-item к каждому элементу <li>.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <ul> <li>These Boots Are Made For Walking</li> <li>Eleanor, Put Your Boots On</li> <li>Puss ‘n’ Boots</li> <li>Die With Your Boots On</li> <li>Fairies Wear Boots</li> </ul>

Значки

Вы можете добавить значки в группу списка и выровнять их с другим содержимым через классы вроде . justify-content-between (что переводится как justify-content: space-between).

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <ul> <li> These Boots Are Made For Walking <span>15</span> </li> <li> Eleanor, Put Your Boots On <span>38</span> </li> <li> Puss ‘n’ Boots <span>76</span> </li> <li> Die With Your Boots On <span>112</span> </li> <li> Fairies Wear Boots <span>181</span> </li> </ul>

Группа списка со ссылками

Вы можете использовать класс .list-group-item-action для ссылок внутри пунктов списка. При этом весь пункт становится кликабельным (а не только текстовая часть), также весь пункт списка меняет стиль при наведении указателя.

Чтобы создать группу списка со ссылками, поменяйте элемент <ul> на <div>, а элемент <li> на <a>. Вы также можете использовать класс .active, чтобы выделить текущий пункт списка.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <a href=»#»>These Boots Are Made For Walking</a> <a href=»#»>Eleanor, Put Your Boots On</a> <a href=»#»>Puss ‘n’ Boots</a> <a href=»#»>Die With Your Boots On</a> <a href=»#»>Fairies Wear Boots</a> </div>

Кнопки

Вы также можете поменять ссылки на кнопки — просто используйте элементы <button> для класса .list-group-item или .list-group-item-action.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <button type=»button»>These Boots Are Made For Walking</button> <button type=»button»>Eleanor, Put Your Boots On</button> <button type=»button»>Puss ‘n’ Boots</button> <button type=»button»>Die With Your Boots On</button> <button type=»button»>Fairies Wear Boots</button> </div>

Отключенные пункты

Вы также можете применить класс . disabled к элементу .list-group, чтобы он выглядел отключенным.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <a href=»#»>These Boots Are Made For Walking</a> <a href=»#»>Eleanor, Put Your Boots On</a> <a href=»#»>Puss ‘n’ Boots</a> <a href=»#»>Die With Your Boots On</a> <a href=»#»>Fairies Wear Boots</a> </div>

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

Кроме того вы можете применять контекстные классы Bootstrap для пунктов группы списка. Для этого добавьте один из классов .list-group-item-* к пункту группы списка.

Когда к пункту добавляется класс .active, контекстный класс отображается в затемнённой версии.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <a href=»#»>These Boots Are Made For Walking</a> <a href=»#»>Eleanor, Put Your Boots On</a> <a href=»#»>Puss ‘n’ Boots</a> <a href=»#»>Die With Your Boots On</a> <a href=»#»>Fairies Wear Boots</a> <a href=»#»>Head Over Boots</a> <a href=»#»>Boot Scootin’ Boogie</a> </div>

Пользовательское содержимое

Группы списков могут содержать и другие элементы HTML. И вы можете сделать это кликабельным, если вложить всё в элемент <a>.

У Bootstrap 4 есть класс .list-group-item-heading для заголовков и класс .list-group-item-text для текста.

<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css»> <div> <a href=»#»> <h5>These Boots Are Made For Walking</h5> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> </a> <a href=»#»> <h5>Puss ‘n’ Boots</h5> <p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> </a> <a href=»#»> <h5>Fairies Wear Boots</h5> <p>Omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p> </a> </div>

См.

также

• <ol>
• <ul>
• Маркированные списки
• Нумерация страниц
• Создание списков
• Списки
• Текст в HTML

Автор и редакторы

Автор: Йен Диксон

Последнее изменение: 12.03.2020

Редакторы: Влад Мержевич

Медиа-объекты
Ctrl+←

Карточки
Ctrl+→

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

· Bootstrap v4.6

Посмотреть на GitHub

Группы списков — это гибкий и мощный компонент для отображения серии контента. Модифицируйте и расширяйте их для поддержки практически любого содержимого внутри.

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

Самая простая группа списков — это неупорядоченный список с элементами списка и соответствующими классами. Разработайте его с помощью следующих опций или с помощью собственного CSS по мере необходимости.

• Товар
• Второй предмет
• Третий предмет
• Четвертый предмет
• И пятый

 <ул>
  
Элемент
  
Второй элемент
  
Третий элемент
  
Четвертый элемент
  
И пятый
 

Активные элементы

Добавьте .active к .list-group-item , чтобы указать текущий активный выбор.

• Активный элемент
• Второй предмет
• Третий предмет
• Четвертый предмет
• И пятый

 <ул>
  
Активный элемент
  
Второй элемент
  
Третий элемент
  
Четвертый элемент
  
И пятый
 

Отключенные элементы

Добавьте .disabled к .list-group-item , чтобы он отображался как отключен. Обратите внимание, что некоторые элементы с . disabled также потребуют пользовательского JavaScript, чтобы полностью отключить их события щелчка (например, ссылки).

• Отключенный элемент
• Второй предмет
• Третий предмет
• Четвертый предмет
• И пятый

 <ул>
  
Отключенный элемент
  
Второй элемент
  
Третий элемент
  
Четвертый элемент
  
И пятый
 

Используйте с или с, чтобы создать активных элемента группы списка с состояниями наведения, отключения и активности, добавив .list-group-item-action . Мы разделяем эти псевдоклассы, чтобы гарантировать, что группы списков, состоящие из неинтерактивных элементов (таких как

или

), не обеспечивают возможности щелчка или касания.

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

Текущий элемент ссылки Второй элемент ссылки Третий элемент ссылки Четвертый элемент ссылки Отключенный элемент ссылки

 

  
    Текущий элемент ссылки
  
  Второй элемент ссылки
  Третья ссылка
  Четвертый элемент ссылки
  Отключенный элемент ссылки
 

С

s вы также можете использовать отключил атрибут вместо класса .disabled . К сожалению, не поддерживают атрибут disabled.

 <дел>
  

Текущая кнопка Второй элемент Третья кнопка Четвертая кнопка Кнопка отключена

Заподлицо

Добавьте . list-group-flush , чтобы удалить некоторые границы и закругленные углы, чтобы отобразить элементы группы списка от края до края в родительском контейнере (например, карточки).

• Товар
• Второй предмет
• Третий предмет
• Четвертый предмет
• И пятый

 <ул>
  
Элемент
  
Второй элемент
  
Третий элемент
  
Четвертый элемент
  
И пятый
 

Горизонтальный

Добавьте .list-group-horizontal , чтобы изменить расположение элементов группы списка с вертикального на горизонтальное во всех точках останова. В качестве альтернативы выберите адаптивный вариант .list-group-horizontal-{sm|md|lg|xl} , чтобы сделать группу списка горизонтальной, начиная с min-width этой точки останова. В настоящее время групп горизонтального списка не могут быть объединены с группами скрытого списка.

ProTip: Хотите, чтобы элементы списка были одинаковой ширины в горизонтальном положении? Добавить . flex-fill для каждого элемента группы списка.

• Товар
• Второй предмет
• Третий предмет

• Товар
• Второй предмет
• Третий предмет

• Товар
• Второй предмет
• Третий предмет

• Товар
• Второй предмет
• Третий предмет

• Товар
• Второй предмет
• Третий предмет

 <ул>
  
Элемент
  
Второй элемент
  
Третий элемент

<ул>
  
Элемент
  
Второй элемент
  
Третий элемент

<ул>
  
Элемент
  
Второй элемент
  
Третий элемент

<ул>
  
Элемент
  
Второй элемент
  
Третий элемент

<ул>
  
Элемент
  
Второй элемент
  
Третий элемент
 

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

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

• Простой элемент группы по умолчанию
• Элемент группы простого первичного списка
• Элемент группы простого вторичного списка
• Элемент группы простого списка успехов
• Элемент группы простого списка опасностей
• Элемент группы простого списка предупреждений
• Элемент группы простого информационного списка
• Элемент группы простого списка источников света
• Простой групповой элемент темного списка

 <ул>
  
Простой элемент группы списка по умолчанию
  
Простой элемент группы основного списка
  
Простой элемент группы вторичного списка
  
Простой групповой элемент списка успеха.
  
Простой групповой элемент списка опасностей
  
Простой групповой элемент списка предупреждений
  
Простой групповой элемент информационного списка
  
Простой групповой элемент легкого списка
  
Простой групповой элемент темного списка. 
 

Контекстные классы также работают с .list-group-item-action . Обратите внимание на добавление здесь стилей наведения, отсутствующих в предыдущем примере. Также поддерживается состояние .active ; примените его, чтобы указать активный выбор в элементе группы контекстного списка.

Простой элемент группы списка по умолчанию Простой элемент группы основного списка Простой групповой элемент вторичного списка Простой групповой элемент списка успеха Простой групповой элемент списка опасностей Простой групповой элемент списка предупреждений Простой групповой элемент информационного списка Простой групповой элемент списка источников света Элемент группы простого темного списка

 <дел>
  Простой элемент группы списка по умолчанию
  Простой элемент группы основного списка
  Простой элемент группы вторичного списка
  Простой групповой элемент списка успеха
  Простой групповой элемент списка опасностей
  Простой элемент группы списка предупреждений
  Простой элемент группы информационного списка
  Простой групповой элемент светового списка
  Простой групповой элемент темного списка
 

Передача значения вспомогательным технологиям

Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .sr-only .

С значками

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

• Элемент списка 14
• Второй элемент списка 2
• Третий элемент списка 1

 <ул>
  

    Элемент списка
    14
  
  

    Второй элемент списка
    2
  
  

    Третий элемент списка
    1
  
 

Пользовательский контент

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

Заголовок элемента списка

3 дня назад

Некоторый заполнитель в абзаце.

И немного мелкого шрифта.

Заголовок элемента списка

3 дня назад

Некоторый заполнитель в абзаце.

И немного приглушенного мелкого шрифта.

Заголовок элемента списка

3 дня назад

Некоторый заполнитель в абзаце.

И немного приглушенного мелкого шрифта.

 <дел>
  <а href="#">
    <дел>
       
Заголовок элемента группы списка
 
      3 дня назад