Bootstrap 4 Sistem Grid

Bootstrap 4 Sistem Grid

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:

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.

Kelas Grid

Sistem grid Bootstrap 4 memiliki lima kelas:

• .col- (perangkat ekstra kecil - lebar layar kurang dari 576px)
• .col-sm- (perangkat kecil - lebar layar sama dengan atau lebih besar dari 576 piksel)
• .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 xlarge - lebar layar sama dengan atau lebih besar dari 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 smdan md, Anda hanya perlu menentukan sm.

Aturan Sistem Grid

Beberapa aturan sistem grid Bootstrap 4:

• 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 .row dan .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
• Perbedaan terbesar antara Bootstrap 3 dan Bootstrap 4 adalah Bootstrap 4 sekarang menggunakan flexbox, bukan float. Satu keuntungan besar dengan flexbox adalah bahwa kolom kisi tanpa lebar yang ditentukan akan secara otomatis ditata sebagai "kolom dengan lebar yang sama" (dan tinggi yang sama). Contoh: Tiga elemen dengan .col-smmasing-masing akan secara otomatis memiliki lebar 33,33% dari breakpoint kecil ke atas. Tip: Jika Anda ingin mempelajari lebih lanjut tentang Flexbox, Anda dapat membaca Tutorial CSS Flexbox kami .

Struktur Dasar dari Bootstrap 4 Grid

Berikut ini adalah struktur dasar dari grid Bootstrap 4:

Contoh pertama: buat baris ( <div class="row">). Kemudian, tambahkan jumlah kolom yang diinginkan (tag dengan .col-*-*kelas yang sesuai). Bintang pertama (*) mewakili daya tanggap: sm, md, lg atau xl, sedangkan bintang kedua mewakili angka, yang harus selalu berjumlah 12 untuk setiap baris.

Contoh kedua: alih-alih menambahkan angka ke masing-masing col, biarkan bootstrap menangani tata letak, untuk membuat kolom dengan lebar yang sama: dua "col"elemen = lebar 50% untuk setiap kolom. tiga col = lebar 33,33% untuk setiap col. empat cols = 25% lebar, dll. Anda juga dapat menggunakan .col-sm|md|lg|xluntuk membuat kolom responsif.

Opsi Kotak

Tabel berikut merangkum cara kerja sistem grid Bootstrap 4 di berbagai ukuran layar:

Contoh

Bab berikutnya menunjukkan contoh sistem grid untuk perangkat dan lebar layar yang berbeda:

• Ditumpuk-ke-horizontal
• Tata Letak Ekstra Kecil
• Perangkat kecil
• Perangkat sedang
• Perangkat besar
• Perangkat ekstra besar
• Contoh kisi lainnya