Assalamu alaikum Wr Wb.
Dalam pertemuan kali ini, saya akan memaparkan mengenai Grid Dasar Bootstrap.
Bootstrap Grid
Bootstrap Sistem Grid
Sistem Grid bootstrap memungkinkan hingga 12 kolom di halaman.
Jika Anda tidak ingin menggunakan semua 12 kolom secara individual , Anda dapat mengelompokkan kolom sama untuk menciptakan kolom yang lebih luas.
Sistem Grid Bootstrap adalah responsif, dan kolom akan menata kembali secara otomatis , tergantung pada ukuran layar.
Grid Kelas
Sistem Bootstrap Grid memiliki 4 kelas:
- xs (untuk ponsel)
- sm (untuk tablet)
- md (untuk desktop)
- lg (untuk desktop yang lebih besar)
Struktu dasar dari Grid Bootstrap
Berikut ini adalah struktur dasar dari grid bootstrap .
<div class="row">Pertama; buat berturut-turut (<div class="row">). Kemudian, tambahkan jumlah yang diinginkan dari kolom (tag dengan tepat .col-*-* kelas).Perhatikan bahwa angka-angka dalam .col-*-* harus selalu menambahkan hingga 12 untuk setiap baris.
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Tiga Kolom Sama
Contoh berikut menunjukkan bagaimana untuk mendapatkan tiga kolom yang sama-lebar mulai dari tablet dan skala untuk desktop besar. Pada ponsel, kolom secara otomatis akan menumpuk.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hallo Dunia!</h1>
<p>Mengubah ukuran jendela browser untuk melihat efek.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
Hasil
Dua Kolom yang tidak merata
Contoh berikut menunjukkan bagaimana untuk mendapatkan dua kolom berbagai lebar mulai dari tablet dan skala untuk desktop besar.
Contoh
<!DOCTYPE html>
<html lang="en">
<head>
<title>Contoh Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Hallo Dunia!</h1>
<p>Mengubah ukuran jendela browser untuk melihat efek.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-8" style="background-color:lavenderblush;">.col-sm-8</div>
</div>
</div>
</body>
</html>
Hasil
REFERENSI
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
No comments:
Post a Comment