Menjadi Desainer Web "Dadakan" dengan Twitter Bootstrap

20 April 2014
Twitter Bootstrap merupakan salah satu framework populer saat ini yang banyak digunakan untuk mendesain tampilan antar muka (interface) aplikasi-aplikasi berbasis web atau mobile, termasuk untuk mempercantik halaman blog, dengan model desain responsif. Dengan model desain responsif ini, kita dapat membuat aplikasi yang tampilannya dapat mengikuti ukuran device yang digunakan.

Puluhan komponen CSS dan jQuery (seperti: breadcrumb, progress bar, carousel, dropdown menu, dan modal) yang disertakan pada paket framework ini benar-benar memanjakan siapa pun yang ingin membuat atau menyunting sisi tampilan aplikasinya dengan desain modern dan elegan. Tidak salah jika dikatakan bahwa kehadiran Twitter Bootstrap ini membuat setiap orang menjadi desainer web "dadakan". :)

Selain mudah digunakan, dokumentasi framework yang dibuat menggunakan HTML, CSS, SASS, LESS, dan Javascript ini terbilang cukup lengkap. Contoh-contoh yang disajikan pun mudah diikuti, bahkan bisa di-salin-tempel untuk langsung digunakan pada proyek-proyek yang sedang kita kerjakan.

Ketika tulisan ini dibuat, Bootstrap dirilis dengan versi 3.1.1. Pada versi terbarunya ini, tampilan desain secara umum menggunakan model flat. Ini terlihat terutama pada tampilan komponen-komponen button, label, badges, serta navbar.

Bootstrap versi 3.1.1 juga dilengkapi pula dengan komponen Glyphicons, ikon-ikon berformat font. Ikon-ikon berformat font ini adalah gambar-gambar kecil yang diperlakukan seperti teks atau huruf, sehingga lebih mudah dimodifikasi dengan bantuan CSS, seperti mengubah ukuran dan warna. Ini artinya, satu buah ikon yang sama dapat diberi warna dan ukuran berbeda sesuai dengan keinginan, tanpa harus menyuntingnya di aplikasi pengolah gambar.





Untuk dapat menggunakan framework ini, kita dapat terlebih dulu mengunduhnya ke komputer kita dari laman resminya, getbootstrap.com.

Pada halaman download, silakan pilih bagian yang ditunjuk tanda panah pada gambar di bawah. Pilihan ini akan mengunduh file CSS, fonts, dan Javascript dari framework Twitter Bootstrap, dengan ukuran sekitar 200KB.





Setelah file berhasil diunduh, selanjutnya silakan akrabkan diri Anda dengan dokumentasi resmi yang juga dapat diperoleh di laman resmi Twitter Bootstrap di atas.

Menggunakan Bootstrap memang mudah. Kita dapat membangun halaman web lengkap (paling tidak statis) dengan komponen-komponen yang disediakan. Meski demikian, pengetahuan mengenai HTML dan CSS mungkin diperlukan agar kita dapat memberikan kustomisasi lebih jauh sesuai kebutuhan. Dengan pengatahuan tersebut, Anda mungkin akan dapat menguasainya dalam beberapa hari saja.

Happy design!