Bootstrap - Columns: Membina Susun Atur Responsif Dengan Mudah

Hai sana, para pengembang web yang bersemangat! Hari ini, kita akan melihat salah satu fitur yang paling kuat di Bootstrap: kolom. Seperti guru komputer tetangga yang ramah, saya sangat gembira untuk memandu anda dalam perjalanan ini. Percayalah, pada akhir panduan ini, anda akan dapat membuat susun atur responsif seperti seorang ahli!

Cara Kerjanya

Sebelum kita masuk ke dalam hal yang rinci, mari kita mengerti dasarnya. Sistem grid Bootstrap berdasarkan susun atur 12 kolom. Bayangkan itu seperti membagi pizza menjadi 12 bagian - anda bisa makan semuanya sendiri ( satu kolom penuh lebar) atau berbagi dengan teman (beberapa kolom).

Ini adalah contoh sederhana untuk memulai:

<div class="container">
<div class="row">
<div class="col-sm-4">Kolom 1</div>
<div class="col-sm-4">Kolom 2</div>
<div class="col-sm-4">Kolom 3</div>
</div>
</div>

Dalam contoh ini, kita telah membuat tiga kolom dengan lebar yang sama pada layar kecil dan ke atas. Kelas col-sm-4 berarti "ambil 4 dari 12 kolom pada layar kecil". Itu seperti mengatakan, "Saya akan memesan 4 bagian dari pizza 12-bagian itu, tolong!"

Penyelarasan

Sekarang kita memiliki kolom, mari kita belajar bagaimana menyelaraskan mereka. Itu seperti mengatur furnitur di dalam ruangan - anda ingin segalanya terlihat sempurna!

Penyelarasan vertikal

Untuk menyelaraskan kolom secara vertikal, kita gunakan kelas pada baris:

<div class="container">
<div class="row align-items-start">
<div class="col">Atas</div>
<div class="col">Atas</div>
<div class="col">Atas</div>
</div>
<div class="row align-items-center">
<div class="col">Tengah</div>
<div class="col">Tengah</div>
<div class="col">Tengah</div>
</div>
<div class="row align-items-end">
<div class="col">Bawah</div>
<div class="col">Bawah</div>
<div class="col">Bawah</div>
</div>
</div>

Di sini, kita menggunakan align-items-start, align-items-center, dan align-items-end untuk menyelaraskan kolom ke atas, tengah, dan bawah baris masing-masing.

Penyelarasan horizontal

Untuk penyelarasan horizontal, kita gunakan kelas justify-content:

<div class="container">
<div class="row justify-content-start">
<div class="col-4">Satu</div>
<div class="col-4">Dua</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Satu</div>
<div class="col-4">Dua</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Satu</div>
<div class="col-4">Dua</div>
</div>
</div>

Kelas ini (justify-content-start, justify-content-center, justify-content-end) menyelaraskan kolom ke kiri, tengah, dan kanan wadah.

Pemenggalan Kolom

kadang-kadang, anda mungkin memiliki lebih dari 12 unit kolom dalam satu baris. Jangan khawatir, Bootstrap ada untuk mendukung anda! Itu akan secara otomatis memenggal kolom ekstra ke baris baru:

<div class="container">
<div class="row">
<div class="col-9">Kolom 1</div>
<div class="col-4">Kolom 2</div>
<div class="col-6">Kolom 3</div>
</div>
</div>

Dalam contoh ini, 9 + 4 = 13, yang lebih besar dari 12, jadi kolom kedua dipenggal ke baris baru.

Pemenggalan Kolom

Tapi apa jika anda ingin memaksa baris baru sendiri? Masukkan pemenggal kolom:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

<div class="w-100"></div> membuat pemenggal lebar 100%, memaksa kolom berikutnya untuk dimulai di baris baru.

Penyusunan Ulang

Kelas Penyusunan

Bootstrap memungkinkan anda mengubah urutan visual kolom:

<div class="container">
<div class="row">
<div class="col order-3">Pertama, tapi terakhir</div>
<div class="col order-2">Kedua, tapi kedua</div>
<div class="col order-1">Ketiga, tapi pertama</div>
</div>
</div>

Kelas order- menentukan urutan kolom. Itu seperti memberitahu kolom untuk bermain kursi musik!

Penyesuaian Kolom

Kelas Penyesuaian

kadang-kadang, anda mungkin ingin menambahkan ruang sebelum kolom. Itu adalah tempat kelas penyesuaian memainkan perannya:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
</div>

Kelas offset-md-4 menambahkan margin-kiri yang setara dengan 4 kolom, mendorong kolom kedua ke kanan.

Pembersihan Kolom di Titik Responsif

Sekiranya susun atur anda berubah di berbagai ukuran layar, anda mungkin perlu membersihkan kolom yang diberikan:

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

Di sini, d-none d-md-block menyembunyikan pemenggal pada layar kecil tetapi menunjukkannya pada layar medium dan ke atas.

Utilitas Margin

Bootstrap menyediakan utilitas margin untuk penyesuaian ruang cepat:

<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
</div>

Kelas ml-auto mendorong kolom kedua ke kanan dengan penyesuaian margin kiri otomatis.

Kelas Kolom Mandiri

Akhirnya, anda dapat menggunakan kelas kolom tanpa wrapper baris untuk fleksibilitas lebih besar:

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: lebar 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: lebar 75% di atas titik pemberhentian sm
</div>
</div>

Pendekatan ini memberikan anda kontrol lebih besar atas susun atur anda, terutama untuk desain yang kompleks.

Dan itu saja, teman-teman! Anda telah belajar tentang kolom Bootstrap. Ingat, latihan membuat sempurna, jadi jangan takut untuk mencoba konsep ini. Secepatnya, anda akan membuat susun atur responsif yang akan membuat bahkan pengembang web yang berpengalaman iri!

Berikut ini adalah tabel rujukan cepat kelas kolom yang kita pelajari:

Kelas	Deskripsi
col-*	Kelas kolom dasar (* dapat 1-12)
col-sm-*	Kolom untuk layar kecil dan ke atas
col-md-*	Kolom untuk layar medium dan ke atas
col-lg-*	Kolom untuk layar besar dan ke atas
col-xl-*	Kolom untuk layar ekstra besar
offset--	Kolom offset (* dapat sm, md, lg, xl)
order-*	Penyusunan ulang kolom (* dapat 1-12)

Selamat coding, dan mayat layout anda selalu responsif!

Credits: Image by storyset