ID (Indonesia) Translation

Bootstrap - Demos Grid

Halo sana, para pengembang web masa depan! Hari ini, kita akan mendalam ke dunia yang menarik dari sistem Grid Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya di sini untuk menghidahkan Anda dalam perjalanan ini langkah demi langkah. Jadi, siapkan topi keras maya Anda, dan mari kita mulai membangun!

Apa Itu Grid?

Sebelum kita masuk ke dalam 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 dan membentuk layout yang terstruktur. Dalam desain web, grid berfungsi untuk mendampingi - itu membantu kita mengatur konten di halaman web dalam cara yang rapi dan tentu.

Keajaiban Grid Web

Dalam era awal desain web (ketika dinosaurus menjelajahi internet), mengatur halaman web seperti mencoba membangun rumah dengan Jell-O - kacau dan tak dapat diprediksi. 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. Gutter: Ruang antara kolom dan baris

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

Cara Kerja Sistem Grid Bootstrap

Sekarang kita mengerti apa itu grid, mari kita jelajahi sistem grid Bootstrap. Itu seperti pisau瑞士 Army knife untuk alat layout web - multifungsi, dapat dipercaya, dan sangat membantu!

Keajaiban 12 Kolom

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

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 kita.
• row mendirikan kelompok kolom horizontal.
• col-md-6 membuat dua kolom lebar yang sama di layar ukuran medium dan ke atas.

Ketika Anda menjalankan kode ini, Anda akan melihat dua kolom berdampingan, masing-masing mengambil setengah lebar wadah. Itu seperti membagi roti 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 layout 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 secara sama.

Itu seperti memiliki website yang berubah bentuk! ?

Penyusunan: Grid Dalam Grid

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

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 di dalamnya, kita memiliki dua kolom yang sama. Itu seperti inception, tapi dengan grid!

Menggeser Kolom: Seni Penyisihan

kadang-kadang, Anda perlu menambahkan ruang untuk layout Anda. Itu di mana teknik penggeseran kolom menjadi berguna. Itu seperti 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 layout yang menarik visually!

Catatan Trik Grid

Berikut adalah tabel praktis dari metode grid 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 layout unik Anda sendiri.

Akhir kata, sistem grid Bootstrap adalah seperti kekuatan super bagi pengembang web. Itu memungkinkan kita untuk membuat layout responsif, fleksibel dengan mudah. Ketika Anda terus menjalankan perjalanan Anda di dunia pengembangan web, Anda akan menemukan diri Anda mencari alat ini berkali-kali.

Jadi, terus coding, terus belajar, dan terutama, bersenang-senang! Siapa tahu? Website besar berikutnya mungkin hanya berjarak satu grid. Selamat coding, para ahli web masa depan! ?‍♂️?

Credits: Image by storyset