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.
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 LayoutPada 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 :
Grid System (Memiliki 9 Bagian / Potongan / Angka Grid)
Fluid Grid System (Memiliki 12 Bagian / Potongan / Angka Grid)
Seperti yang dapat anda lihat di link berikut ini : http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
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 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<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
</h1>
<h6>
<a href="http://cumangoding.blogspot.com ">Cuma Ngoding</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
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
ConversionConversion EmoticonEmoticon