Bootstrap - List Groups: Panduan Komprehensif untuk Pemula

Hai teman-teman yang sedang belajar pemrograman web! Saya sangat senang menjadi panduan Anda dalam perjalanan menarik ini melalui List Groups di Bootstrap. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya dapat menjamin bahwa menguasai komponen ini akan menjadi perubahan besar dalam kitab alat desain web Anda. Jadi, mari kita mulai!

Apa Itu List Groups?

Sebelum kita memulai, mari kita mengerti apa itu List Groups. Bayangkan Anda membuat aplikasi daftar tugas. Anda ingin tugas Anda disusun rapi, kan? Itu tepat apa yang List Groups lakukan dalam desain web. Mereka adalah cara yang fleksibel dan kuat untuk menampilkan rangkaian konten. Apakah itu daftar belanja sederhana atau menu navigasi kompleks, List Groups bisa menangani itu!

Item Dasar

Mari kita mulai dari dasar. Membuat List Group sederhana adalah seperti membuat kue. Berikut cara Anda melakukannya:

<ul class="list-group">
<li class="list-group-item">Sebuah item</li>
<li class="list-group-item">Sebuah item kedua</li>
<li class="list-group-item">Sebuah item ketiga</li>
<li class="list-group-item">Sebuah item keempat</li>
<li class="list-group-item">Dan yang kelima</li>
</ul>

Dalam contoh ini, kita menggunakan daftar tak terurut (<ul>) dengan kelas list-group. Setiap item daftar (<li>) memiliki kelas list-group-item. Hal ini memberikan kita daftar yang bersih dan terstyl tanpa usaha ekstra!

Item Aktif

kadang-kadang, Anda ingin menyorot item dalam daftar Anda. Mungkin itu adalah halaman saat ini dalam menu navigasi. Itu di mana kelas active berguna:

<ul class="list-group">
<li class="list-group-item active">Sebuah item aktif</li>
<li class="list-group-item">Sebuah item kedua</li>
<li class="list-group-item">Sebuah item ketiga</li>
</ul>

Kelas active membuat item tersebut tampak menonjol dengan warna latar belakang yang berbeda. Itu seperti memberikan sorotan pada item tersebut!

Item Nonaktif

Apa jika Anda ingin menampilkan item tetapi tidak ingin pengguna berinteraksi dengannya? Itu di mana kelas disabled berguna:

<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">Sebuah item nonaktif</li>
<li class="list-group-item">Sebuah item kedua</li>
<li class="list-group-item">Sebuah item ketiga</li>
</ul>

Kelas disabled mengabu-abu item tersebut, menandakan bahwa item itu tidak dapat diklik. Itu seperti memberikan tanda "Jangan Sentuh" pada item itu!

Tautan dan Tombol

List Groups tidak hanya untuk daftar statis. Anda dapat menjadikan item daftar Anda menjadi tautan yang dapat diklik atau tombol:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
Item tautan saat ini
</a>
<a href="#" class="list-group-item list-group-item-action">Sebuah item tautan kedua</a>
<a href="#" class="list-group-item list-group-item-action">Sebuah item tautan ketiga</a>
<a href="#" class="list-group-item list-group-item-action">Sebuah item tautan keempat</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Sebuah item tautan nonaktif</a>
</div>

Di sini, kita menggunakan tag <a> instead of <li>. Kelas list-group-item-action membuat tautan ini tampak dan berperilaku seperti tombol. Itu seperti mengubah daftar belanja Anda menjadi menu pilihan!

Flush

Ingin menghapus batas luar dan sudut yang melengkung? Kelas list-group-flush adalah teman Anda:

<ul class="list-group list-group-flush">
<li class="list-group-item">Sebuah item</li>
<li class="list-group-item">Sebuah item kedua</li>
<li class="list-group-item">Sebuah item ketiga</li>
<li class="list-group-item">Sebuah item keempat</li>
<li class="list-group-item">Dan yang kelima</li>
</ul>

Ini memberikan List Group Anda penampilan yang lebih bersih dan lebih rapi. Itu sempurna ketika Anda ingin daftar Anda bergabung lancar dengan konten sekitarnya.

Bernomor

Ingat daftar bernomor yang Anda buat di sekolah? Anda juga dapat membuatnya di Bootstrap:

<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>

Kelas list-group-numbered secara otomatis menomor item daftar Anda. Itu seperti memiliki asisten pribadi yang menomor daftar tugas Anda!

Horizontal

Siapa yang mengatakan daftar harus selalu vertikal? Dengan Bootstrap, Anda dapat membuatnya horizontal juga:

<ul class="list-group list-group-horizontal">
<li class="list-group-item">Sebuah item</li>
<li class="list-group-item">Sebuah item kedua</li>
<li class="list-group-item">Sebuah item ketiga</li>
</ul>

Ini membuat daftar berjejer sebelah, sempurna untuk halaman navigasi atau menampilkan kategori.

Varian

Bootstrap menawarkan varian warna berbeda untuk mengirimkan makna melalui warna:

<ul class="list-group">
<li class="list-group-item">Sebuah item default sederhana</li>
<li class="list-group-item list-group-item-primary">Sebuah item primary sederhana</li>
<li class="list-group-item list-group-item-secondary">Sebuah item sekunder sederhana</li>
<li class="list-group-item list-group-item-success">Sebuah item sukses sederhana</li>
<li class="list-group-item list-group-item-danger">Sebuah item bahaya sederhana</li>
<li class="list-group-item list-group-item-warning">Sebuah item peringatan sederhana</li>
<li class="list-group-item list-group-item-info">Sebuah item informasi sederhana</li>
<li class="list-group-item list-group-item-light">Sebuah item cahaya sederhana</li>
<li class="list-group-item list-group-item-dark">Sebuah item gelap sederhana</li>
</ul>

Varian warna ini dapat digunakan untuk menandai status atau prioritas berbeda. Itu seperti mengkode-warna tugas Anda berdasarkan pentingannya!

Dengan Lencana

Ingin menambah informasi ekstra ke item daftar Anda? Lencana adalah cara bagus untuk melakukan itu:

<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Sebuah item daftar
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Sebuah item daftar kedua
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Sebuah item daftar ketiga
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>

Ini menambahkan elemen lencana ke item daftar Anda, sempurna untuk menunjukkan hitungan atau indikator status.

Konten Khusus

List Groups dapat menampung lebih dari hanya teks. Anda dapat menambah konten khusus untuk membuat item daftar Anda kaya dan informatif:

<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">Judul item daftar</h5>
<small>3 hari yang lalu</small>
</div>
<p class="mb-1">Beberapa konten placeholder dalam paragraf.</p>
<small>Dan beberapa cetakan kecil.</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">Judul item daftar</h5>
<small class="text-muted">3 hari yang lalu</small>
</div>
<p class="mb-1">Beberapa konten placeholder dalam paragraf.</p>
<small class="text-muted">Dan beberapa cetakan kecil.</small>
</a>
</div>

Ini memungkinkan Anda membuat item daftar yang kompleks dengan judul, paragraf, dan elemen lainnya. Itu seperti mengubah daftar belanja Anda menjadi katalog produk detil!

Checkbox dan Radio

Akhirnya, Anda bahkan dapat menambah checkbox atau tombol radio ke List Groups:

<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Checkbox pertama
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Checkbox kedua
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Checkbox ketiga
</li>
</ul>

Ini sempurna untuk membuat daftar interaktif, seperti daftar tugas di mana pengguna dapat menandai item yang selesai.

Kesimpulan

Dan itu adalah dia, teman-teman! Kita telah menjelajahi dunia menarik List Groups di Bootstrap. Dari daftar dasar hingga komponen interaktif yang kompleks, List Groups menawarkan solusi fleksibel dan menarik untuk menampilkan konten dalam cara yang terstruktur dan menarik.

Ingat, kunci untuk menguasai konsep ini adalah latihan. Jadi, teruskanlah, coba contoh ini, campur dan gabungkan fitur berbeda, dan lihat apa yang Anda bisa buat. Selamat belajar coding!

Credits: Image by storyset