Lewati ke konten utama Lewati ke navigasi dokumen
Check
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
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

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

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

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

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

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>

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

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. Sebuah daftar item
  2. Sebuah daftar item
  3. Sebuah daftar item
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>

Ini berfungsi dengan baik dengan konten khusus juga.

  1. Subjudul
    Konten untuk item daftar
    14
  2. Subjudul
    Konten untuk item daftar
    14
  3. Subjudul
    Konten untuk item daftar
    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

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

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

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

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.

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>

Anda dapat menggunakan .stretched-linkon <label>s untuk membuat seluruh item grup daftar dapat 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

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS Bootstrap yang berkembang, grup daftar sekarang menggunakan variabel CSS lokal .list-groupuntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

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

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

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

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

Anda dapat mengaktifkan item daftar individual dalam beberapa 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 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

Metode dan transisi asinkron

Semua metode API tidak sinkron dan memulai transisi . Mereka kembali ke penelepon segera setelah transisi dimulai tetapi sebelum berakhir . Selain itu, pemanggilan metode pada komponen transisi akan diabaikan .

Lihat dokumentasi JavaScript kami untuk informasi lebih lanjut .

Mengaktifkan konten Anda sebagai elemen tab.

Anda dapat membuat instance tab dengan konstruktor, misalnya:

const bsTab = new bootstrap.Tab('#myTab')
metode Keterangan
dispose Menghancurkan tab elemen.
getInstance Metode statis yang memungkinkan Anda mendapatkan instance tab yang terkait dengan elemen DOM, Anda dapat menggunakannya seperti ini: bootstrap.Tab.getInstance(element).
getOrCreateInstance Metode statis yang mengembalikan instance tab yang terkait dengan elemen DOM atau membuat yang baru jika tidak diinisialisasi. Anda dapat menggunakannya seperti ini: bootstrap.Tab.getOrCreateInstance(element).
show Memilih tab yang diberikan dan menampilkan panel yang terkait. Tab lain yang sebelumnya dipilih menjadi tidak dipilih dan panel terkaitnya disembunyikan. Kembali ke pemanggil sebelum panel tab benar-benar ditampilkan (yaitu sebelum shown.bs.tabperistiwa terjadi).

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, maka peristiwa hide.bs.taband hidden.bs.tabtidak akan diaktifkan.

Jenis acara Keterangan
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.
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). 
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
  })
})