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 :
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~
<!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 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.
<header>
<div class="container">
<div class="row">
<div class="col-sm-4"> <!--4 GRID UNTUK LAYAR
SMALL (>=768PX)-->
<a href="" class="judul"><h1>Judul
Website</h1></a>
</div>
<div class="col-sm-8"><!--8 GRID UNTUK LAYAR SMALL
(>=768PX)-->
<nav>
<ul class="nav nav-pills
nav-justified"> <!--CLASS BAWAAN YG DISEDIAIN BOOTSTRAP,,-->
<li><a
href="">Home</a></li>
<li><a
href="">Product</a></li>
<li><a
href="">Article</a></li>
<li><a href="">Contact
Us</a></li>
</ul>
</nav>
</div>
</div>
</div>
</header>
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
Semoga tutorial ini dapat bermanfaat untuk kita semua,, mohon maaf kalau masih kurang dapat
dipahami,, komentar, masukan, pertanyaan, dan saran saya terima~ terima kasih banyak atas
perhatiannya..
Tentang Penulis
Christian Rosandhy
Saya adalah seorang penggemar komputer, terutama di bagian CSS atau
PHP.. sekalipun saya belum jago-jago amat, setidaknya sekarang saya
sedang berusaha belajar sebanyak-banyaknya.