Tutorial Bootstrap 2: Mengenal system Grid

Tutorial Bootstrap 2: Mengenal system Grid

resellerhosting murah, ceap reseller hosting

Dalam tutorial ini kita akan belajar mengenal system grid pada bootstrap. Bagaimana cara menggunakannya dan bagaimaba cara customisasi grid di device yang berbeda.

Tools untuk Develop Bootstrap 4 Theme
Tutorial Bootstrap 3: System Typography Bootstrap
Tutorial Bootsrtap 1: Mengenal Bootstrap

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

[pastacode lang=”markup” message=”” highlight=”” provider=”manual”]

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

[/pastacode]

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

[pastacode lang=”markup” message=”” highlight=”” provider=”manual”]


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

[/pastacode]

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:

[pastacode lang=”markup” message=”” highlight=”” provider=”manual”]


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

[/pastacode]
semoga bermanfaat

[wp_ad_camp_1]
Loading...
loading...

COMMENTS

WORDPRESS: 0
DISQUS: 0