Списъчна група

Списъчните групи са гъвкав и мощен компонент за показване на поредица от съдържание. Променете ги и ги разширете, за да поддържат почти всяко съдържание в тях.

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

Най-основната списъчна група е неподреден списък с елементи от списък и правилните класове. Надграждайте го с опциите, които следват, или със собствен 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файл – за да разширите нашата група от списъци, за да създадете табулиращи панели с локално съдържание.

У дома Профил Съобщения Настройки

Част от съдържанието на контейнера в параграф, свързан с „Начало“. И още малко съдържание, използвано тук само за подреждане и запълване на този панел с раздели. В производството очевидно ще имате повече истинско съдържание тук. И не само текст. Може да е всичко, наистина. Текст, изображения, форми.

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>

Методи

$().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
})