Belajar Bootstrap part 3 Grid Layout 1

bewoksatukosong.com - Halo balik lagi dengan om bewok, maaf sekali sudah tidak update artikel karena memang sedang di sibukan kuliah yang tiada henti - hentinya memberikan tugas, mungkin nanti pelajaran kuliah-nya akan di update di sini biar teman - teman juga bisa belajar mengenai semua pelajaran teknik informatika di kampus om bewok, semoga data nya belum pada ilang ya. hehe

Anyway hari ini om bewok bakal bahas mengenai grid layout kalau di sini masih ada yang tanya sama om bewok,

om bewok download dimana sih atau om bewok cara menggunakan yang ga nyambung internet gimana sih ? nah yang gini nih belum liat tutorial awal http://www.bewoksatukosong.com/2016/06/belajar-bootstrap-part-1-mengenai-dasar.html. Kalau mau lihat series bootstrap lengkap nya di sini ya http://www.bewoksatukosong.com/2016/06/tutorial-bootstrap-series-dasar-sampai.html

Bagian penting dalam pembuatan website adalah ya ini grid layout. dengan menggunakan ini kita harus sudah memberikan ibarat kalau rumah lagi di bangun cakar ayam lah atau fondasi nya dulu lah, nah ini lah fungsi dari grid layout.

- Baca :

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

Oke yang paling penting kalian harus tahu mengenai 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-

Selanjutnya adalah Bagaimana caranya menggunakan 4 class ini ? Gampangggggggggggggggg.

Pertanyaan nya kita ganti seharusnya.

Bisa tidak kita gabungin 4 class ini di dalam satu div ???????
Bisaaaaaaa bangettttt

Pertama om bewok bakal ngejelasin penggunaan 1 class dulu ya.

Catatan kecil dulu ya, jadi dari tampilan website tersebut terdapat 12 kolom, yang mana dari ujung ke ujung itu hanya bisa di gunakan 12 kolom, kalau lebih ? ya otomatis di akan berada di bawahnya.

Biar makin bingung mari kita coba saja hehe, Awas pusing belajar ini
hehe ga kok, Orang gampang kok memahami grid.
Om bewok aja cuman sehari pahamin ini tapi sebelum - sebelumnya udah belajar hehe. Oke let's go

1. Mari kita buat file baru dulu, kita kasih nama grid.html, sebenarnya apa saja boleh kok yang membuat nyaman. untuk yang belum tau kita menggunakan bootstrap yang sudah di download ya, jadi ini tanpa menggunakan internet, jadi buat teman - teman yang internetnya lemot jadi bisa juga belajar. kalau belum tau caranya lihat tutorial ini sebelumnya. Awas ampe nanya nanya lagi!!!. Nih om bewok kasih Linknya di bawah ini
Belajar Bootstrap Part 1 Mengenai Dasar Bootstrap

- Baca :

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

2. Buat coding seperti di bawah ini ya


<!DOCTYPE html>
<html>
<head>
  <title>Boostrap grid dasar</title>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
  <div class="row">
   <div class="col-md-4" style="background: red">col-md-4 bagian 1</div>
   <div class="col-md-4" style="background: blue">col-md-4 bagian 2</div>
   <div class="col-md-4" style="background: brown">col-md-4 bagian 3</div>
  </div>
</body>
</html>

Maka Hasilnya akan seperti dibawah ini ya.

Gambar 1 Tampilan Dari grid.html

Om bewok jelasin maksud dari div class tersebut ya.

 <div class="row">
  <div class="col-md-4" style="background: red">col-md-4 bagian 1</div>
  <div class="col-md-4" style="background: blue">col-md-4 bagian 2</div>
  <div class="col-md-4" style="background: brown">col-md-4 bagian 3</div>
 </div>

Awal <div class="row"> itu maksudnya apa ya bro ?

Itu untuk memanggil baris bro dalam bootstrap, tapi coba kalian coba kalau row nya di ganti apa perbedaanya ?
#cieh om bewok sekarang ada soalnya hehe

Lanjut OMMMMMM.

- Baca :

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website

  <div class="col-md-4" style="background: red">col-md-4 bagian 1</div>
  <div class="col-md-4" style="background: blue">col-md-4 bagian 2</div>
  <div class="col-md-4" style="background: brown">col-md-4 bagian 3</div>

col-md-4 artinya kita memanggil column lalu md.
masih inget md ?
Ya betul#PadahalBelumJawab.

md itu adalah ukuran medium dekstop lalu 4 itu adalah panjang kotak nya. coba kalian coba - coba sendiri bagaimana kalau angka 4 tersebut di rubah angkanya sesuai kesukaan nomor kalian. max angka 12 aja ya, tapi kalian coba juga kalau lebih dari angka 12 Apa yang terjadi ? .

Sudah om bewok singgung sebelumnya masalah jumlah column, jadi di situ terlihat kita menggunakan 4 nya ada 3x, berarti berapa kalau di jumlahin ? 4+4+4 = 12. yap berarti maksimal kotak 1 baris adalah 12 jadi kalau misalnya lebih dari 12 maka mereka akan kebawah, ga percaya ? oke kita coba

 <div class="row">
  <div class="col-md-4" style="background: red">col-md-4 bagian 1</div>
  <div class="col-md-4" style="background: blue">col-md-4 bagian 2</div>
  <div class="col-md-4" style="background: brown">col-md-4 bagian 3</div>
 </div>

Maka Hasilnya bisa kamu lihat dibawah ini

Gambar 2. Tampilan grid yang melebihi dari 12 col

Lihat 4 + 4 + 5 = 13, bagian 3 nya langsung ke bawah. Kenapa ? karena sudah melebihi max column yang mana max column tersebut adalah 12. Kalau masih belum paham kalian experiment sendiri, kamu bisa coba - coba ganti dengan sesuka hati kamu angka dan background colornya ya.

Selanjutnya kita akan mempelajari Belajar Bootstrap Part 3 Grid Layout 2 Dan Jika Kamu ingin melihat tutorial dasar dan cara membuat websitenya dengan ber-urutan kamu bisa lihat disini, maksud om bewok biar kamu ga kebingungan nyarinya

- Baca :

Tutorial Bootstrap Series Dari Dasar Hingga Membuat Website