Belajar Bootstrap (15. List Group)

Belajar Bootstrap (15. List Group)

List group

Kita akan membahas tentang list-group.
Kita belajar bootstrap tentunya sudah tau list itu apa, jika belum tahu alangkah baiknya kita harus paham sedikit-sedikit, paham betul malah lebih baik tentang dasar2 html dan css.
Tulis dan jalankan kode berikut, lihat hasilnya sehingga paham seperti tutorial-tutorial sebelumnya

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
	<title>belajar list group</title>
</head>
<body>
	<div class="container">
		<h2>Dasar list group</h2>
		<ul class="list-group">
			<li class="list-group-item">satu</li>
			<li class="list-group-item">dua</li>
			<li class="list-group-item">tiga</li>
		</ul>
		
		<h2>Kita tambahkan badge pada list</h2>	
		<ul class="list-group">
			<li class="list-group-item"><span class="badge">1</span>satu</li>
			<li class="list-group-item"><span class="badge">2</span>dua</li>
			<li class="list-group-item"><span class="badge">3</span>tiga</li>
		</ul>
		
		<h2>kita buat list menggunakan tag a sebagai link</h2>
		<ul class="list-group">
			<a href="#" class="list-group-item">satu</a>
			<a href="#" class="list-group-item">dua</a>
			<a href="#" class="list-group-item">tiga</a>
		</ul>
		
		<h2>Kita buat list active dan disabled</h2>
		<ul class="list-group">
			<a href="#" class="list-group-item active">satu active</a>
			<a href="#" class="list-group-item disabled">dua disabled</a>
			<a href="#" class="list-group-item">tiga</a>
		</ul>
		
		<h2>contextual list dengan efek warna</h2>
		<ul class="list-group">
			<li class="list-group-item list-group-item-success">success</li>
			<li class="list-group-item list-group-item-info">info</li>
			<li class="list-group-item list-group-item-warning">warning</li>
			<li class="list-group-item list-group-item-danger">danger</li>
		</ul>

		<h2>Kita buat custom content</h2>
		<div class="list-group">
    		<a href="#" class="list-group-item active">
      			<h4 class="list-group-item-heading">First List Group Item Heading</h4>
      			<p class="list-group-item-text">List Group Item Text</p>
    		</a>
		    <a href="#" class="list-group-item">
	   	      	<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
			    <p class="list-group-item-text">List Group Item Text</p>
		    </a>
		    <a href="#" class="list-group-item">
		      	<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
		      	<p class="list-group-item-text">List Group Item Text</p>
		    </a>
  </div>
	</div>
</body>
</html>

hasil

Semoga bermanfaat, sampai jumpa di postingan selanjutnya.

Written by @akhi_syabab

Leave a Reply

Your email address will not be published.Required fields are marked *