Жагсаалтын бүлэг

Жагсаалтын бүлгүүд нь цуврал контентыг харуулах уян хатан, хүчирхэг бүрэлдэхүүн хэсэг юм. Дотор нь бараг бүх контентыг дэмжихийн тулд тэдгээрийг өөрчилж, өргөжүүлээрэй.

Үндсэн жишээ

Жагсаалтын хамгийн энгийн бүлэг нь жагсаалтын зүйлүүд болон зохих ангиуд бүхий эрэмблэгдээгүй жагсаалт юм. Дараах сонголтуудыг ашиглан эсвэл шаардлагатай бол өөрийн 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 эсвэл s-г нэмж, хулганаа аваачих, идэвхгүй, идэвхтэй төлөвтэй, үйлдэл хийх боломжтой жагсаалтын бүлгийн зүйлсийг үүсгэхийн<button> тулд ашиглана уу . Интерактив бус элементүүдээс ( 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>

<button>s-ийн тусламжтайгаар та ангийн 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>

Угаах

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

Арга зүй

$().tab

Жагсаалтын элемент болон агуулгын савыг идэвхжүүлдэг. Цонх нь DOM доторх чингэлэг зангилаа руу чиглэсэн data-targetэсвэл a байх ёстой .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	Энэ үйл явдал tab шоу дээр гарч ирдэг боловч шинэ таб харагдахаас өмнө. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
харуулсан.bs.tab	Энэ үйл явдал нь табыг харуулсны дараа 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
})