Fungsi Bootstrap Panels

Hallo teman-teman DUMET School, Pada tutorial kali ini saya akan menjelaskan fungsi dari Panels yang ada di Bootstrap. Panels pada Bootstrap adalah komponen yang di gunakan ketika kalian ingin menempatkan komponen atau elemen ke dalam sebuah kotak yang sudah di beri background-color berwarna abu-abu. Nah Bootstrap sendiri telah menyediakan beberapa macam Panels yaitu :

- Panel untuk Heading

- Panel untuk Footer

- Panel Contextual

- Panel untuk Table

- Panel untuk Listgroups

Cara menggunakannya kalian cukup menambahkan class .panel dan .panel-default di dalam tag <div>. Berikut adalah contoh dasar dari Panels yang ada di Bootstrap.

Panel untuk Heading

Untuk membuat Panel Heading kalian cukup menambahkan class .panel-heading di dalam tag <div>, dan tambahkan juga class .panel-title di dalam tag <h1> - <h6>, berikut contohnya.

Panel untuk Footer

Untuk membuat Panel Footer kalian cukup menambahkan class .panel-footer pada tag <div>, berikut contohnya.

Panel Contextual

Di dalam Bootstrap juga sudah di sediakan untuk Panel Contextual nya seperti, panel-primary, panel-success, panel-info, panel-warning, panel-danger. Untuk cara membuatnya kalian tinggal merubah class .panel-default dengan panel contextual yang ingin kalian gunakan. Berikut contohnya

Panel untuk Table

Untuk membuat Panel Table kalian tinggal memasukkan table di dalam tag <div> yang sudah di beri class .panel dan .panel-default. Berikut contohnya.

Panel untuk Listgroup

Untuk membuat Panel Listgroup kalian bisa membuat tag <div> terlebih dahulu, kemudian di dalam tag <div> tersebut kalian bisa tambahkan class .panel dan .panel-default. Selanjutnya kalian bisa membuat tag <ul> dan tambahkan class .list-group dan di dalam tag <li> kalian bisa tambahkan class .list-group-item. Berikut contohnya.