Belajar Bootstrap (16 . Panels)

Belajar Bootstrap (16 . Panels)

Panel Bootstrap

Pada kesempatan kali ini kita akan melanjutkan materi tentang bootstrap yaitu panel. Panel digunakan untuk meletakan suatu komponen dalam box. Biasanya digunakan untuk membuat kotak dialog atau informasi.

<!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 panels</title>
</head>
<body>
	<div class="container">
		<h2>Dasar pembuatan panel</h2>
		<div class="panel panel-default">
			<div class="panel-body">
				a basic panel
			</div>
		</div>

		<h2>Panel juga memiliki bagian heading, body, dan footer</h2>
		<div class="panel panel-default">
			<div class="panel-heading">ini bagian heading</div>
			<div class="panel-body">ini bagian body</div>
			<div class="panel-footer">ini bagian footer</div>
		</div>

		<h2>Panel dengan contextual class</h2>
		<div class="panel panel-primary">
			<div class="panel-heading">Belajar panel</div>
			<div class="panel-body">ini berisi content pada panel</div>
		</div>
		<div class="panel panel-success">
			<div class="panel-heading">Belajar panel</div>
			<div class="panel-body">ini berisi content pada panel</div>
		</div>
		<div class="panel panel-info">
			<div class="panel-heading">Belajar panel</div>
			<div class="panel-body">ini berisi content pada panel</div>
		</div>
		<div class="panel panel-warning">
			<div class="panel-heading">Belajar panel</div>
			<div class="panel-body">ini berisi content pada panel</div>
		</div>
		<div class="panel panel-danger">
			<div class="panel-heading">Belajar panel</div>
			<div class="panel-body">ini berisi content pada panel</div>
		</div>

		<h2>Mari kita kreasikan materi tentang panel</h2>
		<div class="panel panel-info">
			<div class="panel-heading">
				<h2>Penaku.pe.hu</h2>
			</div>
			<div class="panel-body">
				<p>situs pribadi sebagai catatan perkuliahan, dan informasi. Situs pribadi sebagai catatan perkuliahan, dan informasi. Situs pribadi sebagai catatan perkuliahan, dan informasi</p>
			</div>
			<ul class="list-group">
				<li class="list-group-item">Catatan kuliah</li>
				<li class="list-group-item">belajar programming</li>
				<li class="list-group-item">informasi</li>	
			</ul>
		</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 *