Bootstrap - Kumpulan Senarai: Panduan Lengkap untuk Pemula

Hai sana, para pengembang web yang bersemangat! Saya sangat gembira untuk menjadi pandu anda dalam perjalanan menarik ini melalui Kumpulan Senarai Bootstrap. Sebagai seseorang yang telah mengajar sains komputer lebih dari sepuluh tahun, saya dapat menjamin anda bahwa menguasai komponen ini akan menjadi perubahan besar dalam kotak alat desain web anda. Jadi, mari kita mulai!

Apa Itu Kumpulan Senarai?

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

Item-Item Dasar

Mari kita mulai dengan dasar. Membuat Kumpulan Senarai sederhana adalah seperti membuat kue. Berikut adalah cara Anda melakukannya:

<ul class="list-group">
<li class="list-group-item">Satu item</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>
<li class="list-group-item">Dan item 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. Ini memberikan kita daftar yangbersih dan terstyl tanpa usaha ekstra!

Item-Item Aktif

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

<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 membuat item tampak menonjol dengan warna latar belakang yang berbeda. Itu seperti memberikan sorotan pada item tertentu!

Item-Item Dinonaktifkan

Apa bila Anda ingin menampilkan item tapi tidak ingin pengguna berinteraksi dengannya? Itu adalah tempat kelas disabled berguna:

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

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

Tautan dan Tombol

Kumpulan Senarai 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">Item tautan kedua</a>
<a href="#" class="list-group-item list-group-item-action">Item tautan ketiga</a>
<a href="#" class="list-group-item list-group-item-action">Item tautan keempat</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Item tautan dinonaktifkan</a>
</div>

Di sini, kita menggunakan tag <a> instead of <li>. Kelas list-group-item-action membuat tautan ini terlihat 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">Satu item</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>
<li class="list-group-item">Dan item kelima</li>
</ul>

Ini memberikan daftar Anda penampilan yang lebih bersih dan lebih rata. Itu sempurna saat Anda ingin daftar Anda berpadu secara mulus dengan konten sekitarnya.

Bernomor

Ingat daftar bernomor yang Anda buat di sekolah? Anda juga dapat membuatnya dalam 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">Satu item</li>
<li class="list-group-item">Item kedua</li>
<li class="list-group-item">Item ketiga</li>
</ul>

Ini menciptakan daftar berdampingan, yang sempurna untuk hal seperti menu navigasi atau menampilkan kategori.

Variannya

Bootstrap menawarkan variasi warna yang berbeda untuk menyampaikan makna melalui warna:

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

Variasi warna ini dapat digunakan untuk menandai status atau prioritas yang berbeda. Itu seperti mengkode-warna tugas Anda berdasarkan kepentingannya!

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">
Satu item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item kedua
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item ketiga
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>

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

Konten Khusus

Kumpulan Senarai dapat berisi lebih dari hanya teks. Anda dapat menambah konten khusus untuk membuat item daftar yang 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 kumpulan senarai</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 kumpulan senarai</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 Kumpulan Senarai Anda:

<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 begitulah, teman-teman! Kita telah melakukan perjalanan melalui dunia menarik Kumpulan Senarai Bootstrap. Dari daftar sederhana ke komponen interaktif yang kompleks, Kumpulan Senarai menawarkan solusi fleksibel dan menarik untuk menampilkan konten dalam cara yang terstruktur dan menarik.

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

Metode	Deskripsi
Item-Item Dasar	Buat daftar kumpulan senarai sederhana menggunakan kelas list-group dan list-group-item
Item-Item Aktif	Sorot item menggunakan kelas active
Item-Item Dinonaktifkan	Abu-abukan item menggunakan kelas disabled
Tautan dan Tombol	Buat item daftar yang dapat diklik menggunakan kelas list-group-item-action
Flush	Hapus batas luar dan sudut melengkung dengan kelas list-group-flush
Bernomor	Buat daftar bernomor dengan kelas list-group-numbered
Horizontal	Buat daftar horizontal dengan kelas list-group-horizontal
Variants	Gunakan variasi warna seperti list-group-item-primary, list-group-item-success, dll.
Dengan Lencana	Tambahkan lencana ke item daftar untuk informasi ekstra
Konten Khusus	Buat item daftar yang kaya dengan konten khusus
Checkbox dan Radios	Tambahkan elemen interaktif seperti checkbox atau tombol radio ke item daftar

Credits: Image by storyset