Pada artikel kali ini kita akan merancang tampilan responsive design yang sederhana menggunakan grid dari Bootstrap. Kita akan merancang tampilan pada desktop, tablet dan smartphone.
1. Untuk tampilan desktop kita ingin merancang seperti berikut ini:
Untuk header dan footer akan terlihat sama di semua device, sehingga kita akan focus pada tampilan Post 1 sampai dengan Post 6.
Pada tampilan desktop di atas kita ingin membagi Post 1 sampai dengan Post 6 menjadi 3 kolom per baris. Setiap baris maksimal 12 kolom sehingga panjang gridnya adalah 12:3=4 kolom. Dengan demikian untuk Post 1 sampai dengan Post 6 akan menggunakan class untuk tampilan medium dengan panjang 4 kolom, dan class yang dipakai adalah col-md-4. Dengan demikian div untuk Post 1 sampai dengan Post 6 mempunyai format seperti berikut ini:
<div class=”col-md-4″>
2. Untuk tampilan tablet kita ingin merancang tampilan seperti ini:
Pada tampilan tablet di atas kita ingin membagi Post 1 sampai dengan Post 6 menjadi 2 kolom per baris. Setiap baris maksimal 12 kolom sehingga panjang per grid adalah 12:2=6 kolom. Dengan demikian untuk Post 1 sampai dengan Post 6 akan menggunakan class untuk tampilan small dengan panjang 6 kolom, dan class yang dipakai adalah col-sm-6. Dengan demikian div untuk Post 1 sampai dengan Post 6 mempunyai format seperti berikut ini:
<div class=”col-sm-6″>
3. Untuk tampilan smartphone kita merancang tampilan seperti ini:
Pada tampilan smarphone di atas kita ingin masing-masing post dari Post 1 sampai dengan Post 6 menggunakan setiap baris. Setiap baris maksimal 12 kolom sehingga panjang gridnya adalah 12:1=12 kolom. Dengan demikian untuk Post 1 sampai dengan Post 6 akan menggunakan class untuk tampilan extra small dengan panjang 12 kolom, dan class yang dipakai adalah col-xs-12. Dengan demikian div untuk Post 1 sampai dengan Post 6 mempunyai format seperti berikut ini:
<div class=”col-xs-12″>.
4. Gabungan Class
Ketiga div di atas digabung dalam div menjadi:
<div class=”col-md-4 col-sm-6 col-xs-12″>
Tampilan dapat dilihat diakses pada http://aris.proweb.asia/dist/coba08.html .
Source code untuk artikel ini adalah:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title>Responsive Design Basic</title>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12 text-center”>
<h1>Tagline websiteku</h1>
</div>
</div><!– /row –>
<hr/>
<div class=”row”>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<h3>Post 1</h3>
<p>Spanjang jalan Tuhan pimpin itu cukup bagiku. RahmatNya selalu serta dan melindungi daku</p>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<h3>Post 2</h3>
<p>Penghiburan dari surga jika Tuhan sertaku. Kar’na tentulah semua diperbuatNya baik itu</p>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<h3>Post 3</h3>
<p>Spanjang jalan Tuhan pimpin meski jalanku tak s’nang . Dibri rahmat dalam ujian roti hidup tak kurang</p>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<h3>Post 4</h3>
<p>Meski ku m’rasa haus penat dan jiwa menanggung b’rat. Dari batu air memancar terbitlah kegirangan</p>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<h3>Post 5</h3>
<p>S’panjang jalan Tuhan pimpin kasihNya amat penuh . Dijanjikan perhentian yang indah amat teguh.</p>
</div>
<div class=”col-md-4 col-sm-6 col-xs-12″>
<h3>Post 6</h3>
<p>Bila Penylamatku datang, k’muliaanNya ku pandang. S’lamanya ku mau bersorak, “Tuhan pimpin jalanku .</p>
</div>
</div><!– /row –>
<hr/>
<div class=”row”>
<div class=”col-md-12 text-right”>
By PT Proweb Indonesia
</div>
</div><!– /row –>
</div> <!– /container –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
</body>
</html>
Informasi lebih lanjut mengenai Grid Bootstrap silahkan mengunjungi http://getbootstrap.com/css/#grid .
Kunjungi www.proweb.co.id untuk menambah wawasan anda.