Berikut adalah contoh Membuat List Dengan Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>List</h4>
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
</ul>
</div>
</body>
</html>List
- Item 1
- Item 2
- Item 3
- Item 4
Anda dapat menyalin kode di atas ke file HTML Anda dan melihat hasilnya di browser. Kode tersebut menggunakan kelas list-group dari Bootstrap untuk membuat daftar dengan tampilan yang rapi dan responsif.
List Aktif
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>List Aktif</h4>
<ul class="list-group">
<li class="list-group-item active">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
</body>
</html>List Aktif
- Item 1
- Item 2
- Item 3
Dalam contoh di atas, kita menggunakan kelas list-group untuk mengatur tampilan list menjadi grup. Kemudian, kita menambahkan kelas list-group-item pada setiap elemen list untuk membuat tampilan yang seragam.
Untuk membuat salah satu elemen list menjadi aktif, kita tambahkan kelas active pada elemen tersebut. Dalam contoh di atas, elemen pertama memiliki kelas active, sehingga akan ditampilkan dengan tampilan yang berbeda.
List Group With Linked Items
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>List Group With Linked Items</h4>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Item 1</a>
<a href="#" class="list-group-item list-group-item-action">Item 2</a>
<a href="#" class="list-group-item list-group-item-action">Item 3</a>
</div>
</div>
</body>
</html>Disabled Item
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Disable Item</h4>
<ul class="list-group">
<li class="list-group-item disabled">Item 1</li>
<li class="list-group-item disabled">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
</body>
</html>Disable Item
- Item 1
- Item 2
- Item 3
Dalam contoh di atas, kita menggunakan kelas list-group untuk membuat daftar grup. Kemudian, kita menambahkan kelas list-group-item pada setiap elemen <li> untuk membuat item dalam daftar. Untuk membuat item dinonaktifkan, kita tambahkan kelas disabled pada elemen <li>.
Anda dapat menyesuaikan kode ini sesuai dengan kebutuhan Anda. Misalnya, Anda dapat mengubah teks item atau menambahkan atribut lain pada elemen <li>.
Horizontal List Groups
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>Horizontal List Groups</h4>
<div class="list-group list-group-horizontal" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" id="home-list" data-toggle="list" href="#home" role="tab" aria-controls="home">Home</a>
<a class="list-group-item list-group-item-action" id="profile-list" data-toggle="list" href="#profile" role="tab" aria-controls="profile">Profile</a>
<a class="list-group-item list-group-item-action" id="messages-list" data-toggle="list" href="#messages" role="tab" aria-controls="messages">Messages</a>
<a class="list-group-item list-group-item-action" id="settings-list" data-toggle="list" href="#settings" role="tab" aria-controls="settings">Settings</a>
</div>
</div>
</body>
</html>List Group dengan Badge
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h4>List Group with Badges</h4>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 1
<span class="badge bg-primary rounded-pill">5</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 2
<span class="badge bg-primary rounded-pill">3</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Item 3
<span class="badge bg-primary rounded-pill">8</span>
</li>
</ul>
</div>
</body>
</html>List Group with Badges
- Item 1 5
- Item 2 3
- Item 3 8
Dalam contoh kode di atas, kita menggunakan class list-group untuk membuat List Group. Setiap item dalam List Group diberikan class list-group-item. Untuk menampilkan badge, kita menggunakan class badge dan rounded-pill untuk memberikan tampilan yang lebih bulat pada badge.
Anda dapat mengganti teks “Item 1”, “Item 2”, dan “Item 3” dengan teks yang sesuai dengan kebutuhan Anda. Anda juga dapat mengganti class badge-primary dengan class lain seperti badge-secondary, badge-success, badge-danger, dan lain-lain untuk memberikan warna yang berbeda pada badge.
Semoga contoh kode di atas dapat membantu Anda dalam membuat daftar dengan menggunakan Bootstrap. Jika Anda memiliki pertanyaan lebih lanjut, jangan ragu untuk bertanya.
Leave a Reply