Список групи

Групи списків — це гнучкий і потужний компонент для відображення серії вмісту. Змінюйте та розширюйте їх, щоб підтримувати практично будь-який вміст.

Базовий приклад

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

Предмет
Другий пункт
Третій пункт
Четвертий пункт
І п'ятий

<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до a, .list-group-itemщоб вказати поточний активний вибір.

Активний предмет
Другий пункт
Третій пункт
Четвертий пункт
І п'ятий

<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до a .list-group-item, щоб він виглядав вимкненим. Зауважте, що деякі елементи з .disabledтакож вимагатимуть спеціального JavaScript, щоб повністю вимкнути їхні події клацання (наприклад, посилання).

Відключений елемент
Другий пункт
Третій пункт
Четвертий пункт
І п'ятий

<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>s або <button>s, щоб створити дієві елементи групи списку зі станами наведення, вимкнення та активного, додавши .list-group-item-action. Ми відокремлюємо ці псевдокласи, щоб гарантувати, що групи списків, які складаються з неінтерактивних елементів (наприклад <li>, s або <div>s), не надають можливості клацання або торкання.

Обов'язково не використовуйте тут стандартні .btnкласи .

Поточний елемент посилання Другий пункт посилання Третій пункт посилання Четвертий елемент посилання Вимкнений елемент посилання

<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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

За допомогою <button>s ви також можете використовувати disabledатрибут замість .disabledкласу. На жаль, <a>s не підтримує атрибут 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, щоб видалити деякі рамки та закруглені кути, щоб відтворити елементи групи списку від краю до краю в батьківському контейнері (наприклад, картки).

Предмет
Другий пункт
Третій пункт
Четвертий пункт
І п'ятий

<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до кожного елемента групи списку.

Предмет
Другий пункт
Третій пункт

Предмет
Другий пункт
Третій пункт

Предмет
Другий пункт
Третій пункт

Предмет
Другий пункт
Третій пункт

Предмет
Другий пункт
Третій пункт

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

Контекстні заняття

Використовуйте контекстні класи, щоб стилізувати елементи списку з фоном і кольором із збереженням стану.

Простий стандартний елемент групи списку
Простий основний елемент групи списку
Простий вторинний елемент групи списку
Простий елемент групи успішного списку
Простий елемент групи небезпек
Простий елемент групи попереджень
Простий елемент групового списку інформації
Простий легкий елемент групи списку
Простий темний елемент групи списку

<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">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</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">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

Передача значення допоміжним технологіям

Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .sr-onlyкласом.

Зі значками

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

Елемент списку14
Другий пункт списку2
Третій пункт списку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>

Спеціальний контент

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

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

3 дні тому

Деякий вміст заповнювача в абзаці.

І трохи дрібного шрифту.

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

3 дні тому

Деякий вміст заповнювача в абзаці.

І трохи приглушеного дрібного шрифту.

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

3 дні тому

Деякий вміст заповнювача в абзаці.

І трохи приглушеного дрібного шрифту.

<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">List group item heading</h5>
      <small>3 days ago</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">List group item heading</h5>
      <small class="text-muted">3 days ago</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">List group item heading</h5>
      <small class="text-muted">3 days ago</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

Використовуйте плагін JavaScript для вкладок — додайте його окремо або через скомпільований bootstrap.jsфайл — щоб розширити нашу групу списків для створення панелей із вкладками локального вмісту.

додому Профіль Повідомлення Налаштування

Деякий вміст заповнювача в абзаці, що стосується «Домашньої». І ще трохи вмісту, який використовується тут лише для того, щоб заповнити цю панель вкладок. У виробництві ви, очевидно, матимете тут більше реального вмісту. І не тільки текст. Це може бути що завгодно, насправді. Текст, зображення, форми.

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

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

Через JavaScript

Увімкнути елемент списку з вкладками за допомогою JavaScript (кожен елемент списку потрібно активувати окремо):

$('#myList a').on('click', function (event) {
  event.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зробити початковий вміст видимим.

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

методи

$().таб

Активує елемент списку та контейнер вмісту. Вкладка повинна мати або 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('показати')

Вибирає вказаний елемент списку та показує пов’язану з ним панель. Будь-який інший елемент списку, який було вибрано раніше, стає невибраним, а відповідна панель прихована. Повертається до абонента, перш ніж панель вкладок буде фактично показана (наприклад, до 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`для націлювання на активну вкладку та попередню активну вкладку (якщо доступна) відповідно.
показано.bs.tab	Ця подія запускається під час показу вкладок після показу вкладки. Використовуйте `event.target`та `event.relatedTarget`для націлювання на активну вкладку та попередню активну вкладку (якщо доступна) відповідно.
hide.bs.tab	Ця подія запускається, коли потрібно показати нову вкладку (і, отже, попередню активну вкладку потрібно приховати). Використовуйте `event.target`та `event.relatedTarget`для націлювання на поточну активну вкладку та нову вкладку, яка незабаром стане активною відповідно.
прихований.bs.tab	Ця подія запускається після показу нової вкладки (тому попередня активна вкладка прихована). Використовуйте `event.target`та `event.relatedTarget`для націлювання на попередню активну вкладку та нову активну вкладку відповідно.

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})