Grid System Pada Twitter Bootstrap

Oleh: Gilang Sonar Amanu

Kali ini saya masih ingin berbagi buat para pemula pengguna Twitter
Bootstrap. Masih ada yang suka bertanya pada saya, grid system di Twitter
bootstrap itu untuk apa? Grid system bisa dibilang sebagai pengaturan
ukuran tampilan dan tata letak desain website. Dalam suatu pembuatan
website, biasa nya kita akan menentukan berapa ukuran pages kita, berapa
jumlah kolom halaman website kita dan ...

Kali ini saya masih ingin berbagi buat para pemula pengguna Twitter Bootstrap. Masih ada yang
suka bertanya pada saya, grid system di Twitter bootstrap itu untuk apa?
Grid system bisa dibilang sebagai pengaturan ukuran tampilan dan tata letak desain website. Dalam
suatu pembuatan website, biasa nya kita akan menentukan berapa ukuran pages kita, berapa jumlah
kolom halaman website kita dan menentukan yang lainnya. Misalkan kita akan akan membuat suatu
tampilan website dengan 2 kolom. Maka kita akan mengatur ukuran lebar masing-masing kolom.
Berapa pixel ukuran kolom kiri dan kolom kanan yang akan dibuat? itulah yang dinamakan Grid
System. Dan ini berfungsi untuk meletakan content - content website yang akan anda muat nanti
nya.
Lalu bagaimana dengan Grid System yang terdapat pada Twitter Bootstrap ?
Yang pasti twitter bootstrap mempermudah anda untuk mengatur layout dan tata letak (Grid System)
tanpa harus anda mengukur sendiri. Karena Twitter Bootstrap telah menentukan
ukurannya.Ukuran-ukuran itu terdapat didalam file bootstrap.css dan kelebihan lainnya lagi, Twitter
Bootstrap juga membuat desain grid tersebut menjadi responsive terhadap beberapa gadget. Skrip
responsive tersebut, terdapat pada file bootstrap-responsive.css. 2 File tersebut bisa anda lihat jika
ingin dipelajari bagaimana cara pembuatannya.
Sekarang, Bagaimana Cara Menggunakan Grid System Pada Twitter Bootstrap ? Sebelum masuk ke
percobaan grid system ini, anda mengetahui dulu tentang Layout Pada Twitter Bootstrap
Disini saya menggunakan aturan Twiter Bootstrap versi terbaru, V.2.3.2
Perlu diketahui dahulu, bahwa grid yang disediakan oleh bootstrap, di bagi menjadi 2 bagian yaitu :
1. Grid System (Memiliki 9 Bagian / Potongan / Angka Grid)
2. Fluid Grid System (Memiliki 12 Bagian / Potongan / Angka Grid)
Seperti
yang
dapat
anda
lihat
di
link
berikut
http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

ini

Untuk mendeklarasikannya kita hanya perlu membuat Tag dengan attribute class="row" untuk Grid
System / class="row-fluid" untuk Fluid Grid System dan class="span[angka grid yang diinginkan]"
(misal: class="span8").

Catatan : Didalam class="row" , jumlah span harus pas dan tidak boleh lebih dari jumlah
angka grid yang dimiliki oleh setiap row. * Kecuali menggunakan tambahan class="offset"
& beberapa kondisi lain. Silahkan di baca keterangan lebih jelas nya di Dokumentasi
Twitter Bootstrapnya.

Sebagai contoh, anda akan membuat layout dengan 2 Kolom. Sidebar kiri dan Content di sebelah
kanan. Bisa di buat dengan cara berikut :
<div class="container-fluid" style="bacground-color: #333333"> <!-- Tag &
Attribute untuk Fluid Layout -->
<div class="row-fluid">
<div class="span4" style="background-color:#cccccc">
<!--Isi Sidebar-->
<h3>Ini Sidebar</h3>
</div>
<div class="span8" style="background-color:#cccccc">
<!--Isi Body-->
<h1>
Belajar Bootstrap Bersama JagoCoding.com
</h1>
<h6>
<a href="https://www.facebook.com/gilang.sonar">GilangSonar</a>
</h6>
</div>
</div>
</div>
Contoh diatas, saya menggunakan fluid grid dan span4 dan span8, jika di jumlah 4+8 = 12. artinya
sesuai. Jika saya rubah, sidebar kiri menggunakan class="span6", maka sebelah kanan juga harus
saya rubah menjadi class="span6", agar total angka grid nya menjadi 12. Hal ini mempengaruhi segi
tampilan, tata letak dan juga responsive desain nya. Jadi sebisa mungkin, jika ingin membuat suatu
website menggunakan twitter bootstrap, aturan Grid System nya jangan sampai di langgar.
Okee.. kurang lebih seperti itu contoh penggunaan Grid System pada Twitter Bootstrap. Silahkan
mencoba, lalu dimodifikasi kembali dan di buat sesuka hati anda. Terima Kasih , Semoga Bermanfaat
dan sampai ketemu di tutorial berikutnya..
- Gilang Sonar -

Tentang Penulis
Gilang Sonar Amanu
Do It Do It Do It