[row][col span=”1/2″][wp_ad_camp_2][/col][col span=”1/2″]

System grid dalam sebuah desain web adalah sebuah cara atau metode pembagian kolom di sebuah halaman web dengan menggunakan class. Pembagian kolom ini dimaksudkan agar web menjadi responsive

[/col][/row]

[wp_ad_camp_1]

Bootstrap memiliki 12 grid yang bila kita gambarkan menjadi kolom adalah sebagai berikut:

span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 1
span 2
span 2
span 2
span 2
span 2
span 2
span 3
span 4
span 5
span 6
span 2
span 4
span 6
span 6
span 4
span 8
span 12

Bootstrap Grid Classes

Pengelompokan Class Grid dalam Bootstrap

Bootstrap menggunakan beberapa nama class untuk digunakan di perangkat / devices yang berbeda:

  • col-xs-* (untuk smartphones)
  • col-sm-* (untuk tablets)
  • col-md-* (untuk desktops)
  • col-lg-* (untuk desktops besar)

tanda asterik (*) menyatakan lebar kolom untuk di tampilkan di device yang bersangkutan.

Strukrur dasar system Grid Bootstrap

[wp_ad_camp_2]

Untuk membuat system kolom / system grid pada bootstrap, dimulai dengan <div class="row"> sebagai berikut:

<div class="row">
  <div class="col-dd-*"></div>
</div>
<div class="row">
  <div class="col-dd-*"></div>
  <div class="col-dd-*"></div>
  <div class="col-dd-*"></div>
</div>
<div class="row">
  ...
</div>

dd adalah device (misal md untuk desktop) sedangkan * adalah lebar grid.
Contoh untuk membuat 3 kolom yang serupa (sama lebar) digunakan kode sebagai berikut:

<div class="row">
  <div class="col-md-4">isi content disini</div>
  <div class="col-md-4">isi content disini</div>
  <div class="col-md-4">isi content disini</div>
</div>

Penggunanan nama device bisa dikombinasikan dalam satu kolom. Contoh untuk membuat 6 kolom serupa di desktop, namun tampil menjadi 3 kolom di tablet. kodenya sebagai berikut:

<div class="row">
  <div class="col-md-2 col-sm-4">isi content disini</div>
  <div class="col-md-2 col-sm-4">isi content disini</div>
  <div class="col-md-2 col-sm-4">isi content disini</div>
  <div class="col-md-2 col-sm-4">isi content disini</div>
  <div class="col-md-2 col-sm-4">isi content disini</div>
  <div class="col-md-2 col-sm-4">isi content disini</div>
</div>

semoga bermanfaat

[wp_ad_camp_1]

Incoming search terms:

(Visited 708 times, 1 visits today)