Developed Direktorat Sistem Informasi

Hubungi Kami di 031-5931800

Detail Berita

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.


 




 



 







 



 

 

 

 

 

 

Login dengan Username dan password Siakad Anda