Responsive Layout dengan Bootstrap [Part 2] Oleh: Christian Rosandhy

Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat layout responsive dengan grid sistem. Kalau di tutorial sebelumnya itu adalah dasar untuk membuat lebar layout website yang otomatis responsive, kali ini kita akan bermain dengan grid yang menyesuaikan diri untuk ukuran layar yang berbeda-beda.

Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsive dengan Container Bootstrap, kali ini kita akan mencoba membuat layout responsive dengan grid sistem. Kalau di tutorial sebelumnya itu adalah dasar untuk membuat lebar layout website yang otomatis responsive, kali ini kita akan bermain dengan grid yang menyesuaikan diri untuk ukuran layar yang berbeda-beda. Layout yang akan kita buat kira-kira seperti ini :

Sebelumnya, sebagai sedikit gambaran buat kita,, Bootstrap membagi lebar layar monitor menjadi 4 jenis : ● ● ● ●

Extra Small (-xs-) : < 768px Small (-sm-) : 768px - 991px Medium (-md-) : 992px - 1199px Large (-lg-) : > 1200px

Sehingga, dalam contoh di tutorial ini, saya hanya akan bermain di lebar monitor Extra Small (-xs-)dan Small (-sm-). Kolom small (-sm-) itu kan batasnya cuma sampai 991px tuh, terus utk layar lebih lebar lagi ntar gimana? Ga masalah.. Bootstrap itu pinter kok.. Ntar yang layar lebih lebar bisa mengatur diri sendiri dgn tetap rapi.. KECUALI, kalau kita pengen buat grid khusus untuk layar lebar.. Ntar pas dicoba-coba ngerti sendiri kok maksudnya.. Hhehe~ Yuk kita ke HTML dulu seperti biasa~ Kita bikin layout yang dibagi jadi 4 bagian : Header, Slideshow, Content, dan Footer. Masing-masing layout diberikan class .container didalamnya~

<meta charset="UTF-8">

Nah,, bagian responsive akan segera kita mulai sekarang~ Pertama-tama, di bagian header kita akan mengisi 2 bagian. Yaitu judul website disebelah kiri, dan navigasi di sebelah kanan untuk layar lebar (>=768px). Akan tetapi,, untuk layar kecil akan kita atur supaya judul dan navigasi menjadi item yang menumpuk kebawah. Sebelum lebih lanjut,, kita harus tau dulu kalau Bootstrap menyediakan jumlah grid dalam 1 baris sebanyak 12 grid. Kalau begitu, ketika kita ingin membagi 1 baris menjadi 2 bagian (judul dan navigasi),, kita harus membagi 12 grid tersebut untuk 2 objek tersebut.. Pembagiannya sih terserah,, boleh 4 grid judul + 8 grid navigasi,, boleh 5 grid judul + 7 grid navigasi, atau 6 grid judul + 6 grid navigasi nggak masalah,, asalkan jumlah 1 baris tsb PAS 12 GRID.

Judul Website

Kasi CSS dikit yuk biar lebih rapi~ *{margin:0px auto;} body{background:#f3f3f3; font-family:calibri, verdana, sans-serif; line-height:1.5em;} /*layout*/ header{background:#e7e7e7; padding:10px; border-bottom:4px solid #22a7a7;} header h1{line-height:1em; margin:auto;} Wuih,, tumben-tumbenan CSSnya cuma dikit? Ya jelas,, bootstrap selain nyediain sistem grid juga nyediain komponen lain seperti button, navigasi, form, alert, dan sebagainya.. Sehingga kita cuma perlu sedikit menghafal nama class yang udah disediain bootstrap aja untuk makainya.. Dan pada akhirnya,, CSS hanya kita pakai utk nambah-nambahin sedikit background, warna, atau font sesuai keinginan kita saja.. Tampilannya sampai sini sudah seperti ini nih :

Kalau lebar layarnya kita kecilin pun hasilnya juga sudah rapi.. secara bootstrap bener-bener pinter sih~ bagian slideshow kita lewatin aja, karena di tutorial ini saya nggak bikin slideshow.. kasi aja background sama height biar keliatan berisi~ #slideshow{background:#444; height:400px;}

Sekarang,, di dalam layer content ada 2 jenis baris nih.. ada yg 2 kolom, ada yg 1 kolom.. Caranya

tetep sama kok~ Sudah terbagi 2 kolom bukan? Nah.. Misalkan kita ingin untuk komputer dgn layar paling lebar (>1200px) pembagian gridnya bukan 6 - 6 seperti contoh diatas.. tapi grid 8 - 4.. Gimana caranya? Caranya simpel,, cukup tambahin class baru di