Bootstrap - Sistem Grid: Panduan Menyenangkan untuk Pemula

Hai sana, para pengembang web masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia Sistem Grid Bootstrap. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - saya akan ada disini bersama Anda, menjelaskan segala sesuatu secara langkah demi langkah. Jadi, ambillah secangkir kopi (atau teh, jika itu preferensi Anda), dan mari kita masuk ke dalam!

Apa Itu Sistem Grid Bootstrap?

Sebelum kita mulai, mari saya ceritakan sedikit cerita. Bayangkan Anda mencoba mengatur rak buku Anda. Anda ingin menata buku Anda rapi, tetapi mereka semua berukuran berbeda. Frustrasi, kan? Well, Sistem Grid Bootstrap seperti rak buku magis yang secara otomatis mengatur konten Anda, tanpa menghiraukan ukuran atau bentuknya!

Dalam istilah desain web, Sistem Grid adalah alat Tata Letak yang kuat dan membantu Anda menciptakan halaman web yang responsif dan terstruktur. Itu seperti memiliki asisten pribadi yang mengatur konten halaman web Anda secara sempurna, baik itu dilihat di monitor desktop besar atau layar smartphone kecil.

Contoh Dasar

Mari kita mulai dengan contoh sederhana untuk merasakan air. Ini adalah struktur dasar Sistem Grid Bootstrap:

<div class="container">
<div class="row">
<div class="col-sm">
Salah satu dari tiga kolom
</div>
<div class="col-sm">
Salah satu dari tiga kolom
</div>
<div class="col-sm">
Salah satu dari tiga kolom
</div>
</div>
</div>

Apa yang terjadi di sini? Mari kitauraikan:

1. Kita mulai dengan kelas container. Ini seperti kotak luar yang menahan semua hal.
2. Dalam kontainer, kita memiliki kelas row. Pergunakan ini sebagai rak dalam analogi rak buku kita.
3. Dalam baris, kita memiliki tiga kelas col-sm. Ini adalah buku-buku kita, duduk bersamaan di rak.

Cara Kerjanya

Sistem Grid Bootstrap didasarkan pada Tata Letak 12 kolom. Mengapa 12? Itu adalah nomor magis dalam desain web karena dapat dibagi oleh 1, 2, 3, 4, dan 6, memberikan kita banyak fleksibilitas!

Ini adalah representasi visual:

1	2	3	4	5	6	7	8	9	10	11	12
Kolom	Kolom	Kolom	Kolom	Kolom	Kolom	Kolom	Kolom	Kolom	Kolom	Kolom	Kolom

Setiap kolom ini dapat digabungkan untuk menciptakan area konten yang lebih luas. Misalnya, Anda dapat memiliki tata letak dengan dua kolom 6 unit masing-masing, atau tiga kolom 4 unit masing-masing. Itu seperti bermain dengan blok bangunan!

Kolom Auto-layout

Sekarang, mari kita lihat beberapa trik menarik. Bootstrap dapat secara otomatis mengatur lebar kolom untuk Anda. Cek ini:

<div class="container">
<div class="row">
<div class="col">
1 dari 2
</div>
<div class="col">
2 dari 2
</div>
</div>
<div class="row">
<div class="col">
1 dari 3
</div>
<div class="col">
2 dari 3
</div>
<div class="col">
3 dari 3
</div>
</div>
</div>

Dalam contoh ini, kita tidak menentukan lebar kolom. Bootstrap cukup cerdas untuk membagi ruang secara merata antara kolom. Itu seperti memiliki robot yang mengatur rak buku Anda!

Lebar Kolom Sama

Ingin semua kolom memiliki lebar yang sama, tanpa menghiraukan konten? Mudah-mudahan!

<div class="container">
<div class="row">
<div class="col">
1 dari 3
</div>
<div class="col">
2 dari 3 (lebar)
</div>
<div class="col">
3 dari 3
</div>
</div>
</div>

Meskipun kolom tengah memiliki lebih banyak konten, semua tiga kolom akan tetap memiliki lebar yang sama. Itu seperti memiliki buku yang dapat diperluas yang selalu pas di rak Anda!

Menentukan Lebar Satu Kolom

kadang-kadang, Anda ingin satu kolom memiliki lebar tertentu dan membiarkan yang lain menyesuaikan secara otomatis. Ini adalah cara:

<div class="container">
<div class="row">
<div class="col">
1 dari 3
</div>
<div class="col-6">
2 dari 3 (lebar)
</div>
<div class="col">
3 dari 3
</div>
</div>
</div>

Dalam kasus ini, kolom tengah akan mengambil 6 unit (setengah lebar), dan dua kolom lain akan membagi ruang yang tersisa secara merata.

Konten Lebar Variabel

Apa jika Anda ingin sebuah kolom menyesuaikan lebarnya berdasarkan kontennya? Bootstrap menangani hal itu untuk Anda:

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 dari 3
</div>
<div class="col-md-auto">
Konten lebar variabel
</div>
<div class="col col-lg-2">
3 dari 3
</div>
</div>
</div>

Kelas col-md-auto memungkinkan kolom tersebut untuk tumbuh atau menyusut berdasarkan kontennya. Itu seperti memiliki buku yang dapat mengubah ukurannya untuk pas antara tetangganya!

Kelas Responsif

Sekarang, mari kita bicarakan tentang membuat tata letak kita responsif. Bootstrap menggunakan titik pemutus untuk mengatur tata letak berdasarkan ukuran layar. Ini adalah titik pemutus utama:

Titik Pemutus	Sufiks Kelas	Dimensi
Extra kecil	None	<576px
Kecil	sm	≥576px
Menengah	md	≥768px
Besar	lg	≥992px
Extra besar	xl	≥1200px
Extra extra besar	xxl	≥1400px

Semua Titik Pemutus

Ini adalah cara menggunaannya:

<div class="container">
<div class="row">
<div class="col">kolom</div>
<div class="col">kolom</div>
<div class="col">kolom</div>
<div class="col">kolom</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>

Tata letak ini akan tetap sama di semua ukuran layar. Itu seperti rak buku yang terlihat sama baiknya saat Anda melihatnya dari jauh atau dekat!

Bertumpuk ke Horizontal

Tapi apa jika kita ingin tata letak kita berubah berdasarkan ukuran layar? Cek ini:

<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>

Pada layar kecil dan keatas, kolom ini akan berada di samping. Pada layar ekstra kecil, mereka akan bertumpuk vertikal. Itu seperti rak buku yang dapat berubah menjadi menara buku saat ruang terbatas!

Campur dan Padankan

Anda juga dapat mencampur dan padankan ukuran kolom untuk berbagai ukuran layar:

<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

Tata letak ini akan terlihat berbeda pada layar kecil dibandingkan layar menengah dan keatas. Itu seperti rak buku yang dapat berubah bentuk!

Kolom Baris

Ingin membuat kolom lebar yang sama secara cepat? Gunakan kolom baris:

<div class="container">
<div class="row row-cols-2">
<div class="col">Kolom</div>
<div class="col">Kolom</div>
<div class="col">Kolom</div>
<div class="col">Kolom</div>
</div>
</div>

Ini akan menciptakan baris dengan dua kolom, tanpa menghiraukan berapa banyak col div Anda punya. Itu seperti rak buku yang selalu menata buku Anda dalam pasangan!

Penempatan

Terakhir tapi bukan paling kurang, Anda dapat menempatkan grid dalam grid:

<div class="container">
<div class="row">
<div class="col-sm-3">
Tingkat 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Tingkat 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Tingkat 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

Ini menciptakan grid dalam grid. Itu seperti memiliki rak buku kecil di dalam rak buku besar!

Dan itu saja, teman-teman! Anda baru saja mengambil langkah pertama ke dunia Sistem Grid Bootstrap. Ingat, latihan membuat sempurna. Cobalah untuk memainkan contoh ini, mencampur dan padankan kelas yang berbeda, dan lihat apa yang terjadi. Sebelum Anda mengetahui, Anda akan menciptakan tata letak yang indah dan responsif seperti seorang ahli!

Selamat coding, dan semoga halaman web Anda selalu teratur sempurna!

Credits: Image by storyset