Menerapkan Bootstrap Panels Dengan Cepat dan Mudah

Bootstrap Panels yaitu bahasan sesi kali ini. Bootstrap menyediakan panels karena memiliki fungsi dan kegunaannya masing-masing, kalau tidak ada fungsi dan kegunaanya tidak mungkinkan dibuat panels :D. Bootstrap Panels memiliki satu bentuk namun dengan ciri khasnya memiliki beberapa warna.

Langsung saja kepembahasan panels, perlu kita pahami Bootstra Panels memiliki nilai-nilai properti dengan garis yang melingkari kotak dan padding. Untuk membuat Bootstrap Panels kita perlu menggunakan class .panel, class .panel-heading sebagai header judul, class .panel-body dan class .panel-footer isi dari konten.

Panel Tanpa Heading

Dapat dilihat contoh dibawah ini sebagai panel basic dengan class .panel-default tanpa menggunakan heading/judul.

Contoh Panel Basic/Sederhana

kode HTML

<div class="panel panel-default">
 <div class="panel-body">
  Contoh Panel Basic/Sederhana
 </div>
</div>

Panel Menggunakan Heading

Lihat contoh dibawah ini merupakan panels dengan menggunakan judul heading. Perlu diperhatikan tata letak atau struktur penulisan kodenya.

Judulnya Disini

Contoh Panel Basic/Sederhana

Kode HTML

<div class="panel panel-default">
 <div class="panel-heading">
 Judulnya Disini
 </div>
 <div class="panel-body">
 Contoh Panel Basic/Sederhana
 </div>
</div>

Panel Menggunakan Heading dan Footer

Contoh dibawah ini menggunakan heading dan footer pada panel.

Judulnya Disini

Contoh Panel Basic/Sederhana

Footer Panels

Kode HTML

<div class="panel panel-default">
 <div class="panel-heading">
 Judulnya Disini
 </div>
 <div class="panel-body">
 Contoh Panel Basic/Sederhana 
 </div>
 <div class="panel-footer">
 Footer Panels
 </div>
</div>

Panel Colors

Untuk panels dengan warna ini kita hanya perlu menambahkan pada elemen <div> yang pertama, classnya antara lain .panel-default, .panel-primary, .panel-success, .panel-warning, dan .panel-danger. Contoh

Judulnya Disini

Contoh Panel Basic/Sederhana

Judulnya Disini

Contoh Panel Primary

Judulnya Disini

Contoh Panel Success

Judulnya Disini

Contoh Panel Warning

Judulnya Disini

Contoh Panel Danger

Kode HTML

<div class="panel panel-default">
<div class="panel-heading">
Judulnya Disini
</div>
<div class="panel-body">
Contoh Panel Basic/Sederhana 
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
Judulnya Disini
</div>
<div class="panel-body">
Contoh Panel Primary 
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
Judulnya Disini
</div>
<div class="panel-body">
Contoh Panel Success 
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
Judulnya Disini
</div>
<div class="panel-body">
Contoh Panel Warning 
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
Judulnya Disini
</div>
<div class="panel-body">
Contoh Panel Danger 
</div>
</div>

Selesai sudah pembahasan Bootstrap Panels, selamat mencoba dan bereksperimen ....