Source

Список групи

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

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

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Вестибулум і ерос
<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>

Активні елементи

Додайте .activeдо a, .list-group-itemщоб вказати поточний активний вибір.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Вестибулум і ерос
<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до a .list-group-item, щоб він виглядав вимкненим. Зауважте, що деякі елементи з .disabledтакож вимагатимуть спеціального JavaScript, щоб повністю вимкнути їхні події клацання (наприклад, посилання).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Вестибулум і ерос
<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>s або <button>s, щоб створити дієві елементи групи списку зі станами наведення, вимкнення та активного, додавши .list-group-item-action. Ми відокремлюємо ці псевдокласи, щоб гарантувати, що групи списків, які складаються з неінтерактивних елементів (наприклад <li>, s або <div>s), не надають можливості клацання або торкання.

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

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Вестибулум і ерос 
<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>s ви також можете використовувати disabledатрибут замість .disabledкласу. На жаль, <a>s не підтримує атрибут disabled.

<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
  • Вестибулум і ерос
<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">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a dark list group item</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">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
Передача значення допоміжним технологіям

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

Зі значками

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

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1 
<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>

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

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

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

Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

Donec id elit non mi porta.
Заголовок елемента групи списку
3 дні тому

Donec id elit non mi porta gravida at eget metus. Меценат sed diam eget risus varius blandit.

Donec id elit non mi porta.
Заголовок елемента групи списку
3 дні тому

Donec id elit non mi porta gravida at eget metus. Меценат 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файл — щоб розширити нашу групу списків для створення панелей із вкладками локального вмісту.

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

Увімкнути елемент списку з вкладками за допомогою 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-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')

Події

Під час показу нової вкладки події запускаються в такому порядку:

  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для націлювання на активну вкладку та попередню активну вкладку (якщо доступна) відповідно.
показано.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 (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})