Тизме тобу

Тизме топтору бир катар мазмунду көрсөтүү үчүн ийкемдүү жана күчтүү компонент болуп саналат. Өзгөртүү жана алардын ичиндеги бардык мазмунду колдоо үчүн кеңейтүү.

Негизги мисал

Эң негизги тизме тобу - тизме элементтери жана тийиштүү класстары бар иретсиз тизме. Аны кийинки варианттар менен же керек болсо өз 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>

Активдүү заттар

Учурдагы активдүү тандоону көрсөтүү үчүн aга .activeкошуңуз ..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 колдонуңуз . Интерактивдүү эмес элементтерден турган тизме топтору (мисалы, s же s) чыкылдатууну же таптап алууну камсыз кылбасын камсыз кылуу үчүн бул псевдокласстарды бөлөбүз..list-group-item-action<li><div>

Бул жерде стандарттык класстарды колдонбоңуз.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>

s менен класстын ордуна атрибутун <button>колдоно аласыз . Тилекке каршы, s disabled атрибутун колдобойт.disabled.disabled<a>

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

Flush

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

Маалымат атрибуттарын колдонуу

data-toggle="list"Сиз жөн гана белгилөө же элемент боюнча эч кандай JavaScript жазбастан тизме тобунун навигациясын иштете аласыз . Бул маалымат атрибуттарын боюнча колдонуңуз .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>

Методдор

$().tab

Тизме элементинин элементин жана мазмун контейнерин иштетет. Өтмөктө 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окуялар өчүрүлбөйт.

Окуя түрү	Description
show.bs.tab	Бул окуя өтмөк көрсөтүүсүндө, бирок жаңы өтмөк көрсөтүлө электе башталат. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн `event.target`жана колдонуңуз .`event.relatedTarget`
show.bs.tab	Бул окуя өтмөк көрсөтүлгөндөн кийин өтмөк көрсөтүүсүндө күйөт. Тиешелүүлүгүнө жараша активдүү өтмөктү жана мурунку активдүү өтмөктү (эгер бар болсо) максаттуу үчүн `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
})