pinyinkpin - kali ini admin akan membahas bagaimana membuat
grid pada bootstrap. sebenarnya dalam
bootstrap , kolom yang di kehendaki ada 12. jika lebih dari itu maka akan di pindah ke bawah. itu adalah logika dasar nya, bisa di lihat di gambar .
pinyinkpin
 |
| Membuat Grid atau Kolom Pada Bootstrap |
dalam
bootstrap , terdapat 4
class yaitu
1. xs => untuk hp
2. sm => untuk tablet
3. md => untuk pc / desktop
4. lg => untuk desktop besar
untuk strukture dari grid bootstrap tersendiri adalah sebagai berikut
<div
class="row">
<div class="col-a-b"></div>
<div class="col-a-b"></div>
<div class="col-a-b"></div>
</div>
dimana "a" adalah class dari
bootstrap , dan "b" adalah besarnya kolom seperti yang telah di jelaskan di atas.
sebagai contoh:
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
kode di atas adalah untuk melihat 3 kolom yang berukuran 4.
 |
| Membuat Grid atau Kolom Pada Bootstrap |
untuk full kode nya sebagai berikut
<!DOCTYPE html>
<html lang="en">
<head>
<!-- tempat menaruh meta-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- membuat judul-->
<title>pinyink bootstrap</title>
<!-- link tempat dimana Bootstrap berada-->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<!-- awal badan web-->
<body>
<h1>Hello, world!</h1>
<div class="row">
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<!-- memasukan plugin bootstrap javascrip -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
sekian dari admin
pinyinkpin , apabila ada pertanyaan harap tinggalkan di komentar
terima kasih , -
pinyinkpin