Gris System Bootstrap







Assalamu’alaikum..

kali ini saya akan menjelaskan tentang Grid System Bootstrap. Pasti kalian masih bingung apa sih Grid Sytem Bootstrap itu dan apa sih kegunaannya dalam Bootstrap, nah semua itu akan saya jawab lewat blog ini. Lihat penjelasannya sebagai berikut :

Pengertian

      Grid System adalah alat yang akan membantu kita untuk membuat layout web agar
menjadi lebih rapi. Di dalam bootstrap, grid system dibagi dalam 12 kolom ( col-* )
dimana dalam tiap barisnya ( .row ) yang diset dalam empat model xs ( extra
small), md (medium ), sm (small), lg (large) sesuai lebar dari layar monitor, sehingga
selain membantu kita dalam membuat layout web yang rapi, grid system bootstrap
juga membantu kita membuat layout web yang responsive.


Latar Belakang
    seperti yang dijelaskan di atas grid system bootstrap dibagi dalam 12 kolom dan empat macam ukuran. Empat ukuran tersebut yaitu :
  1. col=xs-* digunakan pada ukuran kurang dari 768px atau seukuran mobile.
  2. col-sm-* digunakan pada ukuran lebih dari atau sama dengan 768px atau seukutan tablet.
  3. col-mb-* digunakan pada ukuran lebih dari atau sama dengan 992px atau selebar monitor.
  4. col-lg-* digunaka n pada lebih dari atau sama dengan 1200px atau monitor besar.

Dari grid di atas kita bisa buat layout web sesuai keinginan kita.

Contoh :

<div class="col-md-3 col-xs-3 col-sm-3 col-lg-3">...</div>

Selain empat macam ukuran di atas di dalam bootstrap terdapat dua macam class
lain yang berguna dalam membuat layout web yaitu .container dan .row
container membantu kita membuat layout website kita berada di tengah-tengah browser, berikut contoh gambar :


Tanpa Container




Dengan Container







Tanpa container :

<div class="col-md-12">
<div class="row">
<div class="col-md-12">...</div>
</div>
</div>




Coding dengan container :

<div class="continer">
<div class="row">
<div class="col-md-12">...</div>
</div>
</div>



row membantu kuta untuk membuat baris baru pada layout.Selain
untuk membuat baris baru layout biasa digunakan ketika kita hendak menambahkan
grid di dalam grid berikut contoh benar dan salahnya :

cara yang BENAR

<div class="col-md-3">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">...</div>
<div class="col-md-9">...</div>
</div>
</div>
<div class="col-md-6">...</div>
</div>
</div>



cara yang SALAH

<div class="col-md-3">
<div class="col-md-6">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
<div class="col-md-6"></div>
</div>


JIKA kita menggunakan cara yang SALAH layout web yang kita buat akan rusak
terutama saat dibuka di mobile dan layout yang seharusnya responsive justru akan
kacau dan ancur.



Membuat Layot Web dengan Bootstrap

Agar lebih jelasnya kita akan mencoba membuat langsung layout website dengan
bootstrap. kita akan membuat sebuah desain website yang sederhana saja seperti
header, navigasi, content, sidebar dan footer.
Pertama bayangkan lebar layar kita dibagi ke dalam 12 kolom, jika sudah kita akan
membanginya header 12 kolom lalu di bawahnya ada navigasi sebanyak 12 kolom
kemudian body 12 kolom, di dalam body kita bagi lagi 9 kolom untuk konten dan 3
kolom untuk sidebar, dibawah body adalah footer dengan 12 kolom. Lihat gambar ini :









ini adalah Codingnya :


<div class="col-md-12">
<div class="row">
<header class="col-md-12">
code header di sini
</header>
</div>
<!-- end header -->
<div class="row">
<div class="col-md-12">
code navigasi di sini
</div>
</div>
<!-- end navigasi -->
<div class="row">
<div class="wrapper">
<div class="col-md-9">
<article>
code content di sini
</article>
</div>
<!-- end posting area -->
<div class="col-md-3">
<aside>
code widget / sidebar di sini
</aside>
</div>
<!-- end sidebar -->
</div>
</div>
<!-- end wrapper -->
<div class="row">
<div class="col-md-12">
<footer class="footer">
code footer di sini
</footer>
</div>
</div>
<!-- end footer -->
</div>


selamat mencoba sobat… :)


Maksud dan Tujuan
lebih memahami Grid System Bootstrap.

Alat dan Bahan
  • Laptop
  • File Items
  • Text Editor


Hasil yang diharapkan
Bisa membedakn fungi dari properti pada Grid System Bootstrap.