Cara desain layout website dengan grid system bootstrap

 

DESIGN LAYOUT WEBSITE  DENGAN GRID SYSTEM BOOTSTAP

Bootstrap menggunakan Grid System untuk menghasilkan halaman website yang responsif. Konsep design layout website menggunakan grid system Bootstrap yaitu dengan cara membagi sebuah halaman website menjadi beberapa baris dan kolom. jumlah kolom sebuah halaman website sudah ditentukan dengan maksimal 12 kolom(grid). penentuan jumlah maksimal grid yang sudah dibakukan inilah yang membuat website yang dibangun menggunakan bootstrap akan secara otomatis menyesuaikan dengan lebar ataupun resolusi layar dari perangkat yang mengakses.

1. Aturan Mendesain Layout dengan Grid System

Grid system pada bootstrap tidak jauh berbeda dengan desain website menggunakan table pada HTML. dan HTML, dalam sebuah table <table> terdapat beberapa garis <tr> dan didalam sebuah garis dapat dibagi menjadi beberapa kolom (cell) <td>. Begitu juga dengan bootstrap, bedanya di bootstrap menggunakan class <container>, <row> dan <col>. dalam penerapanya, setiap membuat table di HTML maka kita terlebi dahulu memulai dengan tag <table>, di bootstrap di mulai dengan class <container>. Ketika membuat baris dalam sebuah tabel, dimulai dengan <tr>, di Bootstrap dimulai dengan class <row>, dan setiap membuat kolom di HTML menggunakan tag <td> sedangkan di bootstrap menggunakan class <col>.
Ketika sudah memahami cara membuat tabel di HTML maka mendesain layout menggunakan grid system Bootstrap juka akan semakin mudah. Lebih jelasnya, berikut beberapa hal yang harus dipahami sebelum mulai mendesain layout website menggunakan grid system Bootstrap;

1. Class baris <row> harus diletakan dalam class <container> terdapat dua class container, yaitu <container> dan <container-fluid>. Class <container> digunakan untuk membuat layout dengan lebar layar normal (fixed width) dan biasanya class ini digunakan untuk isi atau content website. Class <container-fluid> digunakan untuk membuat layout dengan lebar layar penuh (full-width). Class ini biasa digunakan untuk banner atas, navbar (opsional), header, ataupun footer sebuah website.
2. Class <col> harus berada di atas class <row>. jadi, setiap kita ingin membuat sebuah kolom maka terlebih dahulu harus membuat baris. Class <col> ini sudah dibakukan12 grid dan dapat digunakan diempat jenis resolusi perangkat yang berbeda, yaitu xs(extral small), sm(small), md(medium), dan Ig(large).
3. Content website ditempatkan dalam class <col> atau disebut dengan Grid.
Pengaturan layout website menggunakan grid system Bootstrap dapat dilihat pada kode dan gambar dibawah ini. Class <row> dan <col> berada di dalam class <container> dan class <col> berada dalam class <row>.

2. Dukungan Media pada Grid System Bootstrap

Seperti yang sudah disampaikan sebelum mengenai class col, bahwa Bootstrap mendukung empat jenis media dan masing-masing jenis media sudah dibakukan menjadi 12 Grid. Keempat media tersebut adalah:

1. XS (Extral Small)

Class yang digunakan untuk mendukung perangkat smartphone dengan lebar/resolusi perangkat dibawah 768 px. penulis classnya col-xs-xx*.

2. sm (Small)

Class yang digunakan untuk perangkat yang berupa tablet dengan lebar layar antara 768 px hingga 991px. penulisan classnya col-sm-xx*.

3. MD (Medium)

Class yang digunakan untuk perangkat desktop dengan lebar layar 992 px hingga 1199 px. penulisan classnya col-md-xx*.

4. LG (Large)

Class yang digunakan untuk mendukung perangkat desktop dengan lebar layar di atas 1200 px. penulisan classnya col-lg-xx*.
xx* dalam class di atas maksutnya jumlah kolom, bernilai 1 sampai 12. Contoh: .col-xs-12

3. Merancang Layout Website dengan Grid System

Sebagai contoh penggunaan grid system Bootstrap dalam merancang layout web silakan perhatikan gambar dibawah. Layout dibawah terdapat lima baris. Pada baris baris pertama hanya terdapat satu kolom (full) Menggunakan 12 grid sehingga class yang digunakan adalah col-md-12. pada baris kedua, halaman dibagi menjadi 12 grid sehingga menggunakan class col-md-1 sebanyak 12 kali. Selanjutnya, pada baris ketiga, kolom dibagi 2/3 (8 grid) sebelah kiri dan 1/3 (4 grid) sebelah kanan sehingga menggunakan class col-md-8 class col-md-4.
jadi, ketika kita ingin membagi halaman menjadi dua bagian yang sama sama menggunakan 6 grid (baris kelima pada gambar) maka gunakan class col-md-6 dan col-md-6. hal yang harus diperhatikan dalam mendesain layout adalah jumlah kolom (grid) tidak lebih dari 12.

Berikut adalah contoh code HTML yang menggunakan grid system Bootstrap untuk membuat layout seperti gambar di atas.

Simpan code diatas dan lihat hasilnya di browser anda. Maximize Serta ubah ukuran lebar browser untuk memastikan tampilan responsif yang langsung menyesuaikan dengan resolusi perangkat yang mengakses ( Smartphone, table, ataupun desktop ).

4. Offsetting Layout pada Grid System

Selanjutnya, seperti contoh diatas, jika kita ingin mendesain layout website dengan membagi tiga kolom pada sebuah halaman kita tinggal menggunkan <div class="col-md4"> Sebanyak tiga kali. Nah, bagaimana jika kita hanya ingin menggunakan kolom yang tengah saja atau kolom kiri kanan tidak digunakan? Contohnya seperti gambar berikut.

Jika kita ingin melangkahi atau tidak menggunakan kolom pada Bootstrap kita gunakan class offset. Contoh penggunaanya untuk membuat layout seperti gambar diatas adalah seperti kode HTML beikut :

1. Membuat layout baris yang pertama dimulai dari baris kode 20 sampai 30. Halaman dibagi 3 kolom yang sama maka kita gunakan 4 grid dengan menggunakan class col-md-4 sebanyak tiga kali.
2. Membuat layout baris yang kedua dimulai dari baris kode 31 sampai 35. Class yang digunakan adalah col-md-4 offset-md-4. Artinya menggunakan kolom 4 grid dengan melangkahi/tidak menggunakan 4 grid yang pertama.
3. Membuat layout baris yang ketiga dimulai dari baris kode 36 sampai 43. Kolom pertama menggunakan class col-md-4 offset-md-4. Fungsunya sama seperti untuk membuat layout pada baris sebelumnya ,  tetapi pada kolom kedua terdapat class col-md-4 sehingga hasil akhirnya adalah membagi halaman menjadi tiga kolom, tetapi tidak menggunakan kolom yang pertama.
4. Baris selanjutnya pada baris kode44 sampai 51. membagi halaman menjadi tiga kolom yang sama tetapi tidak menggunakan kolom yang kedua (kolom yang di tengah). Kita gunakan class col-md-4 pada kolom yang pertama dan class col-md-4 offset-md-4 pada kolom yang kedua.
5. Baris selanjutnya pada layout menggunakan 6 grid dan menyisakan 3 grid pada kiri dan kanan halaman. Class yang digunakan adalah col-md-6 offset-md-3.