Lewati ke konten utama Lewati ke navigasi dokumen
in English

Daftar grup

Grup daftar adalah komponen yang fleksibel dan kuat untuk menampilkan serangkaian konten. Ubah dan perluas untuk mendukung hampir semua konten di dalamnya.

Di halaman ini

Contoh dasar

Grup daftar paling dasar adalah daftar tidak berurutan dengan item daftar dan kelas yang tepat. Bangun di atasnya dengan opsi yang mengikuti, atau dengan CSS Anda sendiri sesuai kebutuhan.

  • Sebuah benda
  • Barang kedua
  • Item ketiga
  • Item keempat
  • Dan yang kelima
<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

Tambahkan .activeke a .list-group-itemuntuk menunjukkan pilihan aktif saat ini.

  • Barang aktif
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<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 yang dinonaktifkan

Tambahkan .disabledke a .list-group-itemuntuk membuatnya tampak dinonaktifkan. Perhatikan bahwa beberapa elemen dengan .disabledjuga akan memerlukan JavaScript khusus untuk sepenuhnya menonaktifkan peristiwa kliknya (mis., tautan).

  • Item yang dinonaktifkan
  • A second item
  • A third item
  • A fourth item
  • And a fifth one
<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>

Gunakan <a>s atau <button>s untuk membuat item grup daftar yang dapat ditindaklanjuti dengan status melayang, dinonaktifkan, dan aktif dengan menambahkan .list-group-item-action. Kami memisahkan kelas semu ini untuk memastikan grup daftar yang terbuat dari elemen non-interaktif (seperti <li>s atau <div>s) tidak memberikan keterjangkauan klik atau ketuk.

Pastikan untuk tidak menggunakan .btnkelas standar di sini .

Item tautan saat ini Item tautan kedua Item tautan ketiga Item tautan keempat Item tautan yang dinonaktifkan 
<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>

Dengan <button>s, Anda juga dapat menggunakan disabledatribut alih-alih .disabledkelas. Sayangnya, <a>s tidak mendukung atribut disabled.

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

Menyiram

Tambahkan .list-group-flushuntuk menghapus beberapa batas dan sudut membulat untuk merender item grup daftar ujung-ke-ujung dalam wadah induk (mis., kartu).

  • Sebuah benda
  • Barang kedua
  • Item ketiga
  • Item keempat
  • Dan yang kelima
<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>

Bernomor

Tambahkan .list-group-numberedkelas pengubah (dan secara opsional gunakan <ol>elemen) untuk memilih item grup daftar bernomor. Angka dihasilkan melalui CSS (sebagai lawan <ol>dari gaya browser default) untuk penempatan yang lebih baik di dalam item grup daftar dan untuk memungkinkan penyesuaian yang lebih baik.

Angka dihasilkan oleh counter-resetpada <ol>, kemudian ditata dan ditempatkan dengan ::beforeelemen semu pada <li>dengan counter-incrementdan content.

  1. Cras justo odio
  2. Cras justo odio
  3. 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>

Ini berfungsi dengan baik dengan konten khusus juga.

  1. Subjudul
    Cras justo odio
    14
  2. Subjudul
    Cras justo odio
    14
  3. Subjudul
    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>

Horisontal

Tambahkan .list-group-horizontaluntuk mengubah tata letak item grup daftar dari vertikal ke horizontal di semua titik henti sementara. Atau, pilih varian responsif .list-group-horizontal-{sm|md|lg|xl|xxl}untuk membuat grup daftar horizontal mulai dari breakpoint min-width. Saat ini grup daftar horizontal tidak dapat digabungkan dengan grup daftar flush.

ProTip: Ingin item grup daftar dengan lebar yang sama saat horizontal? Tambahkan .flex-fillke setiap item grup daftar.

  • Sebuah benda
  • Barang kedua
  • Item ketiga
  • Sebuah benda
  • Barang kedua
  • Item ketiga
  • Sebuah benda
  • Barang kedua
  • Item ketiga
  • Sebuah benda
  • Barang kedua
  • Item ketiga
  • Sebuah benda
  • Barang kedua
  • Item ketiga
  • Sebuah benda
  • Barang kedua
  • Item ketiga
<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

Gunakan kelas kontekstual untuk menata item daftar dengan latar belakang dan warna stateful.

  • Item grup daftar default sederhana
  • Item grup daftar utama sederhana
  • Item grup daftar sekunder sederhana
  • Item grup daftar sukses sederhana
  • Item grup daftar bahaya sederhana
  • Item grup daftar peringatan sederhana
  • Item grup daftar info sederhana
  • Item grup daftar ringan sederhana
  • Item grup daftar gelap sederhana
<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 juga berfungsi dengan .list-group-item-action. Perhatikan penambahan gaya hover di sini tidak ada pada contoh sebelumnya. Juga didukung adalah .activenegara; terapkan untuk menunjukkan pilihan aktif pada item grup daftar kontekstual.

Item grup daftar default sederhana Item grup daftar utama sederhana Item grup daftar sekunder sederhana Item grup daftar sukses sederhana Item grup daftar bahaya sederhana Item grup daftar peringatan sederhana Item grup daftar info sederhana Item grup daftar ringan sederhana Item grup daftar gelap sederhana 
<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>
Menyampaikan makna pada teknologi bantu

Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hiddenkelas.

Dengan lencana

Tambahkan lencana ke item grup daftar apa pun untuk menampilkan jumlah yang belum dibaca, aktivitas, dan lainnya dengan bantuan beberapa utilitas .

  • Sebuah daftar item14
  • Item daftar kedua2
  • Item daftar ketiga1 
<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

Tambahkan hampir semua HTML di dalamnya, bahkan untuk grup daftar tertaut seperti di bawah ini, dengan bantuan utilitas flexbox .

Daftar judul item grup
3 hari yang lalu

Beberapa konten placeholder dalam sebuah paragraf.

Dan beberapa cetakan kecil.
Daftar judul item grup
3 hari yang lalu

Beberapa konten placeholder dalam sebuah paragraf.

Dan beberapa cetakan kecil yang diredam.
Daftar judul item grup
3 hari yang lalu

Beberapa konten placeholder dalam sebuah paragraf.

Dan beberapa cetakan kecil yang diredam. 
<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>

Kotak centang dan radio

Tempatkan kotak centang dan radio Bootstrap di dalam item grup daftar dan sesuaikan sesuai kebutuhan. Anda dapat menggunakannya tanpa <label>s, tetapi harap ingat untuk menyertakan aria-labelatribut dan nilai untuk aksesibilitas.

  • Kotak centang pertama
  • Kotak centang kedua
  • Kotak centang ketiga
  • Kotak centang keempat
  • Kotak centang kelima
<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>

Dan jika Anda ingin <label>s sebagai .list-group-itemarea hit besar, Anda juga bisa melakukannya.

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

Kelancangan

Variabel

$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

Digunakan dalam kombinasi dengan $theme-colorsuntuk menghasilkan kelas varian kontekstual untuk .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;
      }
    }
  }
}

Lingkaran

Loop yang menghasilkan kelas pengubah dengan 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);
}

Perilaku JavaScript

Gunakan plugin tab JavaScript—termasuk secara individual atau melalui file yang dikompilasi bootstrap.js—untuk memperluas grup daftar kami untuk membuat panel konten lokal yang dapat ditabulasi.

Beberapa konten placeholder dalam paragraf yang berkaitan dengan "Beranda". Dan beberapa konten lainnya, digunakan di sini hanya untuk mengisi dan mengisi panel tab ini. Dalam produksi, Anda jelas akan memiliki konten yang lebih nyata di sini. Dan bukan hanya teks. Itu bisa apa saja, sungguh. Teks, gambar, formulir.

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>

Menggunakan atribut data

Anda dapat mengaktifkan navigasi grup daftar tanpa menulis JavaScript apa pun hanya dengan menentukan data-bs-toggle="list"atau pada suatu elemen. Gunakan atribut data ini pada .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>

Melalui JavaScript

Aktifkan item daftar tabbable melalui JavaScript (setiap item daftar harus diaktifkan satu per satu):

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()
  })
})

Anda dapat mengaktifkan item daftar individual dalam beberapa cara:

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

efek memudar

Untuk membuat panel tab memudar, tambahkan .fadeke masing-masing .tab-pane. Panel tab pertama juga harus .showmembuat konten awal terlihat.

<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

constructor

Mengaktifkan elemen daftar item dan wadah konten. Tab harus memiliki a data-bs-targetatau hrefpenargetan simpul penampung di DOM.

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

menunjukkan

Memilih item daftar yang diberikan dan memperlihatkan panel terkaitnya. Item daftar lainnya yang sebelumnya dipilih menjadi tidak dipilih dan panel terkaitnya disembunyikan. Kembali ke pemanggil sebelum panel tab benar-benar ditampilkan (misalnya, sebelum shown.bs.tabperistiwa terjadi).

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

  tab.show()

membuang

Menghancurkan tab elemen.

dapatkan Instance

Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM

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

getOrCreateInstance

Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM, atau membuat yang baru jika tidak diinisialisasi

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

Acara

Saat menampilkan tab baru, peristiwa diaktifkan dalam urutan berikut:

  1. hide.bs.tab(pada tab aktif saat ini)
  2. show.bs.tab(pada tab yang akan ditampilkan)
  3. hidden.bs.tab(pada tab aktif sebelumnya, sama dengan tab hide.bs.tabacara)
  4. shown.bs.tab(pada tab yang baru saja ditampilkan yang baru aktif, yang sama dengan untuk show.bs.tabacara tersebut)

Jika tidak ada tab yang sudah aktif, peristiwa hide.bs.tabdan hidden.bs.tabtidak akan diaktifkan.

Jenis acara Keterangan
show.bs.tab Acara ini diaktifkan pada tampilan tab, tetapi sebelum tab baru ditampilkan. Gunakan event.targetdan event.relatedTargetuntuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).
shown.bs.tab Acara ini diaktifkan pada tampilan tab setelah tab ditampilkan. Gunakan event.targetdan event.relatedTargetuntuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).
hide.bs.tab Acara ini diaktifkan ketika tab baru akan ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk menargetkan masing-masing tab aktif saat ini dan tab baru yang akan segera aktif.
hidden.bs.tab Acara ini diaktifkan setelah tab baru ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan event.targetdan event.relatedTargetuntuk menargetkan tab aktif sebelumnya dan tab aktif baru, masing-masing. 
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
  })
}