Sistem Grid Bootstrap 5
- Halaman Sebelumnya BS5 Pengesahan Form
- Halaman Berikutnya BS5 Tumpukan/Horizontal
Sistem grid
Sistem grid Bootstrap dibangun dengan flexbox, halaman dapat mengizinkan maksimal 12 kolom.
Jika Anda tidak ingin menggunakan semua 12 kolom secara terpisah, Anda dapat menggabungkan kolom-kolom ini untuk menciptakan kolom yang lebar:
Sistem grid berresponsif, kolom akan diatur ulang otomatis berdasarkan ukuran layar.
Pastikan totalnya sama dengan atau kurang dari 12 (tidak perlu menggunakan semua 12 kolom yang tersedia).
Kelas grid
Sistem grid Bootstrap 5 menyediakan enam kelas:
.col-
(Perangkat super kecil - lebar layar kurang dari 576px).col-sm-
(Perangkat kecil - lebar layar sama dengan atau lebih besar dari 576px).col-md-
(Perangkat menengah - lebar layar sama dengan atau lebih besar dari 768px).col-lg-
(Perangkat besar - lebar layar sama dengan atau lebih besar dari 992px).col-xl-
(Perangkat ultra besar - lebar layar sama dengan atau lebih besar dari 1200px).col-xxl-
(Perangkat super besar - lebar layar sama dengan atau lebih besar dari 1400px)
Gabungkan kelas di atas untuk menciptakan tata letak yang lebih dinamis dan fleksibel.
Petunjuk:Setiap kelas adalah pengukuran berdasarkan proporsi, jadi jika Anda ingin menetapkan lebar yang sama untuk sm dan md, Anda hanya perlu menentukan sm.
Struktur dasar grid Bootstrap 5
Berikut adalah struktur dasar grid Bootstrap 5:
<!-- Kendalikan lebar baris, serta cara mereka tampil di berbagai perangkat --> <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> <!-- atau biarkan Bootstrap mengelola layout --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
Contoh pertama: buat baris satu (<div class = "row">
)。Lalu, tambahkan jumlah baris yang dibutuhkan (dengan .col-*-*
tanda (*) pertama mewakili sensi: sm, md, lg, xl atau xxl, dan tanda (*) kedua mewakili angka, total baris di setiap baris harus berjumlah 12.
Contoh kedua: bukan untuk setiap col
Tambahkan angka, tetapi biarkan bootstrap menangani layout untuk membuat baris yang sama lebar: dua "col"
Elemen = lebar 50% setiap baris, sementara tiga baris = lebar 33.33% setiap baris. Empat baris = 25% lebar dll. Anda juga dapat menggunakan .col-sm|md|lg|xl|xxl
Buat baris ber�� sensi
Pilihan Grid
Tabel di bawah ini menyajikan bagaimana sistem grid Bootstrap 5 bekerja di berbagai ukuran layar:
Suka Kecil (<576px) | Suka Besar (>=576px) | Suka Besar (>=768px) | Suka Besar (>=992px) | Suka Besar (>=1200px) | Suka Besar (>=1400px) | |
---|---|---|---|---|---|---|
Awalan Klas | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
Perilaku Grid | Selalu horizontal | Gelungkan mulai, di atas batang horizontal | Gelungkan mulai, di atas batang horizontal | Gelungkan mulai, di atas batang horizontal | Gelungkan mulai, di atas batang horizontal | Gelungkan mulai, di atas batang horizontal |
Lebar Container | Tidak ada (auto) | 540px | 720px | 960px | 1140px | 1320px |
Diperkenalkan untuk | Mode Tegak Ponsel | Mode Latar Belakang Ponsel | Tablet | Laptop | Laptop dan Desktop | Laptop dan Desktop |
Nomor Baris | 12 | 12 | 12 | 12 | 12 | 12 |
Lebar Gutter | 1.5rem (dalam setiap sisi baris .75rem) | 1.5rem (dalam setiap sisi baris .75rem) | 1.5rem (dalam setiap sisi baris .75rem) | 1.5rem (dalam setiap sisi baris .75rem) | 1.5rem (dalam setiap sisi baris .75rem) | 1.5rem (dalam setiap sisi baris .75rem) |
Boleh ditambahkan | Ya | Ya | Ya | Ya | Ya | Ya |
Pemindahan | Ya | Ya | Ya | Ya | Ya | Ya |
Pengurutan Baris | Ya | Ya | Ya | Ya | Ya | Ya |
- Halaman Sebelumnya BS5 Pengesahan Form
- Halaman Berikutnya BS5 Tumpukan/Horizontal