Bootstrap Indonesia Web Desain

Tutorial Bootstrap 2: Mengenal system Grid

Tutorial Bootstrap 2: Mengenal system Grid Mei 21, 2015Leave a comment

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

belajar Bootstrap, mengenal bootstrap, tutorial desain web, tutorial bootstrap bahasa Indonesia

[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:

HUMAYRAA merupakan salah satu bagian dari web Bestariweb Studio. HUMAYRAA.COM kami khususkan untuk berbagi pengalaman dan tutorial kepada seluruh pembaca yang berminat menggeluti dunia IT dan desain. Kunjungi pula web kami yang lainnya: Bestariweb Studio | BestariwebHost

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *