Indonesia

Tutorial Bootstrap

Tata Letak Bootstrap

Konten Bootstrap

Komponen Bootstrap

Bootstrap Formulir

Pembantu Bootstrap

Utilitas Bootstrap

Demos Bootstrap

Bootstrap - Checkout RTL Demo

Overview

Halo, para pengembang web yang sedang berkembang! Hari ini, kita akan masuk ke dunia yang menarik Bootstrap dan membuat halaman checkout yang indah dengan dukungan RTL (Right-to-Left). Jangan khawatir jika Anda baru dalam hal ini - saya akan menggイド Anda melalui setiap langkah dengan kesabaran seorang guru berpengalaman yang telah membantu banyak siswa seperti Anda.

Bootstrap-Checkout RTL Demo

Apa Itu Bootstrap?

Sebelum kita masuk ke demo checkout kita, mari kitaambil sedikit waktu untuk memahami apa itu Bootstrap. Bayangkan Anda membangun sebuah rumah. Bootstrap seperti sebuah kit prefab yang memberikan Anda semua elemen struktural dasar yang Anda butuhkan. Itu adalah sebuah kerangka CSS bebas dan open-source yang membantu Anda membuat website responsif, mobile-first secara cepat dan mudah.

Mengapa Menggunakan Bootstrap?

  1. Menyimpan waktu
  2. Menjamin konsistensi
  3. Desain responsif siap pakai
  4. Komunitas besar dan dukungan

Menyiapkan Proyek Kita

Ayo mulai menyiapkan proyek kita. Kita akan perlu menyertakan Bootstrap dalam file HTML kita. Berikut cara kita melakukannya:

<!DOCTYPE html>
<html lang="id" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Checkout RTL Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body>
<!-- Konten kita akan dimasukkan di sini -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Dalam pengaturan ini, kita menyertakan keduanya, CSS Bootstrap biasa dan versi RTL. Atribut dir="rtl" dalam tag <html> memberitahu browser untuk menggambar halaman dalam arah kanan-ke-kiri.

Membuat Form Checkout

Sekarang, mari kita buat form checkout kita. Kita akan menggunakan sistem grid dan komponen form Bootstrap untuk membuat tata letak yang responsif.

<div class="container mt-5">
<h1 class="mb-4">Checkout</h1>
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Nama Depan</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Nama Belakang</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>
<!-- Field-form lainnya akan dimasukkan di sini -->
</form>
</div>

mari kitauraikan ini:

  • Kelas container membuat sebuah wadah yang terpusat untuk konten kita.
  • Kelas row dan col-md-6 membuat tata letak dua kolom yang responsif.
  • Kelas form-label dan form-control mensyaratkan label dan input kita.

Menambahkan Field Form Lainnya

Mari kita tambahkan beberapa field ke form kita:

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="address" class="form-label">Alamat</label>
<input type="text" class="form-control" id="address" required>
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country" class="form-label">Negara</label>
<select class="form-select" id="country" required>
<option value="">Pilih...</option>
<option>United States</option>
<option>Canada</option>
<option>Mexico</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label for="state" class="form-label">Negara Bagian</label>
<select class="form-select" id="state" required>
<option value="">Pilih...</option>
<option>California</option>
<option>New York</option>
<option>Texas</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="zip" class="form-label">Kode Pos</label>
<input type="text" class="form-control" id="zip" required>
</div>
</div>

Di sini, kita menambahkan field untuk email, alamat, negara, negara bagian, dan kode pos. Perhatikan bagaimana kita menggunakan form-select untuk menu dropdown.

Informasi Pembayaran

Sekarang, mari kita tambahkan seksi untuk informasi pembayaran:

<h3 class="mb-3">Pembayaran</h3>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Kartu Kredit</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">Kartu Debit</label>
</div>
<div class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="cc-name" class="form-label">Nama di kartu</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6 mb-3">
<label for="cc-number" class="form-label">Nomor kartu kredit</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-3">
<label for="cc-expiration" class="form-label">Kadaluarsa</label>
<input type="text" class="form-control" id="cc-expiration" required>
</div>
<div class="col-md-3 mb-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Bagian ini mencakup tombol radio untuk metode pembayaran dan field untuk detil kartu.

Menambahkan Tombol Kirim

Akhirnya, mari kita tambahkan tombol kirim ke form kita:

<button class="btn btn-primary btn-lg btn-block" type="submit">Place Order</button>

Kelas btn, btn-primary, dan btn-lg mensyaratkan tombol kita sebagai tombol besar berwarna utama.

Pertimbangan RTL

Saat bekerja dengan tata letak RTL, perhatikan titik berikut:

  1. Penyusunan teks: Dalam tata letak RTL, teks biasanya disusun ke kanan.
  2. Tata letak form: Label form harus muncul di sebelah kanan input mereka.
  3. Ikon: Ikon arah (seperti panah) harus dicerminkan.

CSS RTL Bootstrap mengurus sebagian besar pertimbangan ini secara otomatis!

Kesimpulan

Selamat! Anda telah membuat halaman checkout responsif, RTL-friendly menggunakan Bootstrap. Ingat, latihan membuat sempurna. Cobalah untuk memodifikasi form ini, menambahkan field baru, atau mengubah gaya untuk membuatnya milik Anda.

Berikut adalah tabel yang menguraikan kelas utama Bootstrap yang kita gunakan:

Kelas Tujuan
container Membuat wadah yang terpusat untuk konten
row Membuat grup kolom horisontal
col-md-* Membuat kolom dalam berbagai lebar
form-label Meng gayakan label form
form-control Meng gayakan input form
form-select Meng gayakan menu dropdown
form-check Meng gayakan checkbox dan tombol radio
btn Gaya tombol dasar
btn-primary Menggunakan warna utama untuk tombol
btn-lg Membuat tombol besar

Selamat mengoding, dan ingat - setiap ahli pernah menjadi pemula. Terus latihan, dan Anda akan menjadi ahli Bootstrap dalam waktu singkat!

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Album Bootstrap RTL
Tutorial Selanjutnya:
Demo Bootstrap-Carousel RTL