Belajar Bootstrap Part 3 Grid Layout 3 Meggabungkan Tampilan Dekstop, Tablet dan Mobile - Bewok Tekno

STAY HUNGRY STAY FOOLISH

Breaking

Home Top Ad

Responsive Ads Here

Thursday, June 30, 2016

Belajar Bootstrap Part 3 Grid Layout 3 Meggabungkan Tampilan Dekstop, Tablet dan Mobile



Hallo manusia
Kali ini om bewok bakal melanjutkan tutorial sebelumnya mengenai grid layout. Untuk teman - teman yang ingin melihat tutorial bootstrap series bisa lihat di sini 

Anyway, hari ini om bewok akan share mengenai menggabungkan tampilan dekstop, mobile dan tablet dengan mudah, mau tahu caranya ? BAYAR. bercanda deng.

Sebenernya tanpa kita perlu menggabungkan mobile dan tablet, dengan class menggunakan dekstop yaitu "col-md-xx" biasanya sudah responsive, tetapi terkadang responsive nya diluar dugaan kita, kadang melebar ke tengah atau ke kanan ke kiri, nah untuk itu kita buatin lagi class nya untuk mobile dan tablet. Mari kita mulai 

Sebelum kita belajar menggabungkan tampilan, alangkah baiknya kita pelajari dulu bootstrap dasar nya yaitu kita mempunyai 4 class dalam bootstrap yaitu 
  1. xs (Untuk handphone ukuran nya lebih kecil dari 768px)  cara pemanggilanya menggunakan .col-xs-
  2. sm (Untuk tablets ukuranya lebih kecil atau sama dengan 768px) cara pemanggilanya seperti .col-sm -
  3. md (Untuk Medium Devices dekstop yang ukuranya lebih kecil atau sama dengan 992px) Cara pemanggilanya seperti .com-md-
  4. lg (Untuk Large Devices dekstop yang ukuranya lebih kecil atau sama dengan 1200px). Cara pemanggilanya seperti .com-lg- 
Kalau masih ga ngerti lihat di tutorial awal ya yang ini :
LANJUT

Sebelum kita menggabungkan ketiganya yaitu dekstop, mobile dan tablet, lebih baik kita mencoba dua dulu biar ga bingung - bingung amat ketika ketiganya digabungin semuanya.

Contoh : Mobile Dan Dekstop
om kasih tau lagi ya kalau mobile menggunakan col-xs-xx dan kalau untuk dekstop menggunakan col-md-xxya, inget seperti di bawah ini ya
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menggabungkan Mobile dan Dekstop</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.col-md-4 {
padding: 20px;
color: white;
}
</style>
</head>
<body>
<div class="row">
 <div class="col-xs-10 col-md-4" style="background:#1abc9c">Bentar lagi                                     lebaran</div>
 <div class=" col-xs-6 col-md-4" style="background:#e67e22">Harus semangat ga                       boleh ngantuk</div>
 <div class=" col-xs-8 col-md-4" style="background:#95a5a6">Selamat Puasa</div>
</div>
</body>
</html>
Hasilnya akan seperti ini ya jika di dekstop
Jika di lihat di dekstop class yang di pake yaitu col-md-4
Hasilnya akan seperti ini jika di lihat dari mobile
Jika dilihat dari mobile tampilan seperti ini, class yang di gunakan yang menggunakan xs ya 
Oke tenang - tenang, om bewok tau kalian semua bakal nanya, kok bisa beda ya ? atau malah ga tuh orang gampang caranya gausah dijelasin juga udah ngerti, ya kalau gitu om bewok seneng tidak usah jelasin lagi hehe, 

Penjelasan Pertama
Kenapa di dekstop tampilanya seperti full width gitu ?
Karena yang dibaca oleh html adalah bagian col-md-4 nah ketika 4 nya ada 3, maka jika dijumlahkan 4+4+4 = 12, maka hasilnya full width kecuali kalau lebih maka biasanya kotak yang terakhir akan kebawah.
Penjelasan Kedua
Kenapa ketika di mobile tampilanya jadi ada yang panjang banget ada yang pendek banget ada yang biasa banget kotaknya ? Kenapa KENAPAAA WOI KENAPA ?
Sabar bulan puasa, baik bagi orang berbudiman, saya akan jelaskan dengan singkat, jelas dan padat dengan emosi yang tidak stabil jadi maaf kalau capslock jebol
KARENA JIKA MOBILE, YANG TERBACA OLEH BROWSER ADALAH YANG XS SEHINGGA UKURAN NYA BEDA - BEDA KARENA ANGKA NYA GUA BIKIN BEDA - BEDA. KOTAK YANG PERTAMA 10 KOTAK KEDUA 6 DAN KOTAK KETIGA 8.BEGITU JADINYA #hosh hosh hosh napas cape, faktor kegendutan.
Oh iya kenapa pake padding om ? 
- jawab : Biar Keren#thugLife. walaupun css nya om bewok buat di md-4 yang mana untuk dekstop, tapi ketika di ukuran mobile paddingnya work kok,

LANJUT GA NIH UNTUK 3 TAMPILAN ??? MANA SUARANYA???
Contoh : Mobile, Tablet dan Dekstop. BOOOM
Biar ga kepanjangan, tanpa basa basi lagi langsung saja kita coding seperti dibawah ini : 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menggabungkan Mobile, Tablet dan Dekstop</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.col-md-4 {
padding: 20px;
color: white;
}

</style>
</head>
<body>
<div class="row">
 <div class="col-xs-10 col-sm-8 col-md-4" style="background:#3498db">THR                                     MANA THR ?
                 </div>
 <div class=" col-xs-6 col-sm-8 col-md-4" style="background:#16a085">Semua                                   orang nunggu thr-an ? aku nunggu apa ? 
                 </div>
 <div class=" col-xs-9 col-sm-8 col-md-4" style="background:#2c3e50">Selamat                                 Iklan sirup diganti iklan lebaran
                 </div>
</div>
</body>
</html>
Hasilnya akan ada 3 yaitu : Dekstop, Tablet Dan Mobile


Dekstop dulu ga dekstop ga uuuuu#radityaDika
Tampilan Di Tablet
Mobile

Penjelasan nya cepat ya saya buru buru 
dekstop bisa gitu karena yang kebaca col-md-4
tablet bisa gitu karena yang kebaca col-sm-8
mobile bisa gitu karena yang kebaca col-xs-beda2 angkanya

Sampai jumpa di tutorial selanjutnyaaaaaaaaaa


No comments:

Post a Comment