Рӯйхати гурӯҳ

Гурӯҳҳои рӯйхат як ҷузъи фасеҳ ва тавоно барои намоиши як қатор мундариҷа мебошанд. Онҳоро тағир диҳед ва васеъ кунед, то тақрибан ҳама мундариҷаро дастгирӣ кунанд.

Намунаи асосӣ

Рӯйхати асосӣтарин ин рӯйхати номатлуб бо ҷузъҳои рӯйхат ва синфҳои мувофиқ мебошад. Дар асоси он бо имконоти зерин ё бо 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>

Ададҳои ғайрифаъол

Ба .disableda илова кунед ,.list-group-item то он ғайрифаъол намуд. Дар хотир доред, ки баъзе унсурҳои дорои JavaScript-и фармоиширо низ талаб мекунанд, то рӯйдодҳои клики худро комилан ғайрифаъол кунанд (масалан, истинодҳо)..disabled

Як ашёи ғайрифаъол
Як ҷузъи дуюм
Моддаи сеюм
Моддаи чорум
Ва панҷум

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

Пайвандҳо ва тугмаҳо

s <a>ё <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 атрибути маъюбонро дастгирӣ намекунад.

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

Мундариҷаи фармоишӣ

Бо ёрии утилитаҳои flexbox тақрибан ҳама HTML-ро дар дохили он илова кунед, ҳатто барои гурӯҳҳои алоқаманди рӯйхати дар поён овардашуда .

Сарлавҳаи ҷузъҳои гурӯҳро номбар кунед

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>

Усулҳо

$().таб

Унсури рӯйхат ва контейнери мундариҷаро фаъол мекунад. Ҷадвал бояд 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`
нишон дода шудааст	Ин ҳодиса пас аз нишон додани ҷадвал дар намоиши ҷадвал оташ мегирад. Барои ҳадаф кардани ҷадвали фаъол ва ҷадвали фаъоли қаблӣ (агар мавҷуд бошад) мувофиқан `event.target`ва истифода баред .`event.relatedTarget`
hide.bs.tab	Ин ҳодиса ҳангоми намоиш додани ҷадвали нав оғоз меёбад (ва аз ин рӯ, ҷадвали фаъоли қаблӣ пинҳон карда мешавад). Барои мақсаднок кардани ҷадвали фаъоли ҷорӣ ва ҷадвали нави ба зудӣ фаъолшаванда мутаносибан ва истифода `event.target`баред .`event.relatedTarget`
hidden.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
})