Source

Група листа

Групе листа су флексибилна и моћна компонента за приказивање низа садржаја. Измените их и проширите да подрже скоро сваки садржај унутар.

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

Најосновнија група листа је неуређена листа са ставкама листе и одговарајућим класама. Надоградите га са опцијама које следе или са сопственим ЦСС-ом по потреби.

  • Црас јусто одио
  • Дапибус ац фацилисис ин
  • Морби лео рисус
  • Порта ац цонсецтетур ац
  • Вестибулум у еросу
<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у а .list-group-itemда бисте означили тренутни активни избор.

  • Црас јусто одио
  • Дапибус ац фацилисис ин
  • Морби лео рисус
  • Порта ац цонсецтетур ац
  • Вестибулум у еросу
<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у а .list-group-itemда би изгледало онемогућено. Имајте на уму да ће неки елементи са .disabledтакође захтевати прилагођени ЈаваСцрипт да би у потпуности онемогућили кликове (нпр. везе).

  • Црас јусто одио
  • Дапибус ац фацилисис ин
  • Морби лео рисус
  • Порта ац цонсецтетур ац
  • Вестибулум у еросу
<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>с или <button>с да бисте креирали ставке групе листе које се могу извршити са стањем лебдења, онемогућеним и активним додавањем .list-group-item-action. Раздвајамо ове псеудо-класе како бисмо осигурали да групе листа направљене од неинтерактивних елемената (као што су <li>с или <div>с) не пружају могућност клика или додира.

Уверите се да овде не користите стандардне .btnкласе .

Црас јусто одио Дапибус ац фацилисис ин Морби лео рисус Порта ац цонсецтетур ац Вестибулум у еросу 
<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>с, такође можете користити disabledатрибут уместо .disabledкласе. Нажалост, <a>с не подржавају атрибут дисаблед.

<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да бисте уклонили неке ивице и заобљене углове да бисте приказали ставке групе листе од ивице до ивице у родитељском контејнеру (нпр. картице).

  • Црас јусто одио
  • Дапибус ац фацилисис ин
  • Морби лео рисус
  • Порта ац цонсецтетур ац
  • Вестибулум у еросу
<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у сваку ставку групе листе.

  • Црас јусто одио
  • Дапибус ац фацилисис ин
  • Морби лео рисус
<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>
  • Црас јусто одио
  • Дапибус ац фацилисис ин
  • Морби лео рисус
<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>
  • Црас јусто одио
  • Дапибус ац фацилисис ин
  • Морби лео рисус
<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>
  • Црас јусто одио
  • Дапибус ац фацилисис ин
  • Морби лео рисус
<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>
  • Црас јусто одио
  • Дапибус ац фацилисис ин
  • Морби лео рисус
<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>

Контекстуалне класе

Користите контекстуалне класе за стилизовање ставки листе са позадином и бојом која садржи стање.

  • Дапибус ац фацилисис ин
  • Једноставна примарна групна ставка
  • Једноставна секундарна групна ставка
  • Једноставна групна ставка листе успеха
  • Једноставна ставка листе опасности
  • Једноставна групна ставка листе упозорења
  • Једноставна групна ставка са листе информација
  • Једноставна група светлеће листе
  • Једноставна групна ставка тамне листе
<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држава; примените га да бисте означили активну селекцију на ставки групе контекстуалне листе.

Дапибус ац фацилисис ин Једноставна примарна групна ставка Једноставна секундарна групна ставка Једноставна групна ставка листе успеха Једноставна ставка листе опасности Једноставна групна ставка листе упозорења Једноставна групна ставка са листе информација Једноставна група светлеће листе Једноставна групна ставка тамне листе 
<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класом.

Са значкама

Додајте значке било којој групи листе да бисте приказали непрочитане бројеве, активност и још много тога уз помоћ неких услужних програма .

  • Црас јусто одио14
  • Дапибус ац фацилисис ин2
  • Морби лео рисус1 
<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>

Прилагођени садржај

Додајте скоро било који ХТМЛ унутар, чак и за групе повезаних листа попут оне испод, уз помоћ флекбок услужних програма .

Наслов ставке групе
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">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>

ЈаваСцрипт понашање

Користите ЈаваСцрипт додатак картице – укључите га појединачно или кроз компајлирану bootstrap.jsдатотеку – да проширите нашу групу листе да бисте креирали окна са локалним садржајем са табовима.

Велит ауте моллит ипсум ад долор цонсецтетур нулла оффициа цулпа адиписицинг екерцитатион фугиат темпор. Волуптате десерунт сит сунт ниси аликуа фугиат проидент еа ут. Моллит волуптате репрехендерит оццаецат ниси ад нон миним темпор сунт волуптате цонсецтетур екерцитатион ид у нулла. Еа ет фугиат аликуип ноструд сунт инцидидунт цонсецтетур цулпа аликуип еиусмод долор. Аним ад Лорем аликуа ин цупидатат ниси еним еу ноструд до аликуип вениам миним.

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>

Коришћење атрибута података

Можете активирати навигацију по групи листе без писања било каквог ЈаваСцрипта једноставним навођењем 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>

Преко ЈаваСцрипт-а

Омогућите ставку листе са табулаторима путем ЈаваСцрипт-а (свака ставка листе треба да се активира појединачно):

$('#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циљни чвор контејнера у ДОМ-у.

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

.таб('прикажи')

Бира дату ставку листе и приказује њено повезано окно. Било која друга ставка листе која је претходно изабрана постаје поништена, а њено повезано окно је скривено. Враћа се позиваоцу пре него што је окно са картицама заиста приказано (на пример, пре него што се 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неће се покренути.

Тип догађаја Опис
схов.бс.таб Овај догађај се покреће у емисији картице, али пре него што је нова картица приказана. Користите event.targetи event.relatedTargetда бисте циљали активну картицу и претходну активну картицу (ако је доступна).
приказано.бс.таб Овај догађај се покреће у емисији картице након што се картица прикаже. Користите event.targetи event.relatedTargetда бисте циљали активну картицу и претходну активну картицу (ако је доступна).
хиде.бс.таб Овај догађај се покреће када треба да се прикаже нова картица (а самим тим и претходна активна картица треба да буде скривена). Користите event.targetи event.relatedTargetда бисте циљали тренутну активну картицу и нову картицу која ће ускоро бити активна.
хидден.бс.таб Овај догађај се покреће након што се прикаже нова картица (и стога је претходна активна картица скривена). Користите event.targetи event.relatedTargetда бисте циљали претходну активну картицу и нову активну картицу, респективно. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})