Bootstrap - List Groups Demo

Hai there, para pengembang web yang sedang belajar! Hari ini, kita akan melihat dunia yang menakjubkan Bootstrap list groups. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk memandu Anda dalam perjalanan ini. Jadi, ambil minuman kesukaan Anda, rasa nyaman, dan mari kita mulai petualangan coding ini bersama!

Apa Itu List Group?

Sebelum kita masuk ke hal yang mendalam, mari kita mulai dari dasar. List group adalah komponen fleksibel dan kuat di Bootstrap untuk menampilkan serangkaian konten. Bayangkan itu sebagai cara stylish untuk menampilkan daftar item, baik itu teks sederhana, tautan, atau bahkan konten khusus. Itu seperti memberikan make-over fashion bagi daftar yang biasa Anda lihat!

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 list groups dan mengapa mereka bagus, mari kita genggam lengan dan mulai mengoding!

Basic List Group

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 bersih, berbatas, dan item yang teratur.

Active Items

kadang-kadang, Anda ingin menyorot item tertentu di 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 sorotan ke item itu!

Disabled Items

Apa bila Anda ingin menampilkan item tetapi membuatnya tak dapat diklik? Itu di mana 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 abu-abu, menandakan bahwa itu tidak interaktif. Itu seperti memberikan tanda "Jangan Sentuh" pada item itu.

List Group with Links

List groups tidak hanya untuk daftar statis. Anda dapatubah mereka 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.

Flush List Group

Ingin menghapus batas luar dan sudut yang bundar? 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 bersih, tanpa batas, dan dapat mencampur dengan elemen lain di halaman Anda.

Horizontal List Group

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?

Contextual Classes

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 sentuhan warna ke item daftar Anda, membuat mereka lebih menarik dan informatif.

Custom Content

List groups dapat menyertakan 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 di 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 kecil tambahan. Itu seperti menjadikan item daftar Anda menjadi mini-artikel!

Badges in 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 jumlah atau indikator status.

Kesimpulan

Dan di sana Anda punya nya, teman-teman! Kita telah melakukan perjalanan 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 knives dalam desain web – universal, praktis, dan selalu membantu dalam set alat Anda. Jadi, pergilah dan buat list Anda! Siapa tahu? Anda mungkin menjadi Michelangelo list groups!

Selamat mengoding, dan may your lists always be perfectly grouped!

Credits: Image by storyset