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" aria-disabled="true">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" tabindex="-1" aria-disabled="true">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>

Хоризонтална

Добавете .list-group-horizontal, за да промените оформлението на елементите на групата от списък от вертикално на хоризонтално във всички точки на прекъсване. Като алтернатива изберете адаптивен вариант, .list-group-horizontal-{sm|md|lg|xl}за да направите хоризонтална група списък, започваща от тази точка на прекъсване min-width. Понастоящем хоризонталните списъчни групи не могат да се комбинират с променливи списъчни групи.

Професионален съвет: Искате ли групови елементи от списък с еднаква ширина, когато са хоризонтални? Добавете .flex-fillкъм всеки елемент от списъка.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <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>
</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">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държавата; приложете го, за да посочите активна селекция върху елемент от контекстуална група от списък.

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">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класа.

Със значки

Добавете значки към всеки елемент от група от списък, за да покажете броя на непрочетените, активност и други с помощта на някои помощни програми .

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

Персонализирано съдържание

Добавете почти всеки HTML вътре, дори за групи от свързани списъци като тази по-долу, с помощта на помощните програми flexbox .

Заглавие на елемент от групата в списъка
преди 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 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">
    <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">
    <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>

Методи

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

събития

При показване на нов раздел събитията се задействат в следния ред:

  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, за да насочите съответно активния раздел и предишния активен раздел (ако е наличен).
скрий.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
})