Списъчна група
Списъчните групи са гъвкав и мощен компонент за показване на поредица от съдържание. Променете ги и ги разширете, за да поддържат почти всяко съдържание в тях.
Основен пример
Най-основната списъчна група е неподреден списък с елементи от списък и правилните класове. Надграждайте го с опциите, които следват, или със собствен 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>
Персонализирано съдържание
Добавете почти всеки HTML вътре, дори за групи от свързани списъци като тази по-долу, с помощта на помощните програми flexbox .
Заглавие на елемент от групата в списъка
преди 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
файл – за да разширите нашата група от списъци, за да създадете табулиращи панели с локално съдържание.
<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>
Методи
$().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">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 , за да насочите съответно активния раздел и предишния активен раздел (ако е наличен). |
скрий.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
})