Kumpulan daftar Bootstrap 5

Daftar grup dasar

Daftar grup dasar adalah daftar non-berurut yang mengandung item daftar:

Untuk membuat daftar grup 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">Item pertama</li>
  <li class="list-group-item">Item kedua</li>
  <li class="list-group-item">Item ketiga</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">Item kedua</li>
  <li class="list-group-item">Item ketiga</li>
</ul>

Coba Sendiri

Daftar grup yang berisi tautan

Untuk membuat daftar grup dengan item yang berisi tautan, gunakan <div> gantikan <ul>, gunakan <a> gantikan <li>Dengan pilihan, jika anda mahu menambahkan latar belakang abu-abu saat penarikan, 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">Item ketiga</a>
</div>

Coba Sendiri

Item yang dihalang

.disabled Kelas menambahkan warna teks yang lebih puing kepada item yang dihalang. Sama ada ada penggunaan dalam link, kesan hover akan dihapuskan:

Contoh

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

Coba Sendiri

Hapus garisan

Gunakan .list-group-flush Kelas untuk menghapuskan garisan dan rounding:

Contoh

<ul class="list-group list-group-flush">
  <li class="list-group-item">Item pertama</li>
  <li class="list-group-item">Item kedua</li>
  <li class="list-group-item">Item ketiga</li>
  <li class="list-group-item">Item keempat</li>
</ul>

Coba Sendiri

Bunch senarai dengan nombor

Gunakan .list-group-numbered Kelas untuk membuat item dalam senarai dengan nombor di depan:

Contoh

<ol class="list-group list-group-numbered">
  <li class="list-group-item">Item pertama</li>
  <li class="list-group-item">Item kedua</li>
  <li class="list-group-item">Item ketiga</li>
</ol>

Coba Sendiri

Bunch senarai horizontal

Jika anda mahu tampilkan item dalam senarai secara horizontal (bersebelahan) bukannya vertikal (tertumpuk), sila tambahkan .list-group-horizontal Kelas ditambahkan kepada .list-group：

Contoh

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Item pertama</li>
  <li class="list-group-item">Item kedua</li>
  <li class="list-group-item">Item ketiga</li>
  <li class="list-group-item">Item keempat</li>
</ul>

Coba Sendiri

Kelas konteks

Kelas konteks boleh digunakan untuk menambah warna kepada item dalam senarai:

Kelas untuk pengecatan item dalam senarai 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">Kemampuan berjaya</li>
  <li class="list-group-item list-group-item-secondary">Item sekunder</li>
  <li class="list-group-item list-group-item-info">Item maklumat</li>
  <li class="list-group-item list-group-item-warning">Amaran item</li>
  <li class="list-group-item list-group-item-danger">Item bahaya</li>
  <li class="list-group-item list-group-item-primary">Item utama</li>
  <li class="list-group-item list-group-item-dark">Item gelap</li>
  <li class="list-group-item list-group-item-light">Item cerah</li>
</ul>

Coba Sendiri

Item pautan dengan kelas konteks

Contoh

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Item tindakan</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Item berjaya</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Item sekunder</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Item maklumat</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Amaran 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

Tarik .badge Kombinasi kelas dan utility/helper dapat menambahkan cakera di dalam grup daftar:

Contoh

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Bekas Dalam
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Emel Iklan
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Tong Sampah
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

Coba Sendiri