Sistem Grid Bootstrap
Sistem Grid Bootstrap
Sistem grid Bootstrap memungkinkan hingga 12 kolom di seluruh halaman.
Jika Anda tidak ingin menggunakan 12 kolom satu per satu, Anda dapat mengelompokkan kolom bersama-sama untuk membuat kolom yang lebih lebar:
| rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 | rentang 1 |
| rentang 4 | rentang 4 | rentang 4 | |||||||||
| rentang 4 | rentang 8 | ||||||||||
| rentang 6 | rentang 6 | ||||||||||
| rentang 12 | |||||||||||
Sistem grid Bootstrap responsif, dan kolom akan diatur ulang tergantung pada ukuran layar: Pada layar besar mungkin terlihat lebih baik dengan konten yang diatur dalam tiga kolom, tetapi pada layar kecil akan lebih baik jika item konten ditumpuk di atas satu sama lain.
Tip: Ingatlah bahwa kolom kisi harus berjumlah hingga dua belas untuk satu baris. Lebih dari itu, kolom akan ditumpuk terlepas dari viewport.
Kelas Grid
Sistem grid Bootstrap memiliki empat kelas:
xs(untuk ponsel - lebar layar kurang dari 768px)sm(untuk tablet - layar sama dengan atau lebih besar dari lebar 768px)md(untuk laptop kecil - layar sama dengan atau lebih besar dari lebar 992px)lg(untuk laptop dan desktop - layar sama dengan atau lebih besar dari lebar 1200px)
Kelas-kelas di atas dapat digabungkan untuk membuat tata letak yang lebih dinamis dan fleksibel.
Tip: Setiap kelas ditingkatkan, jadi jika Anda ingin mengatur lebar yang sama untuk xs dan sm, Anda hanya perlu menentukan xs.
Aturan Sistem Grid
Beberapa aturan sistem grid Bootstrap:
- Baris harus ditempatkan dalam
.container(lebar tetap) atau.container-fluid(lebar penuh) untuk perataan dan bantalan yang tepat - Gunakan baris untuk membuat grup kolom horizontal
- Konten harus ditempatkan di dalam kolom, dan hanya kolom yang boleh menjadi turunan langsung dari baris
- Kelas yang telah ditentukan seperti
.rowdan.col-sm-4tersedia untuk membuat tata letak kisi dengan cepat - Kolom membuat talang (celah antara konten kolom) melalui padding. Padding itu diimbangi dalam baris untuk kolom pertama dan terakhir melalui margin negatif pada
.rows - Kolom kisi dibuat dengan menentukan jumlah 12 kolom yang tersedia yang ingin Anda rentangkan. Misalnya, tiga kolom yang sama akan menggunakan tiga
.col-sm-4 - Lebar kolom dalam persentase, sehingga selalu cair dan berukuran relatif terhadap elemen induknya
Struktur Dasar dari Grid Bootstrap
Berikut ini adalah struktur dasar dari grid Bootstrap:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<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>
</div>
Jadi, untuk membuat tata letak yang Anda inginkan, buat wadah ( <div
class="container">). Selanjutnya, buat baris ( <div
class="row">). Kemudian, tambahkan jumlah kolom yang diinginkan (tag dengan
.col-*-*kelas yang sesuai). Perhatikan bahwa angka di dalam .col-*-*harus selalu berjumlah 12 untuk setiap baris.
Opsi Kotak
Tabel berikut merangkum cara kerja sistem grid Bootstrap di beberapa perangkat:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Contoh
Bab berikutnya menunjukkan contoh sistem grid untuk perangkat yang berbeda: