Responsive Ads Here

Thursday, April 13, 2017

Belajar Bootstrap Part 10 Membuat Panel

Belajar Bootstrap Part 10 Membuat Panel 




Assalamualaikum Wr. Wb.

Hai  Sobat ketemu lagi dengan saya, bagaimana kabarnya sehat bukan ?
Nah pada kesempatan kali ini saya akan menjelaskan tentang penggunaan Bootstrap untuk membuat panel.



PENGERTIAN

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


LATAR BELAKANG

Belajar cara membuat panel dengan memanggil class yang telah disediakan oleh bootstrap.

MAKSUD & TUJUAN

Membuat panel yang responsive dan terlihat menarik.

ALAT & BAHAN
  • LAPTOP/PC
  • Text Editor
  • Bootstrap
  • Browser

PEMBAHASAN

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





Mungkin itu dulu dari saya silahkan dicoba, Dan jangan lupa share + ikuti ya :D
Syukron 


Wassalamualaikum Wr. Wb.


Referensi

No comments:

Post a Comment