Bootstrap - Sistem Grid: Panduan Ramah untuk Pemula

Hai teman-teman, 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 di sini bersama Anda, menjelaskan segala sesuatu langkah demi langkah. Jadi, ambil secangkir kopi (atau teh, jika itu preferensi Anda), dan mari kita masuk ke dalam!

Apa Itu Sistem Grid Bootstrap?

Sebelum kita mulai, biarkan saya ceritakan sedikit. Bayangkan Anda mencoba mengatur buku di rak buku Anda. Anda ingin menata buku Anda rapi, tapi mereka semua berukuran berbeda. Frustrasi, kan? Well, Sistem Grid Bootstrap seperti rak buku ajaib yang secara otomatis mengatur konten Anda, tidak peduli ukuran atau bentuknya!

Dalam istilah desain web, Sistem Grid adalah alat tata letak yang kuat yang membantu Anda membuat halaman web 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 menggabungkan semua hal.
2. Dalam kontainer, kita memiliki kelas row. PERTimbangkan ini sebagai rak di rak buku kita.
3. Dalam baris, kita memiliki tiga kelas col-sm. Ini adalah bukunya, duduk bersamaan di rak.

Cara Kerja

Sistem Grid Bootstrap didasarkan pada tata letak 12 kolom. Mengapa 12? Well, itu adalah nomor ajaib 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 di antara kolom. Itu seperti memiliki robot mengatur rak buku Anda!

Lebar Kolom Sama

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

<div class="container">
<div class="row">
<div class="col">
1 dari 3
</div>
<div class="col">
2 dari 3 (lebar lebih besar)
</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 lebih besar)
</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 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 di antara tetangganya!

Kelas Responsif

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

Breakpoint	Class infix	Dimensions
Extra small	None	<576px
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Semua Breakpoints

Ini adalah cara menggunakannya:

<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 memiliki rak buku yang terlihat sama baik Anda melihatnya dari jauh atau dekat!

Tumpukan 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 extra kecil, mereka akan tumpuk vertikal. Itu seperti memiliki 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 berbeda pada layar kecil versus layar medium dan keatas. Itu seperti memiliki rak buku yang dapat berubah bentuk!

Kolom Baris

Ingin membuat kolom lebar 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 menciptakan baris dengan dua kolom, tanpa peduli berapa banyak col div Anda punya. Itu seperti memiliki rak buku yang selalu menata buku Anda dalam pasangan!

Penempatan

Terakhir tetapi bukan yang terakhir, Anda dapat menempatkan grid di 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 bermain dengan contoh ini, campur dan padankan kelas yang berbeda, dan lihat apa yang terjadi. Sebelum Anda sadari, Anda akan membuat tata letak yang indah dan responsif seperti seorang ahli!

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

Credits: Image by storyset