Halo semua apa kabar semua ? Semoga kalian sehat - sehat saja ya, kalimat ini seperti surat - suratan jaman kecil. Anyway hari ini final, yap final untuk grid layout, bukan selesai belajar bootstrap nya ya, makin ke sini makin seru loh belajar bootrstrap loh, mungkin nanti untuk perbandingan nya kita coba pelajari foundation zurb ya sama juga kayak bootstrap, tapi mungkin tutorial nya setelah menyelesaikan ini ya.
Hari ini langsung 3 ya, Ya kalau ada yang mau pusing, pusing dulu aja ya jadi ketika belajar gausah pusing lagi#jenius.. Om bewok bukanya ingin bikin kalian pusing kok tapi memang materi ini sangat dikit sekali dan gampang di pelajari, nah yang Pertama ada Final offsetting(offset) Jadi om kasih om bayangan dulu ya, kita bikin kotak ada 2 full width anggap md 6 dua - dua nya. nah ketika di tengah - tengah dari 2 kotak tersebut ada jarak, nah itu dia yang di sebut dengan offset. nanti tutorialnya menyusul. Kedua ada Nesting Columns ini bayangan nya ada kotak di dalam kotak. Tenang aja gampang kok, kalau di pelajari bareng pacar kamu eh maksudnya dengan enjoy. Terakhir yang ketiga yaitu Column Ordering memahami push and pull ini juga gampang kok, udah tenang aja ada om bewok yang memberikan bantuan tanpa tanda jasa#ngantuk.
Oke Marlai ( Mari Kita Mulai ) garing banget......!!!
1. Final offsetting (offset)
Seperti yang sudah om bewok singgung sebelumnya mengenai final offsetting, jadi ini adalah sebuah pemberian jarak antar div, mungkin om bewok ga jago dalam penulisan tapi jago di praktek, kan banyak kan tuh teman sekolah kamu atau teman kerja kamu, teori doang yang jago prakteknya ga bisa. nah kalau om bewok kebalikanya, teori ga bisa praktek boro - boro. Tidak perlu berlama - lama lagi mari kita tulis codinganya dahulu ya.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat offset</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.col-md-4 {
padding: 20px;
color: white;
background: #3498db;
}
.col-md-6 {
padding: 20px;
color: white;
background: #3498db;
}
.col-md-2 {
padding: 20px;
color: white;
background: #e74c3c;
}
</style>
</head>
<body>
<div class="row">
<!-- ini kotak pertama -->
<div class="col-md-4">Ini adalah col md 4 yang kiri</div>
<div class="col-md-6 col-md-offset-2">ini yang col md 4 yang kanan & yang bikin ada jarak di antara kita#cieh</div>
<!-- ini kotak kedua -->
<div class="col-md-4 col-md-offset-2">Baru kotak awal udah di kasih jarak aja jadi ga perlu pake margin#ciaat</div>
<div class="col-md-2 col-md-offset-2">Roger roger ini col md 2. Ganti#walkieTalkie</div>
</div>
</body>
</html>
Maka Hasilnya seperti dibawah ini :
Coba kalian bereksperimens sendiri, ubah angkanya atau ubah gridnya terserah kalian, kalian harus sering otak atik agar lebih memahami, om bewok cuman hanya memberikan dasarnya saja. jika ada tambahan mengenai grid layout pasti om bewok bakal update terus. Selanjutnya Grid layout untuk part ..... wait wait wait. kita kan udah final untuk grid layout, HORE HORE. akhirnya pindah juga dari grid. tutorial selanjutnya ga kalah seru kok sama grid layout yaitu Tipografi,
Maka Hasilnya seperti dibawah ini :
 |
| hasil dari offset |
Sebenernya fungsinya apa sih om kalau menggunakan offset ini ?Good question boy, jadi fungsi dari si offset yang keliatan cuman ngasih jarak, padahal ini penting banget menurut gue, eh maksudnya om bewok, jadi kita ga perlu lagi ngitung jarak menggunakan margin, dengan menggunakan offset ini langsung bisa memberikan jarak antar div. Keren kan. nah mari kita bedah kodinganya satu persatu dulu ya.
<!-- ini kotak pertama -->
<div class="col-md-4">Ini adalah col md 4 yang kiri</div>
<div class="col-md-6 col-md-offset-2">ini yang col md 4 yang kanan & yang bikin ada jarak di antara kita#cieh</div>
Dari kotak pertama dulu ya :
Gampang kita buat 2 kotak yang bener bener real atau nyata, 1 lagi tidak nyata itu. lalu di mana saya buat nyata dan tidak nyata ? col-md-4 dan col-md-6 adalah nyata karena muncul di layar. nah yang col-md-offset-2 ini yang tidak nyata, ini yang membuat ada jaraknya, angka 2 maksudnya apa om ? ya ukuran kotak yang tidak nyata nya adalah 2 coba lihat jarakya tidak jauh kan, coba kita ubah angka 2 menjadi 4 pasti jaraknya juga pasti jauh loh. Clear
Dari kotak pertama dulu ya :
Gampang kita buat 2 kotak yang bener bener real atau nyata, 1 lagi tidak nyata itu. lalu di mana saya buat nyata dan tidak nyata ? col-md-4 dan col-md-6 adalah nyata karena muncul di layar. nah yang col-md-offset-2 ini yang tidak nyata, ini yang membuat ada jaraknya, angka 2 maksudnya apa om ? ya ukuran kotak yang tidak nyata nya adalah 2 coba lihat jarakya tidak jauh kan, coba kita ubah angka 2 menjadi 4 pasti jaraknya juga pasti jauh loh. Clear
<!-- ini kotak kedua -->
<div class="col-md-4 col-md-offset-2">Baru kotak awal udah di kasih jarak aja jadi ga perlu pake margin#ciaat</div>
<div class="col-md-2 col-md-offset-2">Roger roger ini col md 2. Ganti#walkieTalkie</div>
Mari kita bedah untuk kotak kedua, Konsepnya sama cuman jaraknya kita buat di awal dan di tengah, jadi secara logikanya kita membuat 2 offset di awal dan di tengah berarti tiap div ada offset-nya dong. iya dong bener dong.
Sama juga di kotak kedua om bewok kasih offset 2 coba kalau kalian eksperimen sendiri ubah offset nya menjadi 4. What happen right now ? kotak nya jadi kebawah pasti, karena inget perhitungan ya. dari kiri ke kanan kotaknya hanya mencapai 12 kalau lebih pasti sudah kebawah, Solusi nya kamu harus merubah angka col md yang secara nyata menjadi angka yang lebih kecil dari 4. Clear.
LANJUTTTTTTTTTTTTTTTTTT.
2. Nesting Columns
Sebenernya ini sudah sering di pelajari di bahasa pemograman, konsepnya hampir sama mungkin kalau di bahasa pemograman looping di dalam looping nah kalau di bootstrap bikin kotak di dalam kotak, Ini juga penting dalam layout website. pasti kita double kotaknya, satu untuk sisi bagian luar satu lagi untuk bagian dalam.
Langsung kita kodingan ya biar cepat selesai .:))))))
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat nesting columns</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.col-md-12 {
padding: 20px;
color: white;
background: #d35400;
}
.col-md-8 {
padding: 20px;
color: white;
background: #e67e22;
}
.col-md-4 {
padding: 20px;
color: white;
background: #f39c12;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
Kotak bagian luar nya lohh ini
<div class="row">
<div class="col-md-8">yoo ini kotak yang di dalam kotak yoo nomer 1</div>
<div class="col-md-4">yoo ini kotak yang di dalam kotak yoo nomer 2</div>
</div>
</div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini ya :
Lihat jauh lebih dalem lebih dalem gambarnya ya, udah kayak romy rapail belum yang hipnotis itu ? hehe
Mari kita bedah untuk kotak kedua, Konsepnya sama cuman jaraknya kita buat di awal dan di tengah, jadi secara logikanya kita membuat 2 offset di awal dan di tengah berarti tiap div ada offset-nya dong. iya dong bener dong.
Sama juga di kotak kedua om bewok kasih offset 2 coba kalau kalian eksperimen sendiri ubah offset nya menjadi 4. What happen right now ? kotak nya jadi kebawah pasti, karena inget perhitungan ya. dari kiri ke kanan kotaknya hanya mencapai 12 kalau lebih pasti sudah kebawah, Solusi nya kamu harus merubah angka col md yang secara nyata menjadi angka yang lebih kecil dari 4. Clear.
LANJUTTTTTTTTTTTTTTTTTT.
2. Nesting Columns
Sebenernya ini sudah sering di pelajari di bahasa pemograman, konsepnya hampir sama mungkin kalau di bahasa pemograman looping di dalam looping nah kalau di bootstrap bikin kotak di dalam kotak, Ini juga penting dalam layout website. pasti kita double kotaknya, satu untuk sisi bagian luar satu lagi untuk bagian dalam.
Langsung kita kodingan ya biar cepat selesai .:))))))
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat nesting columns</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.col-md-12 {
padding: 20px;
color: white;
background: #d35400;
}
.col-md-8 {
padding: 20px;
color: white;
background: #e67e22;
}
.col-md-4 {
padding: 20px;
color: white;
background: #f39c12;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
Kotak bagian luar nya lohh ini
<div class="row">
<div class="col-md-8">yoo ini kotak yang di dalam kotak yoo nomer 1</div>
<div class="col-md-4">yoo ini kotak yang di dalam kotak yoo nomer 2</div>
</div>
</div>
</div>
</body>
</html>
Hasilnya seperti di bawah ini ya :
 |
| Nesting column |
Om bewok ingetin lagi ya fungsi nesting column untuk background awal pada pembuatan website.
Mari kita bedah satu satu,
How it works?
Saya paste-kan kodinganya ya
<div class="row">
<div class="col-md-12">
Kotak bagian luar nya lohh ini
<div class="row">
<div class="col-md-8">yoo ini kotak yang di dalam kotak yoo nomer 1</div>
<div class="col-md-4">yoo ini kotak yang di dalam kotak yoo nomer 2</div>
</div>
</div>
</div>
Kita lihat col-md-12 di sini awal dalam pembuatan kotak yang pertama, perlu di ingat </div> nya taruh di setelah kotak keduanya ya, perhatikan baik - baik banyak orang yang lupa.
Lalu kita buat lagi row nya ini yang membuat mengapa bisa terbuat kotak baru lagi di dalam nya. Lalu seperti biasa kita membuat 2 kotak yang satu col-md-8 dan yang satu lagi col-md-4. That's it. Huft huft istirahat dulu bos cape langsung bikin 2 materi, malah lagi puasa lagi.
3. Column Ordering(Push and Pull)
Kalau kalian tidak tau arti dari push dan pull sering - sering main ke indomaret atau alfamart ya perhatikan pintu masuknya ada push (dorong) dan pull(tarik). Konsep ini juga ga beda jauh kok.
Fungsi ini bisa ngubah div ini, maksudnya gmn ?. ya kalau kita buat kotak satu dan kotak kedua. seharusnya kan pas di tampilinya kotak satu dulu baru kotak kedua nah kalau ini jadi kebalik..dan bukan cuman menggunakan offset doang yang bisa bikin jarak, dengan menggunakan push kita juga bisa loh. yuk coba
Codinganya seperti ini ya
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat column ordering</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.col-md-9 {
padding: 20px;
color: white;
background: #34495e;
}
.col-md-3 {
padding: 20px;
color: white;
background: #bdc3c7;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-9 col-md-push-3">Kotak pertama</div>
<div class="col-md-3 col-md-pull-9">Kotak Kedua</div>
</div>
</body>
</html>
Maka Hasilnya seperti di bawah ini ya :
Nah coba kalau push nya di ubah angka nya menjadi 4. nih codingan nya seperti di bawah ini ya :
<div class="row">
<div class="col-md-12">
Kotak bagian luar nya lohh ini
<div class="row">
<div class="col-md-8">yoo ini kotak yang di dalam kotak yoo nomer 1</div>
<div class="col-md-4">yoo ini kotak yang di dalam kotak yoo nomer 2</div>
</div>
</div>
</div>
Kita lihat col-md-12 di sini awal dalam pembuatan kotak yang pertama, perlu di ingat </div> nya taruh di setelah kotak keduanya ya, perhatikan baik - baik banyak orang yang lupa.
Lalu kita buat lagi row nya ini yang membuat mengapa bisa terbuat kotak baru lagi di dalam nya. Lalu seperti biasa kita membuat 2 kotak yang satu col-md-8 dan yang satu lagi col-md-4. That's it. Huft huft istirahat dulu bos cape langsung bikin 2 materi, malah lagi puasa lagi.
3. Column Ordering(Push and Pull)
Kalau kalian tidak tau arti dari push dan pull sering - sering main ke indomaret atau alfamart ya perhatikan pintu masuknya ada push (dorong) dan pull(tarik). Konsep ini juga ga beda jauh kok.
Fungsi ini bisa ngubah div ini, maksudnya gmn ?. ya kalau kita buat kotak satu dan kotak kedua. seharusnya kan pas di tampilinya kotak satu dulu baru kotak kedua nah kalau ini jadi kebalik..dan bukan cuman menggunakan offset doang yang bisa bikin jarak, dengan menggunakan push kita juga bisa loh. yuk coba
Codinganya seperti ini ya
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat column ordering</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.col-md-9 {
padding: 20px;
color: white;
background: #34495e;
}
.col-md-3 {
padding: 20px;
color: white;
background: #bdc3c7;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-9 col-md-push-3">Kotak pertama</div>
<div class="col-md-3 col-md-pull-9">Kotak Kedua</div>
</div>
</body>
</html>
Maka Hasilnya seperti di bawah ini ya :
 |
| Lihat yang kotak pertama jadi di ujung kanan kotak kedua jadi dikiri.WOW |
<!DOCTYPE html>
<html lang="en">
<head>
<title>Membuat column ordering</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
.col-md-9 {
padding: 20px;
color: white;
background: #34495e;
}
.col-md-3 {
padding: 20px;
color: white;
background: #bdc3c7;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-9 col-md-push-4">Kotak pertama</div>
<div class="col-md-3 col-md-pull-9">Kotak Kedua</div>
</div>
</body>
</html>
Maka hasilnya akan ada jarak di antara kotak tersebut :
 |
| WOW ADA JARAKNYA WOW |
terima kasih banyak, bantu banget buat ngerjain tugas dari bootcamp :)
ReplyDelete