Grup Daftar Bootstrap 5

Grup daftar dasar

Grup daftar dasar adalah daftar tak berurut yang mengandung item daftar:

Untuk membuat grup daftar dasar, gunakan kelas .list-group dari <ul> elemen dan kelas untuk .list-group-item dari <li> elemen:

Contoh

<ul class="list-group">
  <li class="list-group-item"> Pertama item</li>
  <li class="list-group-item">Kedua item</li>
  <li class="list-group-item">Ketiga item</li>
</ul>

Coba Sendiri

status aktif

Gunakan .active Kelas untuk menonjolkan proyek saat ini:

Contoh

<ul class="list-group">
  <li class="list-group-item active">proyek aktif</li>
  <li class="list-group-item">Kedua item</li>
  <li class="list-group-item">Ketiga item</li>
</ul>

Coba Sendiri

grup daftar yang berisi item tautan

Untuk membuat grup daftar dengan item yang berisi tautan, gunakan <div> gantikan <ul>, dengan <a> gantikan <li>Pilihan, jika Anda ingin warna latar abu-abu saat penyangga, tambahkan .list-group-item-action Kelas:

Contoh

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">pertama</a>
  <a href="#" class="list-group-item list-group-item-action">kedua</a>
  <a href="#" class="list-group-item list-group-item-action">Ketiga item</a>
</div>

Coba Sendiri

Item dinonaktifkan

.disabled Kelas menambahkan warna teks yang lebih halus untuk item yang dinonaktifkan. Saat digunakan di tautan, efek penarik akan dihapus:

Contoh

<div class="list-group">
  <a href="#" class="list-group-item disabled">Item yang dinonaktifkan</a>
  <a href="#" class="list-group-item disabled">Item yang dinonaktifkan</a>
  <a href="#" class="list-group-item">Ketiga item</a>
</div>

Coba Sendiri

Hapus garis besar

Dengan .list-group-flush Kelas menghapus garis besar dan rounding:

Contoh

<ul class="list-group list-group-flush">
  <li class="list-group-item"> Pertama item</li>
  <li class="list-group-item">Kedua item</li>
  <li class="list-group-item">Ketiga item</li>
  <li class="list-group-item">Keempat item</li>
</ul>

Coba Sendiri

Daftar grup berangka

Dengan .list-group-numbered Kelas membuat item daftar dengan angka di depan:

Contoh

<ol class="list-group list-group-numbered">
  <li class="list-group-item"> Pertama item</li>
  <li class="list-group-item">Kedua item</li>
  <li class="list-group-item">Ketiga item</li>
</ol>

Coba Sendiri

Daftar horisontal

Jika Anda ingin item daftar tampil secara horisontal daripada vertikal (dalam baris daripada di lapisan), silakan tambahkan .list-group-horizontal Kelas ditambahkan ke .list-group:

Contoh

<ul class="list-group list-group-horizontal">
  <li class="list-group-item"> Pertama item</li>
  <li class="list-group-item">Kedua item</li>
  <li class="list-group-item">Ketiga item</li>
  <li class="list-group-item">Keempat item</li>
</ul>

Coba Sendiri

Kelas konteks

Kelas konteks dapat digunakan untuk menambah warna item daftar:

Kelas untuk penampilan warna item daftar adalah:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

Contoh

<ul class="list-group">
  <li class="list-group-item list-group-item-success">Berhasil item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

Coba Sendiri

Item tautan dengan kelas konteks

Contoh

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Item Bahaya</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Item Utama</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Item Gelap</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Item Cerah</a>
</div>

Coba Sendiri

Daftar grup dengan bintang

Ganti .badge Kombinasikan kelas dengan kelas utility/helper untuk menambah bintang di dalam grup daftar:

Contoh

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Kotak Masuk
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Surel Iklan
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Tempat Sampah
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Coba Sendiri