Monday, April 16, 2012

Twitter Bootstrap Layout Tutorial

Pada kesempatan ini saya akan memberikan tutorial tentang Layout.
Pada tutorial ini saya menggunakan bootstrap twitter v2.0.2 dimana bootstrap pada versi ini telah mendukung responsibilitas dengan device yang kita gunakan.
Responsibilitas yang dimaksud disini dimana nanti layout akan melebar dan menciut sesuai dengan lebar browser ponsel ataupun tablet, jika tablet landscape maka lebar otomatis akan mengikuti dengan sendirinya.
Sebagai contoh anda bisa membuka web toko online saya yang sekarang sedang dalam masa pembuatan. LifestyleJogja.com jika anda telah membukanya, coba saja anda lebar ciutkan browser anda, akan tampil berbeda bukan?

Langsung saja sekarang menuju notepad++

Oh iya, supaya anda tidak bingung akan saya beri sedikit trik dalam belajar bootstrap. Buka folder hasil download bootstrap, Anda akan menemukan folder Docs, nah buat document html atau php anda disitu. nanti untuk tag html css dan javascriptnya tinggal samakan aja dengan contoh yang ada, misal fluid.html . Jadi jika anda bingung anda tinggal membuka source html contoh yang dibawakan, buka contoh tersebut dengan notepad++ juga dan cari (ctrl+F) yang akan anda buat..
Mungkin cara dari saya seperti itu akan sangat membantu.. ^^

Oke, yg pertama..
Untuk membuat web layout fixed pixel gunakan tag seperti dibawah ini, lebarnya sudah diatur dengan class=container *(class ini ada di bootstrap.css) disini container lebarnya 940 pixel, bisa anda ubah nilainya tapi harus disesuaikan dengan class yang lain juga :p
-------------------------------------------------------
<body>
<div class="container">
...
</div>
</body>
-------------------------------------------------------

silahkan buka hero.html di folder example, buka dengan notepad++.
disitu anda akan menemukan beberapa class yang ada.

untuk membuat fluid layout, yaitu layout yang flexible kanan kirinya. dengan celah diantara keduanya yang juga bisa semakin besar dan kecil tergantung browser.
dan berikut scriptnya.
-------------------------------------------------------
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
-------------------------------------------------------



lihat gambar tersebut, span2 dan span10 ada didalam class row fluid.
untuk membuat layout yang bersebelahan seperti itu anda tinggal masukkan div dengan ukuran berapa misal span2 span6 dan span2, asal jumlah jangan melebihi 12 karena ukurannya akan melebihi container nya itu sendiri.
anda bisa latihan mencoba-coba sendiri.

seperti biasa, tutorial selanjutnya akan saya sampaikan di postingan selanjutnya.
mungkin satu hari lagi.

1 komentar:

Anonymous said...

maaf mas sekedar saran aja, kalo bisa disertain juga penempatan file tutorialnya diletakan dimana or dalam folder apa terus disatuin apa gak sama file2 bawaan nya bootstrap, terus cara pemanggilan css/js/less nya juga kalo bisa diterangin ya. makasih :)

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More