MEMBUAT PANEL DENGAN BOOTSTRAP (PART10)

Guys saya kali ini akan memposting tentang membuat panel di bootstrap.

A. Pengertian

Bootstrap adalah framework atau tools untuk membuat aplikasi web atau website yang bersifat responsive secara cepat, mudah dan gratis. Kata 'responsive' disini berarti bahwa tampilan web (lebar dan susunan isinya) dapat berubah otomatis sesuai dengan lebar layar yang menampilkanya.
Salah satu website besar yang menggunakan framework bootstrap. Mengapa bisa demikian? Karena Bootstrap sendiri dikembangkan oleh developer twitter sehingga Bootstrap juga disebut " Twitter Bootstrap" Dengan bootstrap, kita dapat membuat responsive website dengan cepat dan mudah  dapat berjalan sempurna pada browser-browser modern seperti Firefox, Google Chrome, Safari, Opera, Dan Internet Exploler.

B. Latar belakang
Salah satu kemudahan Botstrap yaitu Bootstrap terdiri dari CSS dan HTML untuk menghasilkan Grid, Layout, Tifografi, Tabel, Form, Navigasi dan lain-lain. Di dalam Bootstrap juga sudah terdapat Javascript (jQuery Pluigns) untuk menghasilkan komponen UI yang cantik transtition, Modal, Dropdown, scroolspy, ToolTip, PopOver, Tab, Alert, Button, Carousel, dan lain-lain.

C. Alat dan Bahan

• PC / Laptop
• CSS Bootstrap

MEMBUAT PANEL DENGAN BOOTSTRAP
Panel adalah sebuah kotak yang memiliki garis dan padding. Bootstrap menyediakan class panel untuk membuat kotak yang memiliki heading dan footer kotak tersebut. Panel yangyang disediakan oleh Bootstrap terdiri dari panel heading atau kepala dari panel, Panel body atau badan dari panel, dan panel footer alias panel yang terletak pada bagian bawah sebagai footer.

Ada beberapa Class Panel yang disediakan oleb Bootstrap untuk membuat panel

• panel-default Merupakan class yang digunakan untuk membuat panel dengan warna standar alias bawaan dari Bootstrap
• panel-success Merupakan class yang disediakan Bootstrap untuk membuat panel berwarna hijau
• panel-info Merupakan class yang disediakan Bootstrap untuk membuat panel berwarna biru
• panel-warning Merupakan class yang disediakan Bootstrap untuk membuat panel berwarna kuning
• panel-heading Merupakan class Bootstrap yang digunakan untuk membuat bagian kepala dari panel tersebut
• panel-body Merupakan class yang disediakan Bootstrap untuk membuat bagian badan dari panel
• panel-footer Merupakan class Bootstrap yang disediakan Bootstrap untuk membuat panel bagian bawah atau footer

D. Tahapan Pelaksanaan

Berikut adalah contoh Penggunaan Class Panel Bootstrap.

dan hasilnya

E. Kesimpulanya
Gampang kan kalau kita pengen membuat panel.

F. Refrensi

http://www.script-kiddies.org/2016/12/belajar-bootstrap-part-10-membuat-panel.html

G. Penutup
Sekian postingan kali ini semoga bermanfaat.