Tutorial Series

Tutorial membuat Panel Bootstrap - Tutorial Dasar Bootstrap 3

f190c95b6f3467ceb2ffd24cc130e1d0

Selamat Pagi, dalam lanjutan Tutorial Dasar Bootstrap 3 kali ini kita akan membuat Panel menggunakan Bootstrap 3.
Dalam tutorial sebelumnya kita sudah membahas cara membuat Alert dengan Bootstrap 3.

Baca juga: Tutorial membuat Alerts Bootstrap - Tutorial Dasar Bootstrap 3

Komponen Panel pada Bootstrap adalah sebuah komponen yang digunkan sebagai bidang informasi atau sarana informasi karena adanya Hedaer, Body, dan Footer. Nanti kita akan belajar cara membuatnya dan customize lebih lanjut mengenai Bootstrap 3.
Langsung saja, teman-teman bisa mendownload Bootstrap 3 di http://getbootstrap.com/ kemudian ekstrak dan masukan pada folder assets. Jika teman-teman ingin langsung menggunakan CDN dari Bootstrap dengan cara menyisipkan file css dan JavaScript yang telah disediakan dan ini sangat memudahkan kita dalam proses develop. Di tutorial kali ini saya menggunakan CDN Bootstrap sebagai alternatif.

Berikut tutorialnya membuat Panel dengan Bootstrap 3:

  1. Basic Panel - Panel default tanpa ada tambahan Heading dan Footer
  2. Kode Hasil

    See the Pen Basic Panel - Tutorial Dasar Bootstrap by Maful P Arnandi (@maful) on CodePen.

  3. Panel with Heading - Panel yang ada Heading dengan menambahkan class .panel-heading dan teman-teman juga bisa menggunakan tag h1 sampai h6 dengan .panel-title. Teman-teman juga bisa menambahkan .panel-title didalamm class .panel-heading
  4. Kode Hasil

    See the Pen Panel with Heading - Tutorial Dasar Bootstrap by Maful P Arnandi (@maful) on CodePen.

  5. 3. Panel with Footer - Jika ingin menambahkan footer pada panel teman-teman bisa menggunakan .panel-footer dibawah tag .panel-body
  6. Kode Hasil

    See the Pen Panel with Footer - Tutorial Dasar Bootstrap by Maful P Arnandi (@maful) on CodePen.

  7. 4. Panel berwarna - Panel Bootstrap mempunyai class yang digunakan untuk memberi warna agar terlihat lebih cantik. Teman-teman bisa menggunakan beberapa class warna yaitu .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger dengan mengganti class .panel-default seperti diatas dengan class yang tadi.
  8. Kode Hasil

    See the Pen Panel Berwarna - Tutorial Dasar Bootstrap by Maful P Arnandi (@maful) on CodePen.

Diatas adalah contoh kode dan hasil pembelajar kali ini yang pada dasarnya kita harus menguasai basicnya dulu sebelum kita melakukan ujicoba lain agar kita mempunyai ilmu dasar dan akan mempermudah kita dalam pengaplikasian ke website.
Terima kasih dan Salam BoDes