HASANONTA - Panel adalah sebuah kotak yang memiliki garis dan padding tertentu. Bootstrap sendiri telah menyediakan class yang berguna untuk membuat panel dengan mudah, yaitu class panel. Panel yang disediakan Bootstrap sendiri terdiri dari Heading, Body , dan footer panel. Berikut ini beberapa class panel yang telah disediakan oleh Bootstrap untuk membuat panel.
- panel-default : merupakan class yang digunakan untuk membuat panel dengan warna standar.
- panel-success : merupakan class yang digunakan untuk membuat panel dengan warna hijau
- panel-info : merupakan class yang digunakan untuk membuat panel dengan warna biru
- panel-warning : merupakan class yang digunakan untuk membuat panel dengan warna kuning
- panel-danger : merupakan class yang digunakan untuk membuat panel dengan warna merah
- panel-heading : merupakan class yang disediakan untuk membuat panel bagian heading
- panel-body : merupakan class yang disediakan untuk membuat panel bagian badan
- panel-footer : merupakan class yang disediakan untuk membuat panel bagian footer
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HasanOnta</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body> <div class="container">
<h1>Membuat panel dengan bootstrap | HasanOnta</h1>
<div class="panel panel-default">
<div class="panel-heading">
<b>Isi panel kepala</b>
</div>
<div class="panel-body">
<p>Isi panel body</p>
</div>
<div class="panel-footer">
<b>Isi panel footer</b>
</div>
</div>
</div>
</div>
</body>
</html>
Output :
Dari contoh diatas itu merupakan jenis panel dengan class panel-default. untuk membuat penl dengan bootstrap hal pertama yang harus dilakukan adalah memilih model panel. contohnya diatas menggunakan panel default :
<div class="panel panel-default"></div>Untuk menggunakan model panel yang lain anda bisa mengganti panel-default dengan panel-success, warning, danger, dan lain-lain sebagaimana telah dijelaskan diatas. Contoh penggunaan model panel yang lain:
<!DOCTYPE html>
<html>
<head>
<title>HasanOnta</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body> <div class="container">
<h1>Membuat panel dengan bootstrap | HasanOnta</h1>
<div class="panel panel-default">
<div class="panel-heading">
<b>Panel Default</b>
</div>
<div class="panel-body">
<p>Membuat panel default dengan bootstrap</p>
</div> </div>
<br/>
<div class="panel panel-success">
<div class="panel-heading">
<b>Panel Success</b>
</div>
<div class="panel-body">
<p>Membuat panel success dengan bootstrap</p>
</div> </div>
<br/>
<div class="panel panel-danger">
<div class="panel-heading">
<b>Panel Danger</b>
</div>
<div class="panel-body">
<p>Membuat panel danger dengan bootstrap</p>
</div> </div>
<br/>
<div class="panel panel-info">
<div class="panel-heading">
<b>Panel Info</b>
</div>
<div class="panel-body">
<p>Membuat panel info dengan bootstrap</p>
</div> </div>
<br/>
<div class="panel panel-warning">
<div class="panel-heading">
<b>Panel Warning</b>
</div>
<div class="panel-body">
<p>Membuat panel warning dengan bootstrap</p>
</div> </div>
</div>
</div>
</body>
</html>
Output :
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar