Bootstrap Sistem Grid
Bootstrap's sistem grid 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:
| 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 | |||||||||||
Bootstrap's sistem grid responsif, dan kolom akan menata kembali tergantung pada ukuran layar: Pada layar besar mungkin terlihat lebih baik dengan konten terorganisir dalam tiga kolom, tetapi pada layar kecil akan lebih baik jika item konten yang ditumpuk di atas satu sama lain.
Tip: Ingat bahwa kolom kotak harus menambahkan hingga dua belas untuk berturut-turut. Lebih dari itu, kolom akan menumpuk tidak peduli viewport .
Grid Kelas
The Bootstrap sistem grid memiliki empat kelas:
- xs (untuk ponsel)
- sm (untuk tablet)
- md (untuk desktop)
- lg (untuk desktop yang lebih besar)
Kelas-kelas di atas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan fleksibel.
Tip: Setiap kelas sisik, jadi jika Anda ingin mengatur lebar yang sama untuk xs dan sm , Anda hanya perlu menentukan xs .
Aturan Sistem Grid
Beberapa Bootstrap aturan sistem grid:
- Baris harus ditempatkan dalam
.container(fixed-width) atau.container-fluid(full-width) untuk keselarasan dan padding - Gunakan baris untuk membuat grup horizontal kolom
- Konten harus ditempatkan dalam kolom, dan hanya kolom mungkin anak-anak langsung dari baris
- Kelas yang telah ditetapkan seperti
.rowdan.col-sm-4yang tersedia untuk cepat membuat layout jaringan - Kolom membuat talang (kesenjangan antara konten kolom) melalui padding. Padding yang disajikan di baris untuk kolom pertama dan terakhir melalui marjin negatif pada
.rows - kolom Grid dibuat dengan menentukan jumlah 12 kolom yang tersedia yang ingin span. Misalnya, tiga kolom yang sama akan menggunakan tiga
.col-sm-4
Struktur dasar dari Bootstrap Grid
Berikut ini adalah struktur dasar dari Bootstrap jaringan:
<div class="container">
<div
class="row">
<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, menciptakan sebuah wadah ( <div class="container"> ). Berikutnya, membuat baris ( <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.
Grid Pilihan
Tabel berikut merangkum bagaimana Bootstrap sistem grid bekerja di beberapa perangkat:
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| 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 |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number 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-bab berikutnya menunjukkan contoh dari sistem grid untuk perangkat yang berbeda: