Source

Листа група

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

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

Најосновната група списоци е неуредена листа со ставки од списокот и соодветни класи. Надоградете го со опциите што следат или со сопствен CSS по потреба.

  • Cras justo odio
  • Dapibus ac facilisis во
  • Морби Лео Ризус
  • 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 во
  • Морби Лео Ризус
  • 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 во
  • Морби Лео Ризус
  • 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 во Морби Лео Ризус 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>не го поддржуваат оневозможениот атрибут.

<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 во
  • Морби Лео Ризус
  • 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 во
  • Морби Лео Ризус
<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 во
  • Морби Лео Ризус
<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 во
  • Морби Лео Ризус
<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 во
  • Морби Лео Ризус
<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 во
  • Морби Лео Ризус
<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 во
  • Едноставна групна ставка од примарна листа
  • Едноставна секундарна групна ставка од списокот
  • Едноставна групна ставка од списокот за успех
  • Едноставна групна ставка од списокот за опасност
  • Едноставна групна ставка од списокот за предупредување
  • Едноставна групна ставка од списокот со информации
  • Едноставна групна ставка со светла листа
  • Едноставна групна ставка од темна листа
<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 во Едноставна групна ставка од примарна листа Едноставна секундарна групна ставка од списокот Едноставна групна ставка од списокот за успех Едноставна групна ставка од списокот за опасност Едноставна групна ставка од списокот за предупредување Едноставна групна ставка од списокот со информации Едноставна групна ставка со светла листа Едноставна групна ставка од темна листа 
<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 во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>

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

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

Наслов на група ставки на листа
пред 3 дена

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Донец ид елит нон ми порта.
Наслов на група ставки на листа
пред 3 дена

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Донец ид елит нон ми порта.
Наслов на група ставки на листа
пред 3 дена

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Донец ид елит нон ми порта. 
<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 adipisecing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Молит волуптате го признава occaecat ниси и не минимум темпорен не е волуптатен консектетур вежбање 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>

Методи

$().таб

Активира елемент од списокот и контејнер за содржина. Јазичето треба да има или 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

Тип на настан Опис
прикажи.бс.таб Овој настан се вклучува на прикажување на јазичиња, но пред да се прикаже новата картичка. Користете 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
})