Mengenal Sistem Grid Bootstrap Dalam Mendesain Layout Website

grid bootstrap gb1


Hello sob,

Sebelumnya sudah perkenalan dengan Bootstrap melalui artikel Mengenal Framework CSS Bootstrap untuk Pemula , berikutnya kita akan bahas bagaimana mendesain layout website dengan system grid yang ada di bootstrap.

Apa itu System Grid Boostrap?

Untuk mendesain layout website, bootstrap menyediakan fitur yang dinamakan System Grid, dimana membagi lebar layar menjadi 12 Kolom (Grid). Dimana jika sobat memberikan nilai 13 pada content sobat maka secara otomatis content melebihi 1 layar (12 kolom), dan otomatis akan di wrap ke baris atau paragraf berikutnya.

Contoh ilustrasi: jika sobat ingin mendesain 1 layar terdiri dari 3 kolom, maka anda harus membagi 12 : 3 = 4, dimana setiap elemen konten anda untuk grid system ,sobat beri nilai 4

Penerapan System Grid Pada Website

Dengan system grid ini, sobat dapat mengatur layout yang sesuai untuk beragam perangkat saat website sobat diakses, atau lebih umum dikenal website responsive. Dan untuk mengatur ini sobat menggunakan prefix yang berbeda untuk masing-masing pengaturan.
Prefix yang dapat anda gunakan adalah sbb:
  • xs = prefix Extra Small, untuk layar dengan ukuran <576px atau biasa untuk handphone layar kecil.
  • sm = Prefix Small, untuk layar dengan ukuran >576 px ( biasa untuk tablet atau smartphone layar lebar).
  • md = Prefix Medium, untuk layar dengan ukuran >768 px (untuk komputer atau laptop).
  • lg = Prefix Large, untuk layar dengan ukuran >960 px (untuk layar komputer atau laptop yang berlayar lebar).
Contoh penggunaannya adalah sebagai berikut:

<div class=”col-md-4” > konten anda </div >

Penulisan diatas, konten anda saat diakses dengan computer/laptop(medium) akan ditampilkan dengan ukuran 4 kolom ( 1/3 layar lebarnya).

<div class=”col-sm-4 col-md-4” > konten anda </div >

Penulisan diatas adalah pengaturan untuk 2 jenis layar, yakni saat diakses dengan perangkat tablet/smartphone maka konten akan ditampilkan penuh 1 layar lebarnya (12 kolom), sedangkan jika diakses dengan perangkat laptop/computer (medium) maka akan ditampilkan sebesar 4 kolom. 

Aturan dan struktur dasar sistem Grid Boostrap

  • Elemen row harus ditempatkan di dalam elemen container, sebelum anda membuat grid dengan menuliskan <div class="container" > .....</div>
  • Untuk membuat kelompok kolom secara horizontal maka harus menggunakan elemen row dengan menuliskan <div class="row"> ....</div>
  • Konten hanya boleh ditempatkan didalam kolom , dan kolom hanya boleh ditempatkan di dalam baris (row) contoh: <div class="row"> <div class="col-md-4"> <p>konten</p></div></div>
  • tag pembuka selalu diawali dengan <div ...elemen> dan tag penutup </div>

Contoh Latihan 3 kolom layout




Dan hasil dari penerapan kode diatas seperti pada gambar.1 dan gambar.2 dibawah ini:


Gambar1 

Gambar.1 menampilkan hasil dari pengaturan grid bootstrap saat diakses di layar komputer / laptop (prefix md bekerja)



Gambar.2

Gambar.2 saat diakses dengan perangkat yang lebih kecil /smartphone , diatas nampak terlihat dimana 2 konten tidak diatur pengaturan di small media maka secara default akan berubah menjadi 12 kolom, sedangkan untuk konten ketiga diatur menjadi 4 kolom dengan pengaturan col-sm-4 (4 kolom dari lebar layar smartphone).

Subscribe to receive free email updates:

0 Response to "Mengenal Sistem Grid Bootstrap Dalam Mendesain Layout Website"

Post a Comment