Grid System
Grid System
adalah alat yang akan membantu untuk membuat layout web agar menjadi lebih rapi.
Pada 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 dalam membuat layout web yang rapi, Grid
System Bootstrap juga membantu membuat layout web yang responsive.
Grid System Bootstrap dibagi dalam 12 kolom dan empat macam ukuruan. empat ukuran
tersebut adalah :
1. col-xs-* ini digunakan pada ukuran kurang dari 768px atau seukuran mobile.
2. col-sm-* ini digunakan pada ukuran lebih dari atau sama dengan 768px atau seukuran
tablet.
3. col-md-* ini digunakan pada ukuran lebih dari atau sama dengan 992px atau selebar
monitor.
4. col-lg-* ini lebih dari atau sama dengan 1200px atau monitor besar.
Berdasarkan grid di atas kita bisa mengkombinasikan grid agar bisa memperoleh layout web
sesuai keinginan.
Contoh:
<div class="col-md-3">...</div>
Membuat tiga kolom saat berada di layar monitor seperti laptop tapi menjadi satu kolom saat
berada dilayar smartphone.
Selain empat macam ukuran di atas di dalam bootstrap terdapat dua macam class lain yang
berguna dalam membuat layout web yaitu .container dan .row
Tanpa Container Dengan Container
Dengan container
1 <div class="continer">
2 <div class="row">
3 <div class="col-md-12">...</div>
4 </div>
5 </div>
Tanpa container
1 <div class="col-md-12">
2 <div class="row">
3 <div class="col-md-12">...</div>
4 </div>
5 </div>
Persiapan Folder dan Bootstrap WebSite
Templater Dasar
<html>
<head>
<title>Latihan 2 - Bootstrap 03</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>