Групи списків — це гнучкий і потужний компонент для відображення серії вмісту. Змінюйте та розширюйте їх, щоб підтримувати практично будь-який вміст.
Базовий приклад
Основна група списків — це невпорядкований список із елементами списку та відповідними класами. Створіть його за допомогою наведених нижче параметрів або за потреби за допомогою власного CSS.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестибулум і ерос
Активні елементи
Додайте .activeдо a, .list-group-itemщоб вказати поточний активний вибір.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестибулум і ерос
Вимкнені предмети
Додайте .disabledдо a .list-group-item, щоб він виглядав вимкненим. Зауважте, що деякі елементи з .disabledтакож вимагатимуть спеціального JavaScript, щоб повністю вимкнути їхні події клацання (наприклад, посилання).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестибулум і ерос
Посилання та кнопки
Використовуйте <a>s або <button>s, щоб створити дієві елементи групи списку зі станами наведення, вимкнення та активного, додавши .list-group-item-action. Ми відокремлюємо ці псевдокласи, щоб гарантувати, що групи списків, які складаються з неінтерактивних елементів (наприклад <li>, s або <div>s), не надають можливості клацання або торкання.
Обов'язково не використовуйте тут стандартні .btnкласи .
За допомогою <button>s ви також можете використовувати disabledатрибут замість .disabledкласу. На жаль, <a>s не підтримує атрибут disabled.
Промити
Додайте .list-group-flush, щоб видалити деякі рамки та закруглені кути, щоб відтворити елементи групи списку від краю до краю в батьківському контейнері (наприклад, картки).
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Вестибулум і ерос
Горизонтальний
Додайте .list-group-horizontal, щоб змінити розташування елементів групи списку з вертикального на горизонтальне в усіх точках розриву. Крім того, виберіть адаптивний варіант .list-group-horizontal-{sm|md|lg|xl}, щоб зробити групу списку горизонтальною, починаючи з цієї точки зупину min-width. Наразі групи горизонтальних списків не можна поєднувати з групами списків на злив.
Підказка: бажаєте групувати елементи списку однакової ширини в горизонтальному положенні? Додайте .flex-fillдо кожного елемента групи списку.
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Контекстні заняття
Використовуйте контекстні класи, щоб стилізувати елементи списку з фоном і кольором із збереженням стану.
Dapibus ac facilisis in
Простий основний елемент групи списку
Простий вторинний елемент групи списку
Простий елемент групи успішного списку
Простий елемент групи небезпек
Простий елемент групи попереджень
Простий елемент групового списку інформації
Простий легкий елемент групи списку
Простий темний елемент групи списку
Контекстні класи також працюють з .list-group-item-action. Зверніть увагу на додавання стилів наведення, яких немає в попередньому прикладі. Також підтримується .activeдержава; застосувати його для позначення активного вибору в елементі групи контекстного списку.
Використання кольору для додання значення забезпечує лише візуальну індикацію, яка не буде передана користувачам допоміжних технологій, таких як програми зчитування з екрана. Переконайтеся, що інформація, позначена кольором, або очевидна з самого вмісту (наприклад, видимого тексту), або включена за допомогою альтернативних засобів, таких як додатковий текст, прихований разом із .sr-onlyкласом.
Зі значками
Додайте значки до будь-якого елемента групи списку, щоб відображати кількість непрочитаних, активність тощо за допомогою деяких утиліт .
Cras justo odio14
Dapibus ac facilisis in2
Morbi leo risus1
Спеціальний контент
За допомогою утиліт flexbox додайте майже будь-який HTML-код, навіть для пов’язаних груп списків, як наведений нижче .
Використовуйте плагін 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.
Використання атрибутів даних
Ви можете активувати групову навігацію списком без написання JavaScript, просто вказавши data-toggle="list"або на елементі. Використовуйте ці атрибути даних на .list-group-item.
Через JavaScript
Увімкнути елемент списку з вкладками за допомогою JavaScript (кожен елемент списку потрібно активувати окремо):
Ви можете активувати окремий елемент списку кількома способами:
Ефект вицвітання
Щоб панель вкладок зникала, додайте .fadeдо кожної .tab-pane. Перша панель вкладок також має .showзробити початковий вміст видимим.
методи
$().таб
Активує елемент списку та контейнер вмісту. Вкладка повинна мати або data-targetабо hrefорієнтований на вузол контейнера в DOM.
.tab('показати')
Вибирає вказаний елемент списку та показує пов’язану з ним панель. Будь-який інший елемент списку, який було вибрано раніше, стає невибраним, а відповідна панель прихована. Повертається до абонента, перш ніж панель вкладок буде фактично показана (наприклад, до shown.bs.tabподії).
Події
Під час показу нової вкладки події запускаються в такому порядку:
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для націлювання на попередню активну вкладку та нову активну вкладку відповідно.