Lumpat menyang isi utama Lumpat menyang pandhu arah docs
Check
in English

Dhaptar klompok

Grup dhaptar minangka komponen sing fleksibel lan kuat kanggo nampilake seri konten. Ngowahi lan ngluwihi kanggo ndhukung meh wae isi ing.

Tuladha dhasar

Klompok dhaptar sing paling dhasar yaiku dhaptar tanpa urutan karo item dhaptar lan kelas sing cocog. Mbangun ing karo opsi sing tindakake, utawa karo CSS dhewe yen perlu.

  • Item
  • Item kapindho
  • Item katelu
  • Item kaping papat
  • Lan sing kaping lima
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>

Item aktif

Tambah .activemenyang a .list-group-itemkanggo nuduhake pilihan aktif saiki.

  • Item sing aktif
  • Item kapindho
  • Item katelu
  • Item kaping papat
  • Lan sing kaping lima
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>

Item dipatèni

Tambah .disabledmenyang a .list-group-itemsupaya katon dipatèni. Elinga yen sawetara unsur .disableduga mbutuhake JavaScript khusus kanggo mateni kabeh acara klik (contone, pranala).

  • A item dipatèni
  • Item kapindho
  • Item katelu
  • Item kaping papat
  • Lan sing kaping lima
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>

Gunakake <a>s utawa <button>s kanggo nggawe item klompok dhaptar sing bisa ditindakake kanthi status hover, mateni, lan aktif kanthi nambahake .list-group-item-action. Kita misahake kelas pseudo iki kanggo mesthekake klompok dhaptar sing digawe saka unsur non-interaktif (kaya <li>s utawa <div>s) ora nyedhiyakake kemampuan klik utawa tunyuk.

Priksa manawa sampeyan ora nggunakake kelas standar ing .btnkene .

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>

Kanthi <button>s, sampeyan uga bisa nggunakake disabledatribut tinimbang .disabledkelas. Susah, <a>s ora ndhukung atribut dipatèni.

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>

Siram

Tambah .list-group-flushkanggo mbusak sawetara wates lan sudhut dibunderaké kanggo nerjemahake dhaftar item klompok pinggiran-kanggo-pinggiran ing wadhah induk (contone, kertu).

  • Item
  • Item kapindho
  • Item katelu
  • Item kaping papat
  • Lan sing kaping lima
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>

Dinomer

Tambah .list-group-numberedkelas modifier (lan opsional nggunakake <ol>unsur) kanggo milih menyang item klompok dhaptar nomer. Nomer kui liwat CSS (minangka gantos kanggo <ol>s standar browser noto) kanggo panggonan sing luwih apik nang item grup dhaftar lan ngidini kanggo pangaturan dhewe luwih.

Nomer kui dening counter-reseting <ol>, lan banjur gaya lan diselehake karo ::beforepseudo-unsur ing <li>karo counter-incrementlan content.

  1. A item dhaptar
  2. A item dhaptar
  3. A item dhaptar
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>

Iki uga apik karo konten khusus.

  1. Subheading
    Isi kanggo item dhaptar
    14
  2. Subheading
    Isi kanggo item dhaptar
    14
  3. Subheading
    Isi kanggo item dhaptar
    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>

Horisontal

Tambah .list-group-horizontalkanggo ngganti tata letak item klompok dhaptar saka vertikal menyang horisontal ing kabeh breakpoints. Utawa, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl|xxl}kanggo nggawe grup dhaptar horisontal diwiwiti saka breakpoint kasebut min-width. Saiki grup dhaptar horisontal ora bisa digabung karo grup dhaptar siram.

ProTip: Pengin item grup dhaptar sing padha lebar nalika horisontal? Tambah .flex-fillmenyang saben item klompok dhaptar.

  • Item
  • Item kapindho
  • Item katelu
  • Item
  • Item kapindho
  • Item katelu
  • Item
  • Item kapindho
  • Item katelu
  • Item
  • Item kapindho
  • Item katelu
  • Item
  • Item kapindho
  • Item katelu
  • Item
  • Item kapindho
  • Item katelu
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>

Kelas kontekstual

Gunakake kelas kontekstual kanggo gaya item dhaptar kanthi latar mburi stateful lan werna.

  • Item klompok dhaptar standar sing prasaja
  • Item klompok dhaptar utama sing prasaja
  • Item klompok dhaptar sekunder sing prasaja
  • Item klompok dhaptar sukses sing prasaja
  • Item klompok dhaptar bebaya sing prasaja
  • Item klompok dhaptar bebaya sing prasaja
  • A item klompok dhaptar info prasaja
  • Item klompok dhaptar cahya sing prasaja
  • A item klompok dhaftar peteng prasaja
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>

Kelas kontekstual uga bisa digunakake karo .list-group-item-action. Elinga tambahan gaya hover ing kene ora ana ing conto sadurunge. Uga didhukung yaiku .activenegara; aplikasi iku kanggo nunjukaké pilihan aktif ing item klompok dhaftar kontekstual.

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>
Nuduhake makna kanggo teknologi assistive

Nggunakake warna kanggo nambah makna mung menehi indikasi visual, sing ora bakal dikirim menyang pangguna teknologi bantu - kayata pembaca layar. Priksa manawa informasi sing dituduhake kanthi warna katon jelas saka isi kasebut (umpamane teks sing katon), utawa kalebu liwat cara alternatif, kayata teks tambahan sing didhelikake karo .visually-hiddenkelas.

Kanthi lencana

Tambah lencana menyang item klompok dhaptar kanggo nuduhake jumlah sing durung diwaca, kegiatan, lan liya-liyane kanthi bantuan sawetara utilitas .

  • A item dhaptar14
  • Item dhaptar kapindho2
  • Item dhaptar katelu1
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>

Konten khusus

Tambahake meh kabeh HTML ing, sanajan kanggo grup dhaptar sing disambung kaya ing ngisor iki, kanthi bantuan flexbox utilities .

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>

Kothak lan radio

Selehake kothak lan radio Bootstrap ing dhaptar item klompok lan atur yen perlu. Sampeyan bisa nggunakake tanpa <label>s, nanging elinga kalebu aria-labelatribut lan nilai kanggo aksesibilitas.

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>

Sampeyan bisa nggunakake .stretched-linking <label>s kanggo nggawe kabeh dhaptar item klompok bisa diklik.

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

Variabel

Ditambahake ing v5.2.0

Minangka bagéan saka pendekatan variabel CSS Bootstrap sing berkembang, klompok dhaptar saiki nggunakake variabel CSS lokal .list-groupkanggo kustomisasi wektu nyata sing ditingkatake. Nilai kanggo variabel CSS disetel liwat Sass, supaya kustomisasi Sass isih didhukung.

  --#{$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};
  

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

Campuran

Digunakake ing kombinasi karo $theme-colorskanggo generate kelas varian kontekstual kanggo .list-group-items.

@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;
      }
    }
  }
}

Loop

Loop sing ngasilake kelas modifier karo list-group-item-variant()mixin.

// 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);
}

Prilaku JavaScript

Gunakake plugin JavaScript tab-kalebu kanthi individu utawa liwat bootstrap.jsfile sing dikompilasi-kanggo nggedhekake grup dhaptar kita kanggo nggawe panel tabable isi lokal.

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

Nggunakake atribut data

Sampeyan bisa ngaktifake pandhu arah klompok dhaptar tanpa nulis JavaScript kanthi mung nemtokake data-bs-toggle="list"utawa ing unsur. Gunakake atribut data iki ing .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>

Liwat JavaScript

Aktifake item dhaptar tab liwat JavaScript (saben item dhaptar kudu diaktifake kanthi individu):

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

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

Sampeyan bisa ngaktifake item dhaptar individu kanthi sawetara cara:

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

Efek luntur

Kanggo nggawe panel tab luntur, tambahake .fadesaben .tab-pane. Panel tab pisanan uga kudu .shownggawe konten awal katon.

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

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kita kanggo informasi luwih lengkap .

Ngaktifake konten sampeyan minangka unsur tab.

Sampeyan bisa nggawe conto tab karo konstruktor, contone:

const bsTab = new bootstrap.Tab('#myTab')
Metode Katrangan
dispose Numpes tab unsur.
getInstance Cara statis sing ngidini sampeyan entuk conto tab sing digandhengake karo unsur DOM, sampeyan bisa nggunakake kaya iki: bootstrap.Tab.getInstance(element).
getOrCreateInstance Cara statis sing ngasilake conto tab sing digandhengake karo unsur DOM utawa nggawe sing anyar yen ora diwiwiti. Sampeyan bisa nggunakake kaya iki: bootstrap.Tab.getOrCreateInstance(element).
show Milih tab sing diwenehake lan nuduhake panel sing gegandhengan. Tab liyane sing sadurunge dipilih dadi ora dipilih lan panel sing gegandhengan didhelikake. Bali menyang panelpon sadurunge panel tab bener-bener ditampilake (yaiku sadurunge shown.bs.tabkedadeyan kasebut).

Acara

Nalika nuduhake tab anyar, acara kasebut murub kanthi urutan ing ngisor iki:

  1. hide.bs.tab(ing tab aktif saiki)
  2. show.bs.tab(ing tab sing bakal ditampilake)
  3. hidden.bs.tab(ing tab aktif sadurunge, padha karo hide.bs.tabacara kasebut)
  4. shown.bs.tab(ing tab sing mentas aktif ditampilake, padha karo show.bs.tabacara kasebut)

Yen ora ana tab sing wis aktif, banjur acara hide.bs.tablan hidden.bs.tabora bakal dipecat.

Jenis acara Katrangan
hide.bs.tab Acara iki murub nalika tab anyar bakal ditampilake (lan kanthi mangkono tab aktif sadurunge bakal didhelikake). Gunakake event.targetlan event.relatedTargetkanggo target tab aktif saiki lan tab anyar sing bakal aktif.
hidden.bs.tab Acara iki murub sawise tab anyar ditampilake (lan kanthi mangkono tab aktif sadurunge didhelikake). Gunakake event.targetlan event.relatedTargetkanggo target tab aktif sadurunge lan tab aktif anyar, mungguh.
show.bs.tab Acara iki murub ing tab show, nanging sadurunge tab anyar wis ditampilake. Gunakake event.targetlan event.relatedTargetkanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
shown.bs.tab Acara iki murub ing tab show sawise tab ditampilake. Gunakake event.targetlan event.relatedTargetkanggo target tab aktif lan tab aktif sadurunge (yen kasedhiya).
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
  })
})