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
- xs (Untuk handphone ukuran nya lebih kecil dari 768px) cara pemanggilanya menggunakan .col-xs-
- sm (Untuk tablets ukuranya lebih kecil atau sama dengan 768px) cara pemanggilanya seperti .col-sm -
- md (Untuk Medium Devices dekstop yang ukuranya lebih kecil atau sama dengan 992px) Cara pemanggilanya seperti .com-md-
- 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 |
 |
| Jika dilihat dari mobile tampilan seperti ini, class yang di gunakan yang menggunakan xs ya |
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