Malay

Tutorial Bootstrap

Susun Atur Bootstrap

Kandungan Bootstrap

Komponen Bootstrap

Bootstrap Borang

Bantuan Bootstrap

Utiliti Bootstrap

Demos Bootstrap

Bootstrap - Demo Pengecekan

Pandangan Umum

Hai, para pengembang web masa depan! Hari ini, kita akan memulai perjalanan menarik untuk membuat halaman pengecekan menggunakan Bootstrap. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk mengarahkan Anda melalui proses ini. Jangan khawatir jika Anda baru belajar coding - kita akan mengambil langkah-langkah perlahan-lahan, dan pada akhirnya, Anda akan memiliki formulir pengecekan yang terlihat profesional dan Anda akan banggakan!

Bootstrap-Checkout Demo

Apa Itu Bootstrap?

Sebelum kita memulai, mari bicarakan tentang Bootstrap. Bayangkan Anda sedang membangun sebuah rumah. Daripada membuat setiap batu dari awal, tidakkah Anda merasa senang jika Anda sudah memiliki dinding dan atap yang siap pakai? Itu adalah apa yang Bootstrap lakukan untuk pengembangan web - sebuah koleksi komponen dan gaya yang siap pakai yang membuat proses membuat website yang indah menjadi lebih mudah dan cepat.

Menyiapkan Proyek Kita

Langkah 1: termasuk Bootstrap

Pertama, kita perlu termasuk Bootstrap dalam proyek kita. Itu seperti mengemas peralatan kita sebelum memulai kerja. Tambahkan baris ini ke <head> file HTML Anda:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Baris ini mengambil gaya dan skrip Bootstrap dari internet, jadi kita tidak perlu mengunduh apa-apa.

Langkah 2: Struktur HTML Dasar

Sekarang, mari kita mengatur struktur HTML dasar kita:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Form Pengecekan</h1>
<!-- Form kita akan ditempatkan di sini -->
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ini akan membuat halaman web dasar dengan judul dan kontainer untuk formulir kita. Kelas container adalah kelas Bootstrap yang memusatkan konten kita dan memberikan padding yang bagus.

Membangun Formulir Pengecekan

Langkah 3: Membuat Formulir

Sekarang, mari kita tambahkan formulir kita di dalam kontainer:

<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>

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="address" class="form-label">Alamat</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
</div>

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

mari kitauraikan ini:

  1. Kita menggunakan sistem grid Bootstrap dengan row dan col-md-6 untuk membuat dua kolom untuk nama depan dan nama belakang.
  2. Kelas mb-3 menambahkan margin ke bawah setiap grup formulir.
  3. form-label dan form-control adalah kelas Bootstrap yang menggaya label dan input kita.
  4. Kelas btn menggaya tombol pengiriman kita.

Langkah 4: Menambahkan Informasi Pembayaran

Mari kita tambahkan seksi informasi pembayaran:

<h4 class="mb-3">Pembayaran</h4>
<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>
<div class="row gy-3">
<div class="col-md-6">
<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">
<label for="cc-number" class="form-label">Nomor kartu kredit</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-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">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Di sini, kita menambahkan tombol radio untuk pemilihan metode pembayaran dan ruas untuk detil kartu. Kelas gy-3 menambahkan jarak vertikal antara baris.

Menambahkan Pengalaman Pengguna

Langkah 5: Menambahkan Feedback Validasi

Bootstrap menyediakan kelas untuk feedback validasi formulir. Mari kita tambahkan beberapa ke input nama depan kita:

<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 class="valid-feedback">
Terlihat bagus!
</div>
<div class="invalid-feedback">
Silakan masukkan nama depan Anda.
</div>
</div>

Untuk membuat ini bekerja, kita perlu menambahkan sedikit JavaScript:

<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

Skrip ini menambahkan kelas was-validated ke formulir saat pengiriman, yang memicu tampilan feedback validasi.

Kesimpulan

Selamat! Anda telah membuat formulir pengecekan yang terlihat profesional menggunakan Bootstrap. Mari kita ringkasan apa yang kita pelajari:

  1. Cara termasuk Bootstrap dalam proyek kita
  2. Menggunakan sistem grid Bootstrap untuk tata letak
  3. Menggaya elemen formulir dengan kelas Bootstrap
  4. Menambahkan feedback validasi

Ingat, latihan membuat ahli. Cobalah untuk memodifikasi formulir ini, menambahkan ruas baru, atau mengubah gaya. Semakin banyak Anda ber eksperimen, semakin baik Anda akan menjadi!

Berikut adalah tabel kelas Bootstrap utama yang kita gunakan:

Kelas Tujuan
container Mempusatkan konten dan menambahkan padding
row Membuat grup kolom horizontal
col-md-6 Membuat kolom yang 50% lebar pada layar medium dan keatas
form-label Menggaya label formulir
form-control Menggaya input formulir
btn Gaya tombol dasar
btn-primary Memberikan warna biru ke tombol
btn-lg Membuat tombol lebih besar
form-check Menggaya kotak centang dan tombol radio
valid-feedback Menampilkan feedback untuk input valid
invalid-feedback Menampilkan feedback untuk input tidak valid

Selamat coding, dan ingat - setiap ahli pernah menjadi pemula. Terus latihan, dan Anda akan terkejut dengan apa yang Anda bisa buat!

Credits: Image by storyset

Tutorial Sebelumnya:
Demo Harga Bootstrap
Tutorial Seterusnya:
Demo Produk Bootstrap