Lebak Cyber Kursus Pemrograman Gratis
Membuat Panel Menggunakan Bootstrap
lebakcyber.net – Membuat panel menggunakan Bootstrap. Oke jadi pada kesempatan kali ini kita akan membahas tentang cara membuat panel memakai Bootstrap, langsung saja kita simak pembahasannya dibawah ini ya.
Panel merupakan sebuah kotak yang memiliki padding dan juga garis, dan pada Bootstrap telah disediakan class untuk membuat panel yang bisa memiliki header dan juga footer pada panel tersebut.
Bootstrap sendiri menyediakan panel yang terdiri dari panel untuk bagian kepala atau heading, panel bagian badan atau body dan juga panel bagian bawah atau yang disebut juga sebagai panel footer.
Class panel pada bootstrap dibagi menjadi beberapa class, yaitu seperti berikut ini :
- panel-heading = adalah class panel yang digunakan untuk membuat panel pada bagian heading atau kepala.
- panel-body = adalah class panel yang digunakan untuk membuat panel pada bagian body atau badan.
- panel-footer = adalah class panel yang digunakan untuk membaut panel pada bagian footer atau kaki.
- panel-default = adalah class panel yang digunakan untuk membuat sebuah panel yang memiliki warna standar.
- panel-warning = adalah class panel yang digunakan untuk membuat sebuah panel yang memiliki warna kuning.
- panel-info = adalah class panel yang digunakan untuk membuat sebuah panel yang memiliki warna biru.
- panel-success = adalah class panel yang digunakan untuk membuat sebuah panel yang memiliki warna hijau.
- panel-danger = adalah class panel yang digunakan untuk membuat sebuah panel yang memiliki warna merah.
Sekarang kita coba praktekan bagaimana implementasi pembuatan panel pada bootstrap tersebut, silahkan buat sebuah file index.html lalu masukan perintah seperti dibawah ini :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat panel pada bootstrap - lebakcyber.net</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Membuat panel pada bootstrap</h1>
<div class="panel panel-default">
<div class="panel-heading">
<b>Ini adalah panel pada bagian kepala atau heading</b>
</div>
<div class="panel-body">
<p>Ini adalah panel pada bagian badan atau body</p>
</div>
<div class="panel-footer">
<b>Ini adalah panel pada bagian kaki atau footer</b>
</div>
</div>
</div>
</div>
</body>
</html>
Nanti hasilnya akan seperti pada gambar dibawah ini :
Pada contoh pembuatan panel diatas kita menggunakan panel default dan untuk membuat sebuah panel memakai bootstrap yang pertama kali harus dibuat adalah model dari panel tersebut dan pada contoh diatas kita membuat panel dengan class panel-default.
Kalau kita ingin membuat sebuah panel dengan model panel lainnya yang telah disediakan oleh bootstrap, kita hanya perlu menggani class panel-default tersebut misalnya dengan class panel-info, panel-danger, panel-warning atau panel-success.
Sekarang kita coba praktekan bagaimana cara membuat sebuah panel dengan model panel yang lain. Silahkan buat file index.html yang baru lalu masukan perintah seperti dibawah ini :
index.html
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat panel pada bootstrap - lebakcyber.net</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Membuat panel pada bootstrap</h1>
<div class="panel panel-default">
<div class="panel-heading">
<b>Model Panel Default</b>
</div>
<div class="panel-body">
<p>Contoh model panel default pada bootstrap</p>
</div>
</div>
<br/>
<div class="panel panel-success">
<div class="panel-heading">
<b>Model Panel Success</b>
</div>
<div class="panel-body">
<p>Contoh model panel success pada bootstrap</p>
</div>
<div class="panel-footer">
</div>
</div>
<br/>
<div class="panel panel-danger">
<div class="panel-heading">
<b>Model Panel Danger</b>
</div>
<div class="panel-body">
<p>Contoh model panel danger pada bootstrap</p>
</div>
<div class="panel-footer">
</div>
</div>
<br/>
<div class="panel panel-info">
<div class="panel-heading">
<b>Model Panel Info</b>
</div>
<div class="panel-body">
<p>Contoh model panel info pada bootstrap</p>
</div>
<div class="panel-footer">
</div>
</div>
<br/>
<div class="panel panel-warning">
<div class="panel-heading">
<b>Model Panel Warning</b>
</div>
<div class="panel-body">
<p>Contoh model panel warning pada bootstrap</p>
</div>
<div class="panel-footer">
</div>
</div>
</div>
</div>
</body>
</html>
Nanti hasilnya akan seperti pada gambar dibawah ini :
Bisa dilihat pada contoh pembuatan panel diatas, untuk mengganti model panel sesuai dengan yang kita inginkan kita hanya perlu merubah class panel-default menjadi panel-warning, panel-info, panel-success atau panel-danger.
Bagaimana? mudah bukan cara untuk membuat sebuah panel pada bootstrap? semoga tutorial sederhana ini dapat bermanfaat dan sampai jumpa pada tutorial belajar bootstrap selanjutnya.
