Тізім тобы

Тізім топтары мазмұн сериясын көрсетуге арналған икемді және қуатты құрамдас болып табылады. Кез келген мазмұнды қолдау үшін оларды өзгертіңіз және кеңейтіңіз.

Негізгі мысал

Ең негізгі тізім тобы тізім элементтері мен тиісті сыныптары бар ретсіз тізім болып табылады. Оны келесі опциялармен немесе қажет болған жағдайда жеке 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 -ға қосыңыз . Кейбір элементтерді басу оқиғаларын (мысалы, сілтемелер) толығымен өшіру үшін теңшелетін JavaScript қажет болатынын ескеріңіз ..list-group-item.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>

Сілтемелер мен түймелер

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

Арнаулы мазмұн

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 әрекеті

bootstrap.jsЖергілікті мазмұнның қойынды тақталарын жасау үшін тізім тобымызды кеңейту үшін қойынды JavaScript плагинін пайдаланыңыз (оны жеке немесе құрастырылған файл арқылы қосыңыз).

Үй Профиль Хабарламалар Параметрлер

"Үйге" қатысты абзацтағы кейбір толтырғыш мазмұны. Және осы қойындылар тақтасын толтыру және толтыру үшін ғана қолданылған тағы біраз мазмұн. Өндірісте сіз мұнда нақты мазмұнға ие болар едіңіз. Тек мәтін емес. Бұл кез келген нәрсе болуы мүмкін, шынымен. Мәтін, суреттер, пішіндер.

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>

Әдістері

$().қойындысы

Тізім элементінің элементін және мазмұн контейнерін белсендіреді. Қойындыда DOM ішіндегі контейнер түйініне бағытталған не а 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>

.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`
жасыру.б.қойындысы	Бұл оқиға жаңа қойынды көрсетілетін кезде іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Сәйкесінше ағымдағы белсенді қойындыны және жақында белсенді болатын жаңа қойындыны мақсатты ету үшін `event.target`және пайдаланыңыз .`event.relatedTarget`
жасырын.б.қойындысы	Бұл оқиға жаңа қойынды көрсетілгеннен кейін іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Алдыңғы белсенді қойындыға және жаңа белсенді қойындыға тиісінше мақсат қою үшін `event.target`және түймелерін пайдаланыңыз .`event.relatedTarget`

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})