Bootstrap - Grid Demo

Hai saudara-saudari pengembang web masa depan! Hari ini, kita akan masuk ke dunia yang menarik dari sistem Grid Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk mengorbit Anda dalam perjalanan ini secara berkelanjutan. Jadi, siapkan topi keras maya Anda, dan mari kita mulai membangun!

Apa Itu Grid?

Sebelum kita melompat ke sistem grid Bootstrap, mari bicarakan tentang grid secara umum. Bayangkan Anda melihat papan catur. Itu adalah grid! Itu adalah rangkaian garis horizontal dan vertikal yang bersinggungan yang membentuk Tata letak yang terstruktur. Dalam desain web, grid berfungsi untuk tujuan yang sama - membantu kita mengatur konten di halaman web dalam cara yang rapi dan teratur.

Magic Web Grid

Dalam era awal desain web (ketika dinosaurus mengembara di internet), mengatur halaman web seperti mencoba membangun rumah dengan Jell-O - kacau dan tak tentu. Tetapi kemudian datang grid, dan tiba-tiba, kita memiliki dasar yang kokoh untuk bekerja.

Sebuah grid web biasanya terdiri dari:

1. Kolom: Divisi vertikal halaman
2. Baris: Divisi horizontal halaman
3. Gutters: Ruang antara kolom dan baris

Pikirkan itu seperti rencana kota digital, di mana setiap bangunan (elemen konten) memiliki petak yang ditentukan (sel grid).

Kerja Sistem Grid Bootstrap

Sekarang kita mengerti apa itu grid, mari kita eksplor sistem grid Bootstrap. Itu seperti pisau multifungsi Swiss Army knife dalam alat Tata letak web - multifungsi, dapat dipercaya, dan sangat praktis!

12-Kolom Marvel

Sistem grid Bootstrap didasarkan pada Tata letak 12-kolom. Mengapa 12, Anda bertanya? Well, itu dapat dibagi oleh 2, 3, 4, dan 6, yang memberikan kita banyak fleksibilitas dalam membuat Tata letak yang berbeda. Itu seperti memiliki pizza yang Anda dapat mudah memotong menjadi setengah, separuh, atau seperempat - yum!

mari kita lihat contoh dasar:

<div class="container">
<div class="row">
<div class="col-md-6">Kolom 1</div>
<div class="col-md-6">Kolom 2</div>
</div>
</div>

Dalam kode ini:

• container membuat wadah yang terpusat, lebar tetap untuk konten kami.
• row mendirikan kelompok kolom horizontal.
• col-md-6 membuat dua kolom lebar sama di layar berukuran medium dan ke atas.

Ketika Anda menjalankan kode ini, Anda akan melihat dua kolom di samping yang lain, masing-masing mengambil setengah lebar wadah. Itu seperti membagi sandwich Anda dengan teman - sepenuhnya sama!

Desain Responsif: Satu Ukuran Tidak Memenuhi Semua

Salah satu hal yang paling menarik tentang sistem grid Bootstrap adalah responsivitasnya. Itu seperti memiliki website kameleon yang menyesuaikan diri dengan lingkungannya!

mari tingkatkan contoh sebelumnya:

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

Kode ini membuat Tata letak yang berubah berdasarkan ukuran layar:

• Pada layar kecil (sm), setiap kolom mengambil lebar penuh (12 kolom).
• Pada layar medium (md), dua kolom pertama berbagi lebar, sedangkan kolom ketiga mengambil lebar penuh.
• Pada layar besar (lg), semua tiga kolom berbagi lebar sama.

Itu seperti memiliki website yang berubah bentuk! ?

Penyusunan: Grid Dalam Grid

Ketika Anda khawatir itu tidak bisa menjadi lebih menarik, Bootstrap memungkinkan Anda menyusun grid dalam grid. Itu seperti bermain dengan boneka Rusia nesting, tapi jauh lebih menarik!

mari lihat contoh:

<div class="container">
<div class="row">
<div class="col-md-9">
Tingkat 1: .col-md-9
<div class="row">
<div class="col-md-6">Tingkat 2: .col-md-6</div>
<div class="col-md-6">Tingkat 2: .col-md-6</div>
</div>
</div>
</div>
</div>

Ini membuat kolom yang mengambil 9/12 lebar, dan didalamnya, kita memiliki dua kolom yang sama. Itu seperti inception, tapi dengan grid!

Menyusun Kolom: Seni Penyisihan

kadang-kadang, Anda perlu menambahkan ruang untuk nafas dalam Tata letak Anda. Itu di mana penyesuaian kolom membantu. Itu seperti menjaga jarak sosial untuk elemen web Anda!

<div class="container">
<div class="row">
<div class="col-md-4">Kolom 1</div>
<div class="col-md-4 offset-md-4">Kolom 2</div>
</div>
</div>

Kode ini membuat dua kolom dengan jarak antara mereka. Kelas offset-md-4 mendorong kolom kedua ke kanan oleh 4 kolom. Itu adalah cara bagus untuk membuat Tata letak yang menarik!

Catatan Metode Grid

Ini adalah tabel praktis dari metode grid yang paling umum di Bootstrap:

Metode	Deskripsi
.container	Membuat wadah responsif lebar tetap
.container-fluid	Membuat wadah lebar penuh
.row	Membuat kelompok kolom horizontal
.col-*	Membuat kolom (* dapat berupa sm, md, lg, xl)
.offset-*	Mendorong kolom ke kanan
.order-*	Mengubah urutan visual kolom

Ingat, latihan membuat sempurna! Jangan takut untuk mencoba metode ini dan membuat Tata letak unik Anda sendiri.

Di akhirnya, sistem grid Bootstrap adalah seperti superpower bagi pengembang web. Itu memungkinkan kita membuat Tata letak responsif, fleksibel dengan mudah. Ketika Anda terus melanjutkan perjalanan Anda dalam pengembangan web, Anda akan menemukan bahwa Anda sering mencari alat ini.

Jadi, terus mengoding, terus belajar, dan yang paling penting, bersenang-senang! Siapa tahu? Website besar berikutnya bisa saja berjarak satu grid. Selamat coding, para ahli web masa depan! ?‍♂️?

Credits: Image by storyset