Source

Тізім тобы

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

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

Ең негізгі тізім тобы тізім элементтері мен тиісті сыныптары бар ретсіз тізім болып табылады. Оны келесі опциялармен немесе қажет болған жағдайда жеке CSS көмегімен жасаңыз.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Морби Лео Рисус
  • Порта 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
  • Морби Лео Рисус
  • Порта 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 -ға қосыңыз . Кейбір элементтерді басу оқиғаларын (мысалы, сілтемелер) толығымен өшіру үшін теңшелетін JavaScript қажет болатынын ескеріңіз ..list-group-item.disabled

  • Cras justo odio
  • Dapibus ac facilisis in
  • Морби Лео Рисус
  • Порта 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 немесе s пайдаланыңыз . Интерактивті емес элементтерден (мысалы, s немесе s) жасалған тізім топтары басу немесе түрту мүмкіндігін қамтамасыз етпеуі үшін біз бұл жалған сыныптарды бөлеміз .<button>.list-group-item-action<li><div>

Мұнда стандартты сыныптарды пайдаланбағаныңызға.btn сенімді болыңыз .

Cras justo odio Dapibus ac facilisis in Морби Лео Рисус Порта 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
  • Морби Лео Рисус
  • Порта 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
  • Морби Лео Рисус
<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
  • Морби Лео Рисус
<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
  • Морби Лео Рисус
<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
  • Морби Лео Рисус
<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
  • Морби Лео Рисус
<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
  • Морби Лео Рисус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>

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

flexbox утилиталарының көмегімен, тіпті төмендегі сияқты байланыстырылған тізім топтары үшін кез келген дерлік HTML қосыңыз .

Тізім тобының элементінің тақырыбы
3 күн бұрын

Doec id elit non mi porta gravida және eget metus. Maecenas sed diam eget risus varius blandit.

Doec id elit non mi porta.
Тізім тобының элементінің тақырыбы
3 күн бұрын

Doec id elit non mi porta gravida және eget metus. Maecenas sed diam eget risus varius blandit.

Doec id elit non mi porta.
Тізім тобының элементінің тақырыбы
3 күн бұрын

Doec id elit non mi porta gravida және eget metus. Maecenas sed diam eget risus varius blandit.

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

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

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 идентификаторы нөлге дейін ең аз емес уақытты қажет ететін жаттығуларды қайталауға болады. Ea and fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minimum.

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>

Әдістері

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

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

Оқиғалар

Жаңа қойындыны көрсеткенде оқиғалар келесі ретпен іске қосылады:

  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
көрсетілген.б.қойындысы Бұл оқиға қойынды көрсетілгеннен кейін қойындылар көрсетілімінде іске қосылады. Белсенді қойындыны және алдыңғы белсенді қойындыны (бар болса) тиісінше бағыттау үшін 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
})