Jagocoding.com - Responsive Layout Dengan Bootstrap Part 2

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

Salam jaco,, sebagai lanjutan dari tutorial Membuat Layout Responsivedengan Container Bootstrap, kali ini kita akan mencoba membuat layoutresponsive dengan grid sistem. Kalau di tutorial sebelumnya itu adalahdasar untuk membuat lebar layout website yang otomatis responsive, kaliini kita akan bermain dengan grid yang menyesuaikan diri untuk ukuranlayar 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 tutorialsebelumnya itu adalah dasar untuk membuat lebar layout website yang otomatis responsive, kali inikita 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 4jenis :

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 layarlebih lebar lagi ntar gimana? Ga masalah.. Bootstrap itu pinter kok.. Ntar yang layar lebih lebar bisamengatur diri sendiri dgn tetap rapi.. KECUALI, kalau kita pengen buat grid khusus untuk layarlebar.. 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~

<!doctype html><html lang="en">

<head> <meta charset="UTF-8"> <title>Latihan Layout Bootstrap Part 2</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/css_part2.css"></head><body>

<header> <div class="container">

</div> </header> <div id="slideshow"> <div class="container">

</div> </div> <div id="content"> <div class="container">

</div> </div> <footer> <div class="container">

</div> </footer>

</body></html>

Nah,, bagian responsive akan segera kita mulai sekarang~ Pertama-tama, di bagian header kitaakan mengisi 2 bagian. Yaitu judul website disebelah kiri, dan navigasi di sebelah kanan untuk layarlebar (>=768px). Akan tetapi,, untuk layar kecil akan kita atur supaya judul dan navigasi menjadiitem yang menumpuk kebawah.

Sebelum lebih lanjut,, kita harus tau dulu kalau Bootstrap menyediakan jumlah grid dalam 1 barissebanyak 12 grid. Kalau begitu, ketika kita ingin membagi 1 baris menjadi 2 bagian (judul dannavigasi),, 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 gridnavigasi nggak masalah,, asalkan jumlah 1 baris tsb PAS 12 GRID.

<header> <div class="container"> <div class="row"> <div class="col-sm-4">  <a href="" class="judul"><h1>JudulWebsite</h1></a>

</div> <div class="col-sm-8"> <nav> <ul class="nav nav-pillsnav-justified">  <li><ahref="">Home</a></li> <li><ahref="">Product</a></li> <li><ahref="">Article</a></li> <li><a href="">ContactUs</a></li> </ul> </nav> </div> </div> </div></header>

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 juganyediain komponen lain seperti button, navigasi, form, alert, dan sebagainya.. Sehingga kita cumaperlu sedikit menghafal nama class yang udah disediain bootstrap aja untuk makainya.. Dan padaakhirnya,, CSS hanya kita pakai utk nambah-nambahin sedikit background, warna, atau font sesuaikeinginan kita saja.. Tampilannya sampai sini sudah seperti ini nih :

Kalau lebar layarnya kita kecilin pun hasilnya juga sudah rapi.. secara bootstrap bener-bener pintersih~ bagian slideshow kita lewatin aja, karena di tutorial ini saya nggak bikin slideshow.. kasi ajabackground 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~

<div id="content"> <div class="container"> <div class="row"> <div class="col-sm-6"> Lorem ipsum dolor sit amet, consecteturadipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat. Duis aute ...... </div> <div class="col-sm-6"> Lorem ipsum dolor sit amet, consecteturadipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpaqui officia deserunt mollit anim id est laborum. </div> </div> </div></div>

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 <div class="col-sm-6"> yang sudah ada tadi.. Aturanpenamaan gridnya juga sama, seperti ini :

col-<kode lebar>-<jumlah grid>

Anggaplah kode lebar yang ingin kita pakai adalah utk layar large (-lg-), maka kodenya akan menjadiseperti ini :

<div id="content"> <div class="container"> <div class="row"> <div class="col-sm-6 col-lg-8"> Lorem ipsum dolor sit amet, consecteturadipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat. Duis aute ...... </div> <div class="col-sm-6 col-lg-4"> Lorem ipsum dolor sit amet, consecteturadipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore

magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inreprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpaqui officia deserunt mollit anim id est laborum. </div> </div> </div></div>

Dan hasil finalnya adalah seperti ini..

Semoga tutorial ini dapat bermanfaat untuk kita semua,, mohon maaf kalau masih kurang dapatdipahami,, komentar, masukan, pertanyaan, dan saran saya terima~ terima kasih banyak atasperhatiannya..

Tentang Penulis

Christian RosandhySaya adalah seorang penggemar komputer, terutama di bagian CSS atauPHP.. sekalipun saya belum jago-jago amat, setidaknya sekarang sayasedang berusaha belajar sebanyak-banyaknya.

Documents

Jagocoding.com - Responsive Layout Dengan Bootstrap Part 2