Bootstrap 4 Daftar Grup

Grup Daftar Dasar

Grup daftar paling dasar adalah daftar tidak berurutan dengan item daftar:

• barang pertama
• Barang kedua
• Barang ketiga

Untuk membuat grup daftar dasar, gunakan <ul>elemen dengan class .list-group, dan <li>elemen dengan class .list-group-item:

Status Aktif

• Barang aktif
• Barang kedua
• Barang ketiga

Gunakan .activekelas untuk menyorot item saat ini:

Daftar Grup Dengan Item Tertaut

Untuk membuat grup daftar dengan item tertaut, gunakan <div>alih- alih <ul> dan <a>sebagai ganti <li>. Secara opsional, tambahkan .list-group-item-actionkelas jika Anda ingin warna latar belakang abu-abu saat diarahkan:

Item yang Dinonaktifkan

Kelas .disabledmenambahkan warna teks yang lebih terang ke item yang dinonaktifkan. Dan ketika digunakan pada tautan, itu akan menghapus efek hover:

Siram / Hapus Batas

Gunakan .list-group-flushkelas untuk menghapus beberapa batas dan sudut membulat:

Grup Daftar Horizontal

Jika Anda ingin item daftar ditampilkan secara horizontal, bukan vertikal (berdampingan alih-alih di atas satu sama lain), tambahkan .list-group-horizontalkelas ke .list-group:

Kelas Kontekstual

Kelas kontekstual dapat digunakan untuk mewarnai item daftar:

• barang sukses
• barang sekunder
• barang informasi
• item peringatan
• Barang berbahaya
• Barang utama
• Barang gelap
• barang ringan

Kelas untuk mewarnai daftar item 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-darkdan list-group-item-light,:

Tautkan item dengan Kelas Kontekstual

Daftar Grup dengan Lencana

Gabungkan .badgekelas dengan kelas utilitas/pembantu untuk menambahkan lencana di dalam grup daftar: