explore bootstrap yuk!

     
Siapa yang belum mengenal bootstrap? sedikit penjelasan dari saya, bootstrap adalah sebuah css framework yang di design untuk css3 dan html5, di dalamnya tersedia juga berbagai macam plugin jQuery. Dengan bootstrap kita bisa menulis kode menjadi lebih terstandar. Nah, dalam postingan ini saya akan sedikit memberikan contoh penggunaan beberapa komponen dari bootstrap ini, diantaranya: button, alert dan icon.
Button

button atau tombol bisa di buat dalam element <button>, <a href...>, <input> (komponen lain mungkin juga bisa)
cara menggunakannya sederhana saja, kita cukup menambahkan class di dalamnya, contoh:
class="btn"

itu sudah cukup untuk membuat tombol, tetapi tersedit juga berbagai macam jenis tombol (warna) di bootstrap ini seperti primary, info, danger, warning dan success. Caranya sama, yaitu menambahkan class lagi, contoh:
class="btn btn-info", ini untuk tombol info. Juga berlaku untuk jenis tombol lainnya seperti: btn-warning, btn-success, btn-primary, btn-danger.



Button Group
Tombol grup juga telah di sediakan oleh bootstrap, cara menggunakannya sangat mudah, yaitu menambahkan div dan menambahkan class "btn-group" didalam div tersebut.
Button Size
Ukuran tombol juga bisa kita sesuaikan, di bootstrap ini tersedia ukuran tombol mini, lihat di bawah ini:

Alert

Alert sendiri sebenarnya sama saja, kita cukup menambahkan class di dalam element div. Lihat contoh di bawah:

Icon

Nah, icon ini salahsatu kesukaan saya. Karena di bootstrap ini terbilang cukup lengkap dalam memberikan pilihan icon. Nah cara menggunakannya kita bisa menggunakan element , lihat contoh di bawah:



Nah, jika background di icon tersebut dominan di warna gelap, bootstrap telah memberikan alternatif icon berwarna putih. Anda cukup menambahkan class "icon-white" saja, sederhana bukan?

Sebenarnya bootstrap menyediakan dokumentasi lengkap tentang penggunaan bootstrap itu sendiri. Tunggu apa lagi, silahkan download dan maksimalkan waktu ngoding Anda! Happy Ngoprek!

Post Terkait explore bootstrap yuk!

No comments explore bootstrap yuk!

Post a Comment

Popular Posts