in English

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

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

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

Үндсэн жишээ

Жагсаалтын хамгийн энгийн бүлэг нь жагсаалтын зүйлүүд болон зохих ангиуд бүхий эрэмблэгдээгүй жагсаалт юм. Дараах сонголтуудыг ашиглан эсвэл шаардлагатай бол өөрийн 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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">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-numbered(мөн нэмэлт элемент ашиглана уу). Жагсаалтын бүлгийн зүйлүүдийг илүү сайн байршуулж, илүү сайн тохируулахын <ol>тулд тоонуудыг CSS-ээр (хөтчийн өгөгдмөл загвараас ялгаатай) үүсгэдэг .<ol>

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

Cras justo odio
Cras justo odio
Cras justo odio

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Cras justo odio</li>
</ol>

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

Дэд гарчиг
Cras justo odio
14
Дэд гарчиг
Cras justo odio
14
Дэд гарчиг
Cras justo odio
14

<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>
      Cras justo odio
    </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>
      Cras justo odio
    </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>
      Cras justo odio
    </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Жагсаалтын бүлгийн зүйл бүрт нэмнэ үү .

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

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

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

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

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

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

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

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

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

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

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

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

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

Тэмдгүүдтэй

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

Жагсаалтын зүйл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 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 хоногийн өмнө

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

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

<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хандалтын хувьд шинж чанар, утгыг оруулахаа мартуузай.

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

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    First checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Second checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Third checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fourth checkbox
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
    Fifth checkbox
  </li>
</ul>

Хэрэв та <label>s-ийг .list-group-itemтом цохилтод зориулсан газар гэж хүсч байвал үүнийг бас хийж болно.

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

<div class="list-group">
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    First checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Second checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Third checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fourth checkbox
  </label>
  <label class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="">
    Fifth checkbox
  </label>
</div>

Сасс

Хувьсагч

$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-ээр идэвхжүүлэх (жагсаалтын зүйл бүрийг тус тусад нь идэвхжүүлэх шаардлагатай):

var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
  var tabTrigger = new bootstrap.Tab(triggerEl)

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

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

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

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

Арга зүй

constructor

Жагсаалтын элемент болон агуулгын савыг идэвхжүүлдэг. Цонх нь DOM доторх чингэлэг зангилаа руу чиглэсэн data-bs-targetэсвэл a байх ёстой .href

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

<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>
  var firstTabEl = document.querySelector('#myTab a:last-child')
  var firstTab = new bootstrap.Tab(firstTabEl)

  firstTab.show()
</script>

шоу

Жагсаалтын өгөгдсөн зүйлийг сонгож, холбогдох хэсгийг харуулна. Өмнө нь сонгосон жагсаалтын бусад зүйл сонгогдоогүй болж, түүнтэй холбоотой самбар нуугдана. Цонхны самбар харагдахаас өмнө (жишээ нь shown.bs.tabүйл явдал болохоос өмнө) дуудагч руу буцдаг.

  var someListItemEl = document.querySelector('#someListItem')
  var tab = new bootstrap.Tab(someListItemEl)

  tab.show()

захиран зарцуулах

Элементийн табыг устгана.

getInstance

DOM элементтэй холбоотой табын жишээг авах боломжийг олгодог статик арга

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance

getOrCreateInstance

DOM элементтэй холбоотой табын жишээг авах, эсвэл үүнийг эхлүүлээгүй тохиолдолд шинээр үүсгэх боломжийг олгодог статик арга.

var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance

Үйл явдал

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

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`
`shown.bs.tab`	Энэ үйл явдал нь табыг харуулсны дараа tab шоунд идэвхждэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
`hide.bs.tab`	Энэ үйл явдал шинэ цонхыг харуулах үед идэвхждэг (ингэснээр өмнөх идэвхтэй табыг нуух шаардлагатай). Одоогийн идэвхтэй таб болон удахгүй идэвхтэй болох шинэ табыг тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`
`hidden.bs.tab`	Энэ үйл явдал шинэ табыг харуулсны дараа идэвхждэг (ингэснээр өмнөх идэвхтэй таб нуугдсан). Өмнөх идэвхтэй таб болон шинэ идэвхтэй табыг тус тус чиглүүлэхийн тулд `event.target`болон ашиглана уу.`event.relatedTarget`

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