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.
Belajar cara membuat panel dengan memanggil class yang telah disediakan oleh bootstrap.
MAKSUD & TUJUAN
Membuat panel yang responsive dan terlihat menarik.
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.
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
Referensi
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