Panduan Awal untuk Tata Letak Borang Bootstrap

Hai sana, para pengembang web yang bersemangat! Saya sangat gembira menjadi panduanmu dalam perjalanan menarik ini ke dunia tata letak borang Bootstrap. Sebagai seseorang yang telah mengajar ilmu komputer selama lebih dari satu dekade, saya telah melihat banyak siswa yang senang saat mereka menyadari betapa kuat dan mudah digunakan Bootstrap dapat menjadi. Jadi, mari kita masuk dan buka rahasia membuat borang yang indah dan responsif!

Dasar Tata Letak Borang

Sebelum kita mulai mengoding, mari kita bayangkan kita adalah arsitek yang merancang sebuah rumah. Seperti rumah yang memerlukan dasar dan struktur yang kuat, borang kita juga memerlukan tata letak yang terencana dengan baik. Bootstrap memberikan kita alat untuk membangun tata letak ini secara efisien dan indah.

Kontainer: Dasar Borang

Setiap borang yang bagus dimulai dengan sebuah kontainer. Dalam Bootstrap, kita menggunakan kelas container untuk membuat kontainer lebar tetap responsif. Berikut adalah contoh sederhana:

<div class="container">
<form>
<!-- Element borang akan ditempatkan disini -->
</form>
</div>

Kontainer ini mirip dengan tanah untuk rumah kita. Ini memberikan borang kita ruang yang ditentukan untuk tinggal dan membantu dengan responsifitas di berbagai ukuran layar.

Utiliti: Pisau Ganda Tata Letak Borang

Utiliti Bootstrap adalah seperti alat serba guna desain web. Mereka adalah kelas kecil yang kuat yang dapat segera memecahkan masalah tata letak umum. Mari kita lihat beberapa utiliti penting untuk tata letak borang:

Utiliti Spacing

Utiliti spacing membantu kita menambahkan margin dan padding ke elemen borang kita. Berikut adalah tabel referensi cepat:

Kelas Utiliti	Tujuan
m-*	Menambahkan margin
p-*	Menambahkan padding
mt-*, mb-*, ms-*, me-*	Menambahkan margin ke atas, ke bawah, ke kiri, ke kanan
pt-*, pb-*, ps-*, pe-*	Menambahkan padding ke atas, ke bawah, ke kiri, ke kanan

mari lihat ini dalam tindakan:

<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
</form>

Dalam contoh ini, mb-3 menambahkan margin ke bawah setiap kelompok borang, memberikan elemen kita sedikit ruang untuk bernapas.

Grid Borang: Membangun Struktur

Sekarang kita memiliki dasar dan alat, mari kita mulai membangun struktur borang kita menggunakan sistem grid Bootstrap. Sistem grid ini berdasarkan tata letak 12 kolom, yang kita dapat gunakan untuk membuat desain yang responsif.

Tata Letak Grid Dasar

Berikut adalah contoh tata letak borang dua kolom sederhana:

<form>
<div class="row">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

Dalam contoh ini, kita menggunakan row untuk membuat kelompok kolom horizontal, dan col-md-6 untuk menentukan bahwa setiap kolom harus memenuhi setengah lebar pada layar medium dan yang lebih besar.

Gutter: Memberikan Borang Ruang Bernapas

Gutter adalah ruang antara kolom dalam sistem grid kita. Secara default, Bootstrap menambahkan margin negatif ke baris dan padding ke kolom untuk menciptakan gutter ini. Namun, kita dapat mengatur mereka menggunakan kelas gutter.

Berikut adalah contoh dengan gutter yang disesuaikan:

<form>
<div class="row g-3">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
</form>

Kelas g-3 menambahkan gutter ukuran 3 (1rem) antara kolom, memberikan borang kita sedikit ruang untuk bernapas.

Borang Horizontal: Perspektif yang Berbeda

kadang-kadang, kita ingin label kita berada di sebelah input kita. Ini adalah tempat borang horizontal berguna. Mari kita buat satu:

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
</div>
</div>
<div class="row mb-3">
<label for="password" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password">
</div>
</div>
</form>

Dalam contoh ini, kita menggunakan col-sm-2 untuk label dan col-sm-10 untuk input, menciptakan tata letak horizontal yang bagus pada layar kecil dan yang lebih besar.

Ukuran Label Borang Horizontal: Menemukan Fit yang Tepat

kadang-kadang, kita perlu mengatur ukuran label dalam borang horizontal. Bootstrap membuat ini mudah dengan kelas ukuran. Berikut adalah cara kita dapat membuat borang dengan ukuran label yang berbeda:

<form>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="email">
</div>
</div>
<div class="row mb-3">
<label for="name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name">
</div>
</div>
<div class="row mb-3">
<label for="message" class="col-sm-2 col-form-label col-form-label-lg">Message</label>
<div class="col-sm-10">
<input type="text" class="form-control form-control-lg" id="message">
</div>
</div>
</form>

Di sini, kita menggunakan col-form-label-sm, col-form-label, dan col-form-label-lg untuk membuat ukuran label kecil, default, dan besar secara berurutan.

Ukuran Kolom: Menyusun Borang

Sistem grid Bootstrap memungkinkan kita menentukan lebar kolom yang tepat. Ini sangat berguna saat kita memerlukan kontrol tepat atas tata letak borang kita. Berikut adalah contoh:

<form>
<div class="row">
<div class="col-2">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col-3">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col-7">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>

Dalam contoh ini, kita menggunakan col-2, col-3, dan col-7 untuk membuat borang baris dimana input mengambil portions khusus dari lebar yang tersedia.

Auto-sizing: Biarkan Bootstrap Melakukan Perhitungan

kadang-kadang, kita ingin input borang kita otomatis menyesuaikan ukuran mereka berdasarkan konten mereka. Fitur auto-sizing Bootstrap membuat ini dimungkinkan. Berikut adalah cara ia bekerja:

<form class="row gy-2 gx-3 align-items-center">
<div class="col-auto">
<label class="visually-hidden" for="autoSizingInput">Name</label>
<input type="text" class="form-control" id="autoSizingInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="visually-hidden" for="autoSizingSelect">Preference</label>
<select class="form-select" id="autoSizingSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

Dalam contoh ini, kelas col-auto memungkinkan setiap kolom untuk menyesuaikan ukuran mereka berdasarkan konten. Kelas gy-2 dan gx-3 menambahkan gutters vertikal dan horisontal, sedangkan align-items-center menengahkan konten secara vertikal di dalam setiap kolom.

Contoh Lengkap: Menggabungkan Semua

Sekarang kita telah menjelajahi banyak konsep, mari kita gabungkan mereka dalam borang yang lebih kompleks:

<div class="container">
<form class="mt-4">
<div class="row mb-3">
<div class="col-md-6">
<label for="firstName" class="form-label">First Name</label>
<input type="text" class="form-control" id="firstName">
</div>
<div class="col-md-6">
<label for="lastName" class="form-label">Last Name</label>
<input type="text" class="form-control" id="lastName">
</div>
</div>
<div class="row mb-3">
<div class="col-md-8">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="col-md-4">
<label for="phone" class="form-label">Phone</label>
<input type="tel" class="form-control" id="phone">
</div>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address">
</div>
<div class="col-md-3">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" id="city">
</div>
<div class="col-md-3">
<label for="zip" class="form-label">Zip Code</label>
<input type="text" class="form-control" id="zip">
</div>
</div>
<div class="row mb-3">
<div class="col-12">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3"></textarea>
</div>
</div>
<div class="row">
<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>

Contoh ini menggabungkan banyak konsep yang kita diskusikan: kontainer, grid layout, gutters, dan desain responsif. Ia menciptakan borang yang terlihat bagus pada keduanya desktop dan perangkat mobile.

Borang Inline: Ringkas dan Efisien

Untuk borang yang lebih sederhana atau saat ruang terbatas, borang inline dapat menjadi solusi yang bagus. Mari kita buat satu:

<form class="row row-cols-lg-auto g-3 align-items-center">
<div class="col-12">
<label class="visually-hidden" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-text">@</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>

<div class="col-12">
<label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
<select class="form-select" id="inlineFormSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>

<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
</div>

<div class="col-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

Borang inline ini menggunakan row-cols-lg-auto untuk secara otomatis menyesuaikan kolom pada layar besar, menciptakan tata letak horizontal yang kompak.

Danitu, teman-teman! Kita telah menjelajahi dunia tata letak borang Bootstrap, dari konsep dasar hingga teknik yang lebih lanjut. Ingat, latihan membuat perfect, jadi jangan takut untuk mencoba dan membuat layout borang Anda sendiri. Selamat mengoding, dan semoga borang Anda selalu responsif dan ramah pengguna!

Credits: Image by storyset