Bootstrap
Framework CSS Twitter Bootstrap
Kita mungkin sudah akrab menggunakan framework CSS baik fixed seperti Blueprint, 960.gs maupun yang responsive/adaptive seperti lessframework, cssgrid, skeleton, 320andup, foundation dan tentu masih banyak lagi yang lainnya. Kali ini mari kita mengenal CSS framework bernama Bootstrap yang dikembangkan developer Twitter.
Mengapa Menggunakan Bootstrap?
Bootstrap memang bukan framework baru, bahkan versi terbarunya adalah Bootstrap 2.1.1 yang support responsive design. Mengapa kita perlu mengenal CSS framework ini? Tentunya karena framework ini begitu lengkap, memiliki dokumentasi yang komplit. Selain itu bootstrap memiliki komponen-komponen dan fitur yang lengkap seperti penjelasan dibawah.
Langkah Awal Menggunakan Bootstrap
Untuk menggunakan bootstrap, silakan mendownload terlebih dahulu Twitter Bootstrap dengan mengunjungi homepagenya di http://getbootstrap.com. File yang terdownload [boostrap.zip] mengandung 3 folder aset dari bootstrap yakni seperti gambar berikut:
Berikut isi dari 3 folder aset tersebut:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
├── img/
│ ├── glyphicons-halflings.png
│ ├── glyphicons-halflings-white.png
css/bootstrap.css berisi style dasar (reset, layout, typography, button) bawaan bootstrap.
css/bootstrap-responsive.css berisi setting responsive desain. Kita bisa memakainya bersama bootstrap.css untuk membuat style bootstrap menjadi responsive.
css/bootstrap-min.css dan
css/bootstrap-responsive-min.css versi compressed dari bootstrap.css dan bootstrap-responsive.css
img/glyphicons-halflings.png dan
img/glyphicons-halflings-white.png, adalah icon yang digunakan pada bootstrap dengan teknik spriting.
js/bootstrap.js dan
js/bootstrap-min.js adalah javascript untuk mengaktifkan berbagai fitur keren bawaan bootstrap.
Ok, seperti biasa, jika anda ingin mengkonvert psd ke file html, buatlah file index.html pada folder aset bootstrap.
.jpg)
