Belajar Cara Menggunakan Bootstrap untuk Mempercantik Web

Kali ini kita akan belajar cara menggunakan bootstrap untuk mempercantik website. Kita kenalan dulu yuk dengan bootstrap. Bootstrap adalah framework css. Sebenarnya bootstrap bernama twitter bootstrap akan tetapi orang-orang menyebutnya dengan bootstrap saja. Bootsrap dikembangkan oleh Mark Otto and Jacob Thornton. Kedua orang ini bekerja di twitter. Mungkin karena itu namanya jadi twitter bootstrap.

Kenapa kita harus menggunakan bootstrap. Kita tahu kan betapa sulitnya membuat css sendiri –terutama bagi standalone programmer yang fokus pada program. Kita sudah buat bagus untuk chrome, ternyata di firefox tidak bagus. Betapa ribetnya membuat ukuran button yang pas. Dan masih banyak kerepotan-kerepotan yang lain. Dengan bootstrap kita dibantu untuk mengurangi kerepotan-kerepotan ini. Misalnya saja untuk button, bootstrap telah menyediakan ukuran normal, large, mini sehingga kita tidak perlu repot-repot membuat ukuran button yang pas.

LIHAT DEMO

Cara Menggunakan Bootstrap

Pertama, yang harus kita lakukan adalah download bootstrap. Teman-teman bisa download di web-nya secara langsung di sini. Setelah download, extract-lah hasil download tersebut. Berikut ini adalah tampilan setelah diextract. Pada gambar tersebut terdapat 3 buah folder, yaitu: css, fonts, dan js.

Folder Bootsrap - Cara Menggunakan Bootstrap

Folder Bootsrap terdiri dari 3 folder yaitu: css, fonts dan js

Setelah itu, kita buat sebuah halaman html. Simpan saja pada folder bootstrap. Pada halaman itu kita harus memasukkan elemen utama bootstrap. Berikut ini source codenya.

Elemen utama yang harus kita include adalah bootstrap.css, bootstrap-theme.css dan bootstrap.js. Teman-teman juga bisa menggunakan versi min, yaitu bootstrap.min.css, bootstrap-theme.min.css dan bootstrap.min.js. Ukuran versi min jauh lebih kecil. Aku sendiri juga menggunakan versi min untuk production.

Mulai Menggunakan Bootstrap

Jika langkah pertama sudah, kita akan mulai menggunakan bootstrap. Kita mulai dengan beberapa contoh sederhana penggunaaan bootstrap.

Dan, inilah hasil yang kita peroleh dari barisan kode di atas.

Contoh Cara Menggunakan Bootstrap

Contoh Cara Menggunakan Bootstrap

Nah, demikianlah cara menggunakan bootstrap dan sedikit contoh penggunaannya. Lain kali akan kita bahas lebih banyak lagi tentang bootstrap. Selamat belajar dan selamat mencoba.