Bootstrap - List Groups Demo

Halo sana, para pengembang web yang sedang mencari ilmu! Hari ini, kita akan melihat dunia yang menakjubkan Bootstrap list groups. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membimbing Anda dalam perjalanan ini. Jadi, ambil minumannya yang favorit, betahlah, dan mari kita mulai petualangan coding ini bersama!

Apa Itu List Group?

Sebelum kita masuk ke detailnya, mari kita mulai dari dasar. List group adalah komponen fleksibel dan kuat di Bootstrap untuk menampilkan serangkaian konten. P想象kannya sebagai cara yang stylish untuk menampilkan daftar item, baik itu teks sederhana, tautan, atau bahkan konten khusus. Itu seperti memberikan make-over fashion ke daftar tua dan membosankan Anda!

Mengapa Menggunakan List Groups?

List groups sangat universal. Mereka dapat digunakan untuk:

• Menampilkan daftar sederhana
• Membuat menu navigasi
• Menampilkan notifikasi pengguna
• Menampilkan konten dalam bentuk terstruktur

Sekarang kita tahu apa itu list groups dan mengapa mereka hebat, mari kita mulai kerjanya!

List Group Dasar

Mari kita mulai dengan contoh list group sederhana:

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

Dalam contoh ini, kita menggunakan daftar tak terurut (<ul>) dengan kelas list-group. Setiap item daftar (<li>) memiliki kelas list-group-item. Ini menciptakan daftar yang bersih, bergaris batas, dan item yang jaraknya rata.

Item Aktif

kadang-kadang, Anda ingin menyorot item tertentu dalam daftar Anda. Bootstrap membuat ini mudah dengan kelas active:

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

Kelas active memberikan item warna latar belakang yang berbeda, membuatnya tampak menonjol. Itu seperti memberikan lampu sorot ke item itu!

Item Dinonaktifkan

Apa bila Anda ingin menampilkan item tapi membuatnya tak bisa diklik? Itulah saat kelas disabled berguna:

<ul class="list-group">
<li class="list-group-item">Item pertama</li>
<li class="list-group-item disabled">Item dinonaktifkan</li>
<li class="list-group-item">Item ketiga</li>
</ul>

Item disabled akan tampak keabuan, menandakan bahwa item itu tak interaktif. Itu seperti memberikan tanda "Jangan Sentuh" pada item itu.

List Group Dengan Tautan

List groups tidak hanya untuk daftar statis. Anda dapat mengubahnya menjadi menu navigasi yang dapat diklik dengan menggunakan tag <a>:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">Beranda</a>
<a href="#" class="list-group-item list-group-item-action">Profil</a>
<a href="#" class="list-group-item list-group-item-action">Pesan</a>
</div>

Di sini, kita menggunakan tag <a> dengan kelas list-group-item dan list-group-item-action. Kelas list-group-item-action menambahkan state hover dan aktif ke tautan.

List Group Rata

Ingin menghapus batas luar dan sudut yang melengkung? Gunakan kelas list-group-flush:

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

Ini menciptakan daftar yang bersih, tanpa batas, dan dapat secara harmonis bergabung dengan elemen lain di halaman Anda.

List Group Horizontal

List groups juga dapat ditampilkan secara horizontal. Ini bagus untuk membuat antarmuka seperti tab:

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

Kelas list-group-horizontal mengubah daftar vertikal menjadi horizontal. Itu seperti mengajarkan daftar untuk melakukan limbo – berapa rendah Anda bisa?

Kelas Kontekstual

Bootstrap menyediakan kelas kontekstual untuk menambahkan warna ke item daftar Anda, membantu menyampaikan arti:

<ul class="list-group">
<li class="list-group-item">Item default</li>
<li class="list-group-item list-group-item-primary">Item utama</li>
<li class="list-group-item list-group-item-secondary">Item sekunder</li>
<li class="list-group-item list-group-item-success">Item sukses</li>
<li class="list-group-item list-group-item-danger">Item bahaya</li>
<li class="list-group-item list-group-item-warning">Item peringatan</li>
<li class="list-group-item list-group-item-info">Item info</li>
<li class="list-group-item list-group-item-light">Item terang</li>
<li class="list-group-item list-group-item-dark">Item gelap</li>
</ul>

Kelas kontekstual ini menambahkan warna ke item daftar Anda, membuatnya lebih menarik dan informatif.

Konten Khusus

List groups dapat mengandung lebih dari hanya teks. Anda dapat menambahkan konten khusus untuk menciptakan item daftar yang kompleks:

<div class="list-group">
<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 list group</h5>
<small>3 hari yang lalu</small>
</div>
<p class="mb-1">Beberapa konten placeholder dalam paragraf.</p>
<small>Dan beberapa teks kecil.</small>
</a>
</div>

Contoh ini menunjukkan bagaimana Anda dapat menciptakan item daftar dengan judul, paragraf, dan teks tambahan kecil. Itu seperti menjadikan item daftar Anda menjadi mini-artikel!

Badge di List Groups

Anda juga dapat menambahkan badge ke item daftar Anda untuk menampilkan informasi tambahan:

<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">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Spam
<span class="badge bg-warning rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Dikirim
<span class="badge bg-secondary rounded-pill">99+</span>
</li>
</ul>

Ini menciptakan daftar dengan badge di sebelah kanan, yang sempurna untuk menampilkan hitungan atau indikator status.

Kesimpulan

Dan itu dia, teman-teman! Kita telah mengembara melalui negeri Bootstrap list groups, dari daftar sederhana hingga konten khusus. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba contoh ini dan menciptakan list groups Anda sendiri.

List groups adalah seperti pisau Swiss Army Knife desain web – multifungsi, praktis, dan selalu membantu untuk dimiliki dalam peralatan Anda. Jadi, pergi dan buat daftar Anda! Siapa tahu? Anda mungkin menjadi Michelangelo list groups!

Selamat coding, dan semoga daftar Anda selalu terkelompok sempurna!

Credits: Image by storyset