Sekilas tentang Twitter Bootstrap

Bingung saat akan memulai membuat prototype website? Berikut ini beberapa prototype website yang sering dibuat :

atau bahkan yang seperti ini :

Kini ada cara yang efektif yaitu menggunakan Twitter-Bootstrap . Bootstrap merupakan front-end Framework yang dikembangkan oleh tim dari Twitter. Seperti yang tertulis pada situs resminya :

Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

Lalu apa sih yang disediakan oleh Bootstrap?

  • Scaffolding
    Global styles for the body to reset type and background, link styles, grid system, and two simple layouts.
  • Base CSS
    Styles for common HTML elements like typography, code, tables, forms, and buttons. Also includes Glyphicons, a great little icon set.
  • Components
    Basic styles for common interface components like tabs and pills, navbar, alerts, page headers, and more.
  • JavaScript plugin
    Similar to Components, these JavaScript plugins are interactive components for things like tooltips, popovers, modals, and more.

Yaa intinya sih dengan front-end framework ini anda dapat membangun prototype website dengan mudah.

Bagi anda yang sudah mengenal 960.gs dengan konsepnya yang membagi layout website menjadi 12 column atau bahkan 16 column. Nah di Bootstrap ini menggunakan 12 column, hal ini dapat dibaca pada dokumentasinya . Seperti yang dijelaskan dalam gambar berikut :

grid 9

Nah berikut ini contoh source code untuk membuat layout dengan dengan kolom kiri sebagai sidebar dan kanan untuk content :

<div class="row">
<div class="span4">.. this is sidebar ..</div>
<div class="span8">.. this is content ..</div>
</div>

Naah, lebih lengkapnya silahkan baca sendiri dokumentasinya deh. Klo ada pertanyaan tentang bootstrap silahan komen dibawah 🙂

*Inshallah pada postingan berikutnya akan sy jelaskan contoh kasus membuat template menggunakan Bootstrap.

Advertisements

2 comments

  1. dikombinasikan dengan less.css dan bumbu bumbu lainnya, semakin menambah pesona di mata client dan stress di mata developer.. 🙂

    Like

    1. semakin banyak bumbunya makin oke, harusnya developer juga makin bangga karena portfolionya makin bagus 😀

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: