in English

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

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

Энэ хуудсан дээр

Үндсэн жишээ

Жагсаалтын хамгийн энгийн бүлэг нь жагсаалтын зүйлүүд болон зохих ангиуд бүхий эрэмблэгдээгүй жагсаалт юм. Дараах сонголтуудыг ашиглан эсвэл шаардлагатай бол өөрийн CSS ашиглан үүн дээр тулгуурлана уу.

Зүйл
Хоёрдахь зүйл
Гурав дахь зүйл
Дөрөв дэх зүйл
Мөн тав дахь нь

html

<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

Идэвхтэй зүйл
Хоёрдахь зүйл
Гурав дахь зүйл
Дөрөв дэх зүйл
Мөн тав дахь нь

html

<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

Тахир дутуу болсон зүйл
Хоёрдахь зүйл
Гурав дахь зүйл
Дөрөв дэх зүйл
Мөн тав дахь нь

html

<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 байхыг анхаарна уу .

Одоогийн холбоосын зүйл Хоёр дахь холбоосын зүйл Гурав дахь холбоосын зүйл Дөрөв дэх холбоосын зүйл Идэвхгүй холбоосын зүйл

html

<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>нь хөгжлийн бэрхшээлтэй шинж чанарыг дэмждэггүй.

html

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

Зүйл
Хоёрдахь зүйл
Гурав дахь зүйл
Дөрөв дэх зүйл
Мөн тав дахь нь

html

<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-numbered(мөн нэмэлт элемент ашиглана уу). Жагсаалтын бүлгийн зүйлүүдийг илүү сайн байршуулж, илүү сайн тохируулахын <ol>тулд тоонуудыг CSS-ээр (хөтчийн өгөгдмөл загвараас ялгаатай) үүсгэдэг .<ol>

counter-resetТоонууд нь дээр үүсгэгдэж <ol>, дараа нь загварчилж, with болон дээр псевдо ::beforeэлементээр байрлуулна .<li>counter-incrementcontent

Жагсаалтын зүйл
Жагсаалтын зүйл
Жагсаалтын зүйл

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

Эдгээр нь захиалгат контенттой маш сайн ажилладаг.

Дэд гарчиг
Жагсаалтын зүйлд зориулсан контент
14
Дэд гарчиг
Жагсаалтын зүйлд зориулсан контент
14
Дэд гарчиг
Жагсаалтын зүйлд зориулсан контент
14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

Хэвтээ

.list-group-horizontalЖагсаалтын бүлгийн зүйлсийн байршлыг бүх таслах цэгийн дагуу босоо байдлаас хэвтээ болгон өөрчлөхийн тулд нэмэх . .list-group-horizontal-{sm|md|lg|xl|xxl}Эсвэл тухайн таслах цэгээс эхлэн жагсаалтын бүлгийг хэвтээ болгохын тулд хариу үйлдэл үзүүлэх хувилбарыг сонго min-width. Одоогоор хэвтээ жагсаалтын бүлгүүдийг угаах жагсаалтын бүлгүүдтэй нэгтгэх боломжгүй.

Зөвлөмж: Хэвтээ байрлалтай байх үед ижил өргөнтэй жагсаалтын бүлгийн зүйлсийг хүсч байна уу? .flex-fillЖагсаалтын бүлгийн зүйл бүрт нэмнэ үү .

Зүйл
Хоёрдахь зүйл
Гурав дахь зүйл

Зүйл
Хоёрдахь зүйл
Гурав дахь зүйл

Зүйл
Хоёрдахь зүйл
Гурав дахь зүйл

Зүйл
Хоёрдахь зүйл
Гурав дахь зүйл

Зүйл
Хоёрдахь зүйл
Гурав дахь зүйл

Зүйл
Хоёрдахь зүйл
Гурав дахь зүйл

html

<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 list-group-horizontal-xxl">
  <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>

Контекст ангиуд

Жагсаалтын зүйлсийн арын дэвсгэр болон өнгөөр загварчлахын тулд контекст ангиудыг ашиглана уу.

Энгийн өгөгдмөл жагсаалтын бүлгийн зүйл
Энгийн үндсэн жагсаалтын бүлгийн зүйл
Энгийн хоёрдогч жагсаалтын бүлгийн зүйл
Амжилтын жагсаалтын энгийн бүлгийн зүйл
Аюулын жагсаалтын энгийн бүлэг зүйл
Энгийн анхааруулах жагсаалтын бүлгийн зүйл
Энгийн мэдээллийн жагсаалтын бүлгийн зүйл
Энгийн хөнгөн жагсаалтын бүлгийн зүйл
Харанхуй жагсаалтын энгийн бүлгийн зүйл

html

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

html

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

Туслах технологид утгыг дамжуулах

Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .visually-hiddenангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

Тэмдгүүдтэй

Зарим хэрэгслийн тусламжтайгаар уншаагүй тоо, үйл ажиллагаа болон бусад зүйлийг харуулахын тулд жагсаалтын дурын бүлгийн зүйлд тэмдэг нэмнэ үү .

Жагсаалтын зүйл14
Жагсаалтын хоёр дахь зүйл2
Жагсаалтын гурав дахь зүйл1

html

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge bg-primary rounded-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge bg-primary rounded-pill">1</span>
  </li>
</ul>

Захиалгат контент

Доорх шиг холбогдсон жагсаалтын бүлгүүдэд ч гэсэн flexbox хэрэгслүүдийн тусламжтайгаар бараг бүх HTML-г нэмж оруулаарай .

Жагсаалтын бүлгийн зүйлийн гарчиг

3 хоногийн өмнө

Догол мөр дэх зарим орлуулагчийн агуулга.

Мөн зарим жижиг хэвлэмэл.

Жагсаалтын бүлгийн зүйлийн гарчиг

3 хоногийн өмнө

Догол мөр дэх зарим орлуулагчийн агуулга.

Мөн зарим чимээгүй жижиг хэвлэмэл.

Жагсаалтын бүлгийн зүйлийн гарчиг

3 хоногийн өмнө

Догол мөр дэх зарим орлуулагчийн агуулга.

Мөн зарим чимээгүй жижиг хэвлэмэл.

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <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>

Шалгах хайрцаг ба радио

Жагсаалтын бүлгийн зүйл дотор Bootstrap-ийн шалгах хайрцаг болон радиог байрлуулж, шаардлагатай бол тохируулна уу. Та тэдгээрийг <label>s үсэггүйгээр ашиглаж болно, гэхдээ хүртээмжтэй байхын тулд aria-labelатрибут болон утгыг оруулахаа мартуузай.

Эхний шалгах хайрцаг
Хоёр дахь шалгах хайрцаг
Гурав дахь шалгах хайрцаг

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

Анхны радио
Хоёр дахь радио
Гурав дахь радио

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

Жагсаалтын бүлгийн бүх зүйлийг товших боломжтой болгохын тулд та .stretched-linkon s-г ашиглаж болно .<label>

Эхний шалгах хайрцаг
Хоёр дахь шалгах хайрцаг
Гурав дахь шалгах хайрцаг

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

Хувьсагч

5.2.0 хувилбар дээр нэмсэн

Bootstrap-ийн хөгжиж буй CSS хувьсагчийн аргын нэг хэсэг болгон жагсаалтын бүлгүүд .list-groupбодит цагийн сайжруулсан тохиргоонд зориулж орон нутгийн CSS хувьсагчдыг асаалттай ашиглаж байна. CSS хувьсагчийн утгыг Sass-ээр тохируулдаг тул Sass-н тохиргоог дэмжсэн хэвээр байна.

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

Sass хувьсагч

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

Холимог

s-ийн контекст хувилбарын ангиудыг$theme-colors үүсгэхийн тулд хослуулан ашигладаг ..list-group-item

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

Гогцоо

Холигчоор өөрчилсөн ангиудыг үүсгэдэг давталт list-group-item-variant().

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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-ээр идэвхжүүлэх (жагсаалтын зүйл бүрийг тус тусад нь идэвхжүүлэх шаардлагатай):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Та жагсаалтын бие даасан зүйлийг хэд хэдэн аргаар идэвхжүүлж болно:

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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>

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү .

Таны контентыг tab элемент болгон идэвхжүүлнэ.

Та бүтээгчтэй табын жишээ үүсгэж болно, жишээлбэл:

const bsTab = new bootstrap.Tab('#myTab')

Арга	Тодорхойлолт
`dispose`	Элементийн табыг устгана.
`getInstance`	DOM элементтэй холбоотой табын жишээг авах боломжийг олгодог статик арга, та үүнийг дараах байдлаар ашиглаж болно: `bootstrap.Tab.getInstance(element)`.
`getOrCreateInstance`	DOM элементтэй холбоотой табын жишээг буцаадаг статик арга эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх. Та үүнийг дараах байдлаар ашиглаж болно: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	Өгөгдсөн табыг сонгоод холбогдох самбарыг харуулна. Өмнө нь сонгосон бусад таб сонгогдоогүй бөгөөд холбогдох самбар нуугдана. Цонхны самбар харагдахаас өмнө (өөрөөр хэлбэл `shown.bs.tab`үйл явдал болохоос өмнө) дуудагч руу буцна.

Үйл явдал

Шинэ табыг харуулах үед үйл явдлууд дараах дарааллаар асна:

hide.bs.tab(одоогийн идэвхтэй таб дээр)
show.bs.tab(харуулах таб дээр)
hidden.bs.tab(өмнөх идэвхтэй таб дээрх үйл явдлынхтай ижил hide.bs.tab)
shown.bs.tab(шинээр идэвхжсэн, show.bs.tabүйл явдалтай ижилхэн харагдах таб дээр)

Хэрэв ямар ч таб аль хэдийн идэвхтэй байгаагүй бол hide.bs.tabболон hidden.bs.tabүйл явдлууд идэвхгүй болно.

Үйл явдлын төрөл	Тодорхойлолт
`hide.bs.tab`	Энэ үйл явдал шинэ цонхыг харуулах үед идэвхждэг (ингэснээр өмнөх идэвхтэй табыг нуух шаардлагатай). Одоогийн идэвхтэй таб болон удахгүй идэвхтэй болох шинэ табыг тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
`hidden.bs.tab`	Энэ үйл явдал шинэ табыг харуулсны дараа идэвхждэг (ингэснээр өмнөх идэвхтэй таб нуугдсан). Өмнөх идэвхтэй таб болон шинэ идэвхтэй табыг тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
`show.bs.tab`	Энэ үйл явдал нь шинэ таб харагдахаас өмнө tab шоу дээр гарч ирдэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
`shown.bs.tab`	Энэ үйл явдал нь табыг харуулсны дараа tab шоунд идэвхждэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})