Daftar grup

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

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

<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

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

Tautan dan tombol

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

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

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

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

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

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 badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-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">
    <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>

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.

Rumah Profil Pesan Pengaturan

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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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-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-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-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):

$('#myList a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Anda dapat mengaktifkan item daftar individual dalam beberapa cara:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third 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

$().tab

Mengaktifkan elemen daftar item dan wadah konten. Tab harus memiliki a data-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-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('tampilkan')

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

$('#someListItem').tab('show')

Acara

Saat menampilkan tab baru, peristiwa diaktifkan dalam urutan berikut:

hide.bs.tab(pada tab aktif saat ini)
show.bs.tab(pada tab yang akan ditampilkan)
hidden.bs.tab(pada tab aktif sebelumnya, sama dengan tab hide.bs.tabacara)
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.target`dan `event.relatedTarget`untuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).
ditampilkan.bs.tab	Acara ini diaktifkan pada tampilan tab setelah tab ditampilkan. Gunakan `event.target`dan `event.relatedTarget`untuk menargetkan tab aktif dan tab aktif sebelumnya (jika tersedia).
sembunyikan.bs.tab	Acara ini diaktifkan ketika tab baru akan ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan `event.target`dan `event.relatedTarget`untuk menargetkan masing-masing tab aktif saat ini dan tab baru yang akan segera aktif.
tersembunyi.bs.tab	Acara ini diaktifkan setelah tab baru ditampilkan (dan dengan demikian tab aktif sebelumnya disembunyikan). Gunakan `event.target`dan `event.relatedTarget`untuk menargetkan tab aktif sebelumnya dan tab aktif baru, masing-masing.

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})