Belajar Boostrap Dasar Part 3 : Memahami Grid dan Layout di Bootstrap

kamis 8 november 2016

Apa itu Grid System ?

Grid adalh struktur dau dimensi yang terdiri dari sumbu horisontal dan sumbu vertikal , sehingga akan tersusun kolom dan baris . system drid ini pada awalnya digunakan dalam duni desain percetakan .

Dalam dunia desain web , Grid system merupakan metode yang efektif untuk menghasilkan layout yang konsisten dengan menggunakan HTML dan CSS .sehingga dalam desain web , grid system merupakan komponen penting.

Ada beberapa macam tool ataupun frameword untuk menghasilkan layout berbasis Grid yang sudah beredar dan banyak digunakan saat ini , diantaranya :

Gumby (http://gumbyframework.com) yang merupakan framework berbasis 12 atau 16 kolom dengan lebar 960px.
Golden Grid (http://goldengridsystem.com) yang merupakan framework berbasis 12 atau 16 kolom dengan lebar 970px.
Blueprint (http://blueprintcss.org) , statik CSS framework.
960 Grid System (http://960.gs/) , CSS framework dengan 12 atau 16 kolom lebar 960px .

Grid System pada Bootstrap

Grid system dalam bootstarp versi 3.3.5 dibentuk oleh tiga komponen utama yaitu container , baris dan kolom . Komponen paling luar adalah container , di dalam container terdapat satu atau lebih baris dan di setiap baris ada satu atau lebih kolom .

di dalam kolom di letakkan content jarak antara satu content dengan content di kolom sebelahnya (gutter ) adalah 30px .

jika ingin lebih jelas lihat blog ini Membuat Container , Membuat Baris , Membuat Kolom dan Menerapkan Konsep Mobile First

Dan sekarang saya akan menjealaskan mengeser kolom ke kanan (offseting column).
karena Bootstrap versi 3.3.5 mempunyai empat class untuk mengatur lebar kolom , maka juga ada empat class untuk pengaturan offset kolom tersebut yaitu :

Class .col-xs-x , maka class offset-nya .col-xs-offset-x
Class .col-sm-x , maka class offset-nya .col-sm-offset-x
Class .col-md-x , maka class offset-nya .col-md-offset-x
Class .col-lg-x , maka class offset-nya .col-lg-offset-x

penjelasan : huruf x menyataka jarak pergeseran kolom tersebut, kalau x=1 maka bergeser sebanyak 1 kolom ke kanan , kalau x=2 maka bergeser sebanyak 2 kolom ke kanan, dan seterusnya .

dan Perhatikan Script berikut ini :

<div class="row" style="color: white">
<div class="col-xs-1" style="background-color: red"><p>1</p></div>
<div class="col-xs-1" style="background-color: blue"><p>1</p></div>
<div class="col-xs-1" style="background-color: red"><p>1</p></div>
<div class="col-xs-1" style="background-color: blue"><p>1</p></div>
<div class="col-xs-1" style="background-color: red"><p>1</p></div>
<div class="col-xs-1" style="background-color: blue"><p>1</p></div>
<div class="col-xs-1" style="background-color: red"><p>1</p></div>
<div class="col-xs-1" style="background-color: blue"><p>1</p></div>
<div class="col-xs-1" style="background-color: red"><p>1</p></div>
<div class="col-xs-1" style="background-color: blue"><p>1</p></div>
<div class="col-xs-1" style="background-color: red"><p>1</p></div>
<div class="col-xs-1" style="background-color: blue"><p>1</p></div>
</div>
<br>
<div class="row" style="color: white">
<div class="col-xs-1" style="background-color: blue"><p>col 1</p></div>
<div class="col-xs-1" style="background-color: red"><p>col 2</p></div>
<div class="col-xs-1 col-xs-offset-1" style="background-color: red"><p>col 3</p></div>
</div>
<br>
<div class="row" style="color: white">
<div class="col-sm-1" style="background-color: red"><p>col 1</p></div>
<div class="col-sm-2" style="background-color: blue"><p>col 2</p></div>
<div class="col-sm-2 col-sm-offset-2" style="background-color: red"><p>col 3</p></div>
</div>
<br>
<div class="row" style="color: white">
<div class="col-md-4" style="background-color: red"><p>.col-md-4</p></div>
<div class="col-md-4 col-md-offset-4" style="background-color: blue"><p>.col-md-offset-4</p></div>
</div>
<br>
<div class="row" style="color: white">
<div class="col-md-3 col-md-offset-3" style="background-color: blue"><p>.col-md-offset-3 .col-md-offset-3</p></div>
<div class="col-md-3 col-md-offset-3" style="background-color: red"><p>.col-md-offset-3 .col-md-offset-3</p></div>
</div>
<br>
<div class="row" style="color: white">
<div class="col-md-6 col-md-offset-3" style="background-color: red"><p>.col-md-6 .col-md-offset-3</p></div>
</div>

penjelasan script :
agar tau perbedanannya .col-xs-1 , .col-sm-1 , .col-md-4 , .col-md-6 karena itu saya gunakan script style="background-color: red" untuk membedakan tag mana yang mengunkan class tersebut , jika tidak maka itu tidak di tampilkan apa-apa.

dan tampilan di web browsernya adalah :

pada gambar di atas bahwa pada baris ke 2 kolom 3 bergeser ke kanan sejauh 1 kolom , sedangkan di baris ke tiga , kolom 3 bergeser ke kanan sejauh 2 kolom , dan seterusnya .

Percabangan (Nesting) kolom

untuk melakukan pencabangan beberapa kolom dalam sebuah kolom , caranya adalah dengan menambahkan satu baris kelas .row baru dalam kolom tersebut , dimana jumlah kolom di baris level 2 tersebut tidak melebihi panjang kolom induknya di level 1.

Lihatlah script di bawah ini :

<div class="container" style="background-color: red ;color: white">
<div class="row" style="background-color: white">
<div class="col-sm-6" style="background-color: green">
<p>Level 1 : .col-sm-6</p>
<div class="row" style="background-color: gold">
<div class="col-xs-8 col-sm-6" style="background-color: red">
Level 2 : .col-xs-8 .col-sm-6
</div>
</div>
</div>
<div class="col-sm-4 col-sm-offset-1" style="background-color: blue">
<p>Level 1 : .col-sm-2 .col-sm-2-offset-1</p>
</div>
</div>
</div>