Malay

Tutorial Bootstrap

Susun Atur Bootstrap

Kandungan Bootstrap

Komponen Bootstrap

Bootstrap Borang

Bantuan Bootstrap

Utiliti Bootstrap

Demos Bootstrap

Bootstrap - Checkout RTL Demo

Overview

Hai, pengembang web yang sedang mencari tantangan! Hari ini, kita akan mempelajari dunia yang menarik Bootstrap dan membuat halaman checkout yang indah dengan dukungan RTL (Right-to-Left). Jangan khawatir jika Anda masih pemula - saya akan memandu Anda 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 kita spendsi sedikit waktu untuk memahami apa itu Bootstrap. Bayangkan Anda membangun sebuah rumah. Bootstrap seperti sebuah paket prefab yang memberikan Anda semua elemen struktural dasar yang Anda butuhkan. Itu adalah kerangka CSS gratis dan open-source yang membantu Anda membuat website responsif, mobile-first secara cepat dan mudah.

Mengapa Menggunakan Bootstrap?

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

Menyiapkan Proyek Kita

Mari kita mulai dengan menyiapkan proyek kita. Kita akan perlu menyertakan Bootstrap dalam file HTML kita. Ini adalah cara kita melakukannya:

<!DOCTYPE html>
<html lang="en" 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 berada 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 baik CSS Bootstrap biasa maupun versi RTL. Atribut dir="rtl" dalam tag <html> mengatakan kepada browser untuk merender 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 berada 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 menyiapkan 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. Catatlah bagaimana kita menggunakan form-select untuk menu dropdown.

Informasi Pembayaran

Sekarang, mari kita tambahkan bagian 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 termasuk tombol radio untuk metode pembayaran dan field untuk rincian kartu.

Menambahkan Tombol Submit

Akhirnya, mari kita tambahkan tombol submit ke form kita:

<button class="btn btn-primary btn-lg btn-block" type="submit">Pasang Pesanan</button>

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

Pertimbangan RTL

Saat bekerja dengan tata letak RTL, ingatlah tentang titik berikut:

  1. Penjajaran teks: Dalam tata letak RTL, teks biasanya dijejer ke kanan.
  2. Tata letak form: Label form harus muncul di sebelah kanan inputnya.
  3. Ikon: Ikon arah (seperti panah) harus dipantulkan.

CSS RTL Bootstrap mengurus sebagian besar pertimbangan ini secara otomatis!

Kesimpulan

Selamat! Anda telah menciptakan halaman checkout responsif, dukungan RTL menggunakan Bootstrap. Ingat, latihan membuat sempurna. Cobalah untuk memodifikasi form ini, tambahkan field baru, atau ubah gayanya untuk membuatnya menjadi milik Anda.

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

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

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

Credits: Image by storyset

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