Assalamu'alaikum wr.wb
Kali ini saya akan berbagi Cara Membuat List (Daftar) Grup.
List (Daftar) Grup Dasar
Kelompok daftar yang paling mendasar adalah daftar unordered dengan daftar item. Untuk membuat daftar grup dasar, gunakan elemen <ul> dengan class .list-group, dan unur-unsur <li> dengan class .list-group-item.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>List (Daftar) Grup Dasar</h2>
<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>
</div>
</body>
</html>
Daftar Grup dengan Lencana
Anda juga dapat menambahkan lencana ke daftar grup. Lencana akan secara otomatis diposisikan di sebelah kanan. Untuk membuat lencana, buat elemen <span> dengan class .badge dalam daftar item.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Daftar Grup dengan Lencana</h2>
<ul class="list-group">
<li class="list-group-item">Baru <span class="badge">12</span></li>
<li class="list-group-item">Dihapus <span class="badge">5</span></li>
<li class="list-group-item">Peringatan <span class="badge">3</span></li>
</ul>
</div>
</body>
</html>
Daftar Grup Dengan Produk Terkait
Item dalam kelompok daftar juga bisa hyperlink. Ini akan menambahkan warna latar belakang abu-abu di hover. Untuk membuat daftar grup deengan item terkait, menggunakan <div> bukannya <ul> dan <a> bukannya <li>.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Daftar Grup Dengan Produk Terkait</h2>
<div class="list-group">
<a href="#" class="list-group-item">Item pertama</a>
<a href="#" class="list-group-item">Item kedua</a>
<a href="#" class="list-group-item">Item ketiga</a>
</div>
</div>
</body>
</html>
State Aktive
Gunakan class .active untuk menyorot item saat ini.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Item Aktif dalam Daftar Grup</h2>
<div class="list-group">
<a href="#" class="list-group-item active">Item pertama</a>
<a href="#" class="list-group-item">Item kedua</a>
<a href="#" class="list-group-item">Item ketiga</a>
</div>
</div>
</body>
</html>
Menonaktifkan Item
Untuk menonaktifkan item tambahkan class .disabled.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Belajar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Menonaktifkan Item</h2>
<div class="list-group">
<a href="#" class="list-group-item disabled">Item pertama</a>
<a href="#" class="list-group-item">Item kedua</a>
<a href="#" class="list-group-item">Item ketiga</a>
</div>
</div>
</body>
</html>
Class kontekstual
Class kontekstual dapat digunakan untuk daftar warna item. Class-class untuk mewarnai daftar item adalah .list-group-item-success, .list-group-item-info, .list-group-item-warning, .list-group-item-danger.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Daftar Grup dengan Claass Kontekstual</h2>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Item pertama</li>
<li class="list-group-item list-group-item-info">Item kedua</li>
<li class="list-group-item list-group-item-warning">Item ketiga</li>
<li class="list-group-item list-group-item-danger">Item keempat</li>
</ul>
<h2>Produk terkait Dengan Kelas Kontekstual</h2>
<p>Gerakkan mouse di atas item terkait untuk melihat efek hover:</p>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Item pertama</a>
<a href="#" class="list-group-item list-group-item-info">Item kedua</a>
<a href="#" class="list-group-item list-group-item-warning">Item ketiga</a>
<a href="#" class="list-group-item list-group-item-danger">Item keempat</a>
</div>
</div>
</body>
</html>
Konten kustom
Anda dapat menambahkan HTML dalam item daftar grup. Bootstrap menyediakan class .list-group-item-heading dan .list-grupitem-text yang dapat digunakan.Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Daftar Grup dengan Kustom Konten</h2>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">Daftar grup item heading pertama</h4>
<p class="list-group-item-text">Daftar grup item teks</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Daftar grup item heading kedua</h4>
<p class="list-group-item-text">Daftar grup item teks</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Daftar grup item heading ketiga</h4>
<p class="list-group-item-text">Daftar grup item teks</p>
</a>
</div>
</div>
</body>
</html>
Sekian Cara Membuat List (Daftar) Grup dengan Bootstrap.
Semoga Bermanfaat...!!!
Referensi:www.w3schools.com
Wassalamu'alaikum wr.wb
EmoticonEmoticon