Friday, April 13, 2012

Twitter Bootstrap Grid tutorial

Ini adalah tutorial pertama dalam menggunakan bootstrap.
sebelum masuk ke dalam tutorial ada beberapa hal yang harus kita persiapkan terlebih dahulu.
yang pertama adalah.
source code bootstrap. bisa anda download di Sini
dan yang kedua untuk memudahkan kita dalam bermain bisa anda gunakakan dreamweaver atau notepad++
dalam hal ini saya lebih suka menggunakan notepad++ yang bisa anda download di SINI

baik, setelah kedua file tadi sudah siap maka kita mulai belajar tentang grid

oke langsung saja..

grid adalah pembagian wilayah dalam sebuah halaman web.
dalam hal ini bootstrap twitter membagi dalam 12 responsive grid.
kenapa ada kata responsive?
karena pada versi 2.0.2 ini grid akan menyesuaikan pada lebar ukuran device, apabila device lebih kecil grid juga akan mengikuti.

sebelum menulis code nya, jangan lupa bootstrap mengharuskan kita menulis dalam HTML5 doctype,
--------------------------------------------------
<!DOCTYPE html>
<html lang="en">
...
</html>
--------------------------------------------------

Dalam membuat grid kita hanya tinggal memanggil class yang telah ada di bootstrap,
supaya lebih jelas bisa langsung melihat besar kolom nya di docs nya..

untuk membuat satu kolom grid (single column grid) kita bisa mengisi penuh 12 grid yang ada. berikut syntax nya.

--------------------------------------------------
<div class="row"><br>
<div class="span12"><br>
inline elements like span, block level elements like p, div.<br>
</div>
--------------------------------------------------


untuk membuat dua kolom drid (two column grid) bisa kita bagi dua dari 12 kolom, yaitu 6 kolom 6 kolom, berikut syntax nya.

--------------------------------------------------
<div class="row"><br>
<div class="span6"><br>
inline elements like span, block level elements like p, div.<br>
</div><br>
<div class="span6"><br>
inline elements like span, block level elements like p, div.<br>
</div>
--------------------------------------------------

dan syntax umumnya untuk menciptakan grid itu adalah sebagai berikut,
--------------------------------------------------
<div class="row">
<div class="spanx">
inline elements like span, block level elements like p, div.
</div>>
repeat <div class="spanx"> y times.
--------------------------------------------------

Dimana y adalah jumlah kolom yang ingin anda buat dan x adalah 12 / y.
y dan x harus bilangan bulat positif, maka nilai harus 1 sampai 12.


tutorial bootstrap selanjutnya akan saya sampaikan di postingan selanjutnya.

2 komentar:

Obat Anti Rokok said...

cepet update ya masbro!

anandezz said...

itu sudah update mas, sehari sekali kok. :D

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More