Cara paling mudah untuk membuat tampilan responsive, adalah menggunakan bantuan bootstrap, dengan adanya bootstrap, kita tidak perlu bingung lagi untuk menentukan berapa lebar kolom yang harus kita pakai, karena bootstrap inilah yang akan menghandle lebar kolom tersebut menggunakan prosentase, jadi seperti halnya saat kita membuat code CSS dengan memakai acuan prosentase pada lebar layar tertentu.
Langkah awal menggunakan Bootstrap.
Pertama kita membutuhkan code untuk bootstrap itu sendiri, selain itu kita membutuhkan jquery agar bisa mengeksekusi code pada bootstrap, kemudian kita harus menggunakan viewport sekecil mungkin, jadi pada bagian head, kita harus memanggil code berikut :Code HTM untuk bagian head
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js' type='text/javascript'/>
Selanjutnya kita harus menentukan berapa lebar minimal yang diperbolehkan, ini untuk mempertahankan layar agar tidak terlalu kecil, seperti yang kita tau bootstrap memakai lebar prosentase, jadi walaupun layar selebar 10px, bootstrap akan tetap mengikuti lebar tersebut, memang tampilan tetap rapi, tapi huruf akan terlihat mengacak, jadi silahkan buat aturan lebar minimal sesuai dengan target layar terkecil.
Contoh layar HP saat ini adalah 230px, jadi kita buat minimal lebar 230px dengan code CSS berikut :
body {
min-width:230px;
}
Code CSS diatas bersifat optional, jadi agan tidak perlu beracuan dengan lebar segitu, contoh pada webjalanan.com ini ane memakai lebar minimal 490px, karena ane memakai gambar yang rata-rata selebar 400px dengan padding di kanan kirinya. coba agan perkecil ukuran layar dan lihat perubahannya.
Selanjutnya kita akan memanggil class untuk masing masing layar, lihat code dibawah ini :
Code Basic Pemanggilan Class
<div class='container-fluid'>
<div class='row'>
<div class='col-lg-?? col-md-?? col-sm-?? col-xs-??'>
Isi konten agan disini
</div>
</div>
</div>
Penjelasan dari code basic diatas :
Class 1 = container atau container-fluid ( Wajib berada paling atas..! )Class 2 = row ( Harus ada setelah class container ..! )
Class 3 = col (Ini adalah target layar) Colom ini dibagi antara lain :
- Large ( layar Lebar) menggunakan Class = col-lg-??
- Medium ( layar PC atau Laptop) menggunakan Class = col-md-??
- Small ( layar Tablet ) menggunakan Class = col-sm-??
- Extra Small ( layar HP ) menggunakan Class = col-xs-??
Bootstrap akan membagi layar menjadi 12 bagian span yang sama, kita tinggal mengambil berapa span yang kita inginkan.
Suatu contoh, ane ingin membuat lebar dua kolom pada layar PC atau Laptop,
dan menjadi satu kolom saat dibuka pada layar Tablet atau HP,
maka code bootstrap yang ane pakai adalah :
<div class='container-fluid'>
<div class='row'>
<div class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
Isi Kolom yang Pertama
</div>
<div class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
Isi Kolom yang Kedua
</div>
</div>
</div>
Secara keseluruhan code akan terlihat seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Contoh Tampilan Responsive</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js' type='text/javascript'/>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js' type='text/javascript'/>
</head>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
Isi Kolom yang Pertama
</div>
<div class='col-lg-6 col-md-6 col-sm-12 col-xs-12'>
Isi Kolom yang Kedua
</div>
</div>
</div>
</body>
</html>
Itu tadi adalah langkah awal untuk membuat tampilan yang responsive, ada berbagai trik lain yang bisa kita pakai untuk membuat tampilan yang responsive, dan ini akan kita bahas di lain kesempatan, OK selamat mencoba dan semoga ilmu yang sedikit ini bisa bermanfaat ^_^
0 komentar:
Post a Comment