Tutorial Belajar Bootstrap Bagian 8 : Cara Membuat Daftar di Bootstrap

Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 7 : Cara Membuat Tabel di Bootstrap, selanjutnya kita akan belajar cara membuat daftar di Bootstrap.

Anda dapat membuat 3 jenis daftar di HTML:

Unordered List – Daftar item yang urutannya tidak secara eksplisit penting. Item dalam daftar tidak berurutan ditandai dengan poin.
Ordered List – Daftar item yang urutannya secara eksplisit penting. Item dalam daftar berurutan ditandai dengan angka, mis. 1, ⅵ, dll.
Definition List – Daftar istilah dengan deskripsi yang terkait.

Lihat tutorial tentang Daftar HTML, Tutorial Belajar HTML5 Bagian 12 : Cara Membuat Daftar di HTML.

Unstyled Ordered dan Unordered List

Terkadang Anda mungkin perlu menghapus gaya default dari item daftar. Anda dapat melakukan ini dengan menerapkan class .list-unstyled ke elemen <ul> atau <ol> masing-masing.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Unstyled List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h2 class="mb-3">Unstyled Unordered List</h2>
    <ul class="list-unstyled">
        <li>Beranda</li>
        <li>Produk
            <ul>
                <li>Handphone</li>
                <li>Asesoris</li>
            </ul>
        </li>
        <li>Tentang Kami</li>
        <li>Kontak</li>
    </ul>
    <hr>
    <h2 class="mb-3">Unstyled Ordered List</h2>
    <ol class="list-unstyled">
        <li>Beranda</li>
        <li>Produk
            <ol>
                <li>Handphone</li>
                <li>Asesoris</li>
            </ol>
        </li>
        <li>Tentang Kami </li>
        <li>Kontak</li>
    </ol>
</div>
</body>
</html>

Catatan: Class .list-unstyled menghapus gaya daftar default dan padding kiri hanya dari item daftar yang merupakan turunan langsung dari elemen <ul> atau <ol>.

Menempatkan Item Ordered dan Unordered List Secara Inline

Jika Anda ingin membuat menu horizontal menggunakan daftar tersusun atau tidak berurutan, Anda perlu menempatkan semua item daftar dalam satu baris, yaitu berdampingan.

Anda dapat melakukan ini hanya dengan menambahkan class .list-inline ke masing-masing <ul> atau <ol>, dan class .list-inline-item ke <li> elemen.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Inline List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h2 class="mb-3">Inline Unordered List</h2>
    <ul class="list-inline">
        <li class="list-inline-item">Beranda</li>
        <li class="list-inline-item">Produk</li>
        <li class="list-inline-item">Tentang Kami </li>
        <li class="list-inline-item">Kontak</li>
    </ul>
</div>
</body>
</html>

Membuat Horizontal Definition List

Istilah dan deskripsi dalam daftar definisi juga dapat disejajarkan secara horizontal berdampingan menggunakan class yang telah ditentukan sistem grid Bootstrap. Berikut contohnya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Horizontal Definitoin List</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .bs-example{
    	margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h2 class="mb-3">Horizontal Definition Lists</h2>
    <dl class="row">
        <dt class="col-sm-3">Agen Pengguna </dt>
        <dd class="col-sm-9"> Agen pengguna HTML adalah perangkat apa pun yang menafsirkan dokumen HTML.</dd>
        <dt class="col-sm-3 text-truncate">Client-side Scripting</dt>
        <dd class="col-sm-9">Client-side scripting umumnya mengacu pada kategori program komputer di web yang dijalankan oleh browser web pengguna.</dd>
        <dt class="col-sm-3">Document Tree</dt>
        <dd class="col-sm-9"> Pohon elemen yang dikodekan dalam dokumen sumber.</dd>
    </dl>
</div>
</body>
</html>

Catatan: Untuk istilah definisi yang lebih panjang, Anda dapat secara opsional menerapkan class .text-truncate pada elemen <dt> untuk memotong teks dengan elipsis (…).

Semoga tutorial ini bisa membantu Anda belajar cara mebuat daftar di Bootstrap.