Daftar adalah cara yang umum dan efektif untuk menyajikan informasi secara terstruktur. Bootstrap menyediakan beberapa gaya untuk daftar, baik yang tidak berurutan (unordered) maupun berurutan (ordered), serta daftar yang tidak memiliki penanda (unstyled) dan daftar deskripsi. Mari kita pelajari cara menggunakannya dalam proyek web Anda di Malang, Jawa Timur.

Daftar Tidak Berurutan (Unordered Lists)

Daftar tidak berurutan digunakan ketika urutan item tidak penting. Dalam HTML, ini direpresentasikan dengan tag <ul> dan setiap item daftar menggunakan tag <li>. Bootstrap memberikan gaya dasar yang bersih untuk daftar ini.

Contoh Daftar Tidak Berurutan:

Daftar Tidak Bergaya (Unstyled Lists)

Jika Anda ingin menghilangkan gaya default daftar (seperti bullet points dan margin kiri), Anda dapat menambahkan kelas .list-unstyled pada tag <ul>. Ini berguna ketika Anda ingin mengatur gaya daftar sendiri atau menggunakannya untuk tujuan layout.

Contoh Daftar Tidak Bergaya:

Daftar Inline

Anda dapat menampilkan item daftar secara horizontal (inline) dengan menambahkan kelas .list-inline pada <ul> dan kelas .list-inline-item pada setiap <li>. Ini berguna untuk membuat navigasi horizontal atau daftar label kecil.

Contoh Daftar Inline:

Daftar Berurutan (Ordered Lists)

Daftar berurutan digunakan ketika urutan item penting dan biasanya ditandai dengan angka. Dalam HTML, ini direpresentasikan dengan tag <ol> dan setiap item menggunakan tag <li>. Bootstrap juga memberikan gaya dasar untuk daftar ini.

Contoh Daftar Berurutan:

Semua kelas yang dapat diterapkan pada <ul> (seperti .list-unstyled dan .list-inline) juga dapat diterapkan pada <ol>.

Daftar Deskripsi (Description Lists)

Daftar deskripsi digunakan untuk menampilkan istilah dan deskripsinya. Ini direpresentasikan dengan tag <dl>, istilah menggunakan tag <dt> (description term), dan deskripsi menggunakan tag <dd> (description definition).

Contoh Daftar Deskripsi:

Daftar Deskripsi Horizontal

Anda dapat membuat istilah dan deskripsi dalam daftar deskripsi ditampilkan secara horizontal untuk tampilan yang lebih ringkas pada layar lebar. Tambahkan kelas .row pada tag <dl> dan gunakan grid system Bootstrap (misalnya, .col-sm-4 untuk <dt> dan .col-sm-8 untuk <dd>).

Contoh Daftar Deskripsi Horizontal:

Dengan menggunakan kelas-kelas list dari Bootstrap, Anda dapat dengan mudah membuat daftar yang terstruktur dan menarik secara visual untuk berbagai jenis konten di website Anda di Malang. Eksperimenlah dengan berbagai kelas untuk mendapatkan tampilan yang paling sesuai dengan kebutuhan proyek Anda. Selamat mencoba! 🚀