Tiếng Việt

Hướng dẫn Bootstrap

Bố cục Bootstrap

Nội dung Bootstrap

Thành phần Bootstrap

Bootstrap Forms

Trợ giúp Bootstrap

Tiện ích Bootstrap

Demos Bootstrap

Bootstrap - Xem trước Demo thanh toán

Tổng quan

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị để tạo một trang thanh toán sử dụng Bootstrap. Là giáo viên máy tính hàng xóm thân thiện của bạn, tôi rất vui mừng được hướng dẫn bạn qua quá trình này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ cùng nhau từng bước, và cuối cùng, bạn sẽ có một biểu mẫu thanh toán chuyên nghiệp mà bạn có thể tự hào!

Bootstrap-Checkout Demo

Bootstrap là gì?

Trước khi chúng ta bắt đầu, hãy nói về Bootstrap. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Thay vì tạo từng viên gạch từ đầu, liệu có phải là điều tuyệt vời nếu bạn có những bức tường và mái nhà đã sẵn sàng? Đó là điều mà Bootstrap mang lại cho phát triển web - một bộ các thành phần và phong cách đã được xây dựng trước, giúp tạo ra các trang web đẹp mắt dễ dàng và nhanh chóng hơn.

Thiết lập Dự án của Chúng ta

Bước 1: Bao gồm Bootstrap

Trước hết, chúng ta cần bao gồm Bootstrap trong dự án của mình. Điều này giống như chuẩn bị hộp công cụ trước khi bắt đầu làm việc. Thêm các dòng này vào phần <head> của tệp HTML của bạn:

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

Các dòng này lấy các phong cách và скрипты của Bootstrap từ internet, vì vậy chúng ta không cần phải tải xuống bất cứ thứ gì.

Bước 2: Cấu trúc HTML cơ bản

Bây giờ, hãy thiết lập cấu trúc HTML cơ bản của chúng ta:

<!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>Biểu mẫu Thanh toán</h1>
<!-- Biểu mẫu của chúng ta sẽ ở đây -->
</div>

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

Điều này tạo ra một trang web cơ bản với tiêu đề và một容器 cho biểu mẫu của chúng ta. Lớp container là một lớp Bootstrap giúp căn giữa nội dung và thêm một chút padding.

Xây dựng Biểu mẫu Thanh toán

Bước 3: Tạo Biểu mẫu

Bây giờ, hãy thêm biểu mẫu của chúng ta bên trong container:

<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Tên</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Họ</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">Địa chỉ</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
</div>

<button class="btn btn-primary btn-lg" type="submit">Đặt hàng</button>
</form>

Hãy phân tích điều này:

  1. Chúng ta sử dụng hệ thống lưới của Bootstrap với row và col-md-6 để tạo hai cột cho tên và họ.
  2. Lớp mb-3 thêm margin ở dưới cùng của mỗi nhóm biểu mẫu.
  3. form-label và form-control là các lớp Bootstrap để định dạng các nhãn và đầu vào.
  4. Các lớp btn định dạng nút gửi.

Bước 4: Thêm Thông tin Thanh toán

Hãy thêm một phần cho thông tin thanh toán:

<h4 class="mb-3">Thanh toán</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">Thẻ tín dụng</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">Thẻ ghi nợ</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">Tên trên thẻ</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">Số thẻ tín dụng</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">Hết hạn</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>

Ở đây, chúng ta đã thêm các nút radio để chọn phương thức thanh toán và các trường cho chi tiết thẻ. Lớp gy-3 thêm các khe hở dọc giữa các hàng.

Cải thiện Trải nghiệm Người dùng

Bước 5: Thêm Phản hồi Xác nhận

Bootstrap cung cấp các lớp cho phản hồi xác nhận biểu mẫu. Hãy thêm một số vào trường tên đầu tiên:

<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Tên</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">
Trông不错的!
</div>
<div class="invalid-feedback">
Vui lòng nhập tên của bạn.
</div>
</div>

Để làm cho điều này hoạt động, chúng ta cần thêm một chút 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>

Skrypt này thêm lớp was-validated vào biểu mẫu khi gửi, điều này kích hoạt hiển thị phản hồi xác nhận.

Kết luận

Chúc mừng! Bạn vừa tạo xong một biểu mẫu thanh toán chuyên nghiệp sử dụng Bootstrap. Hãy tóm tắt những gì chúng ta đã học được:

  1. Cách bao gồm Bootstrap trong dự án của chúng ta
  2. Sử dụng hệ thống lưới của Bootstrap để tạo bố cục
  3. Định dạng các phần tử biểu mẫu với các lớp Bootstrap
  4. Thêm phản hồi xác nhận

Nhớ rằng, thực hành làm nên完美的. Thử thay đổi biểu mẫu này, thêm các trường mới hoặc thay đổi phong cách. Càng thử nghiệm nhiều, bạn sẽ càng trở nên thành thạo hơn!

Dưới đây là bảng các lớp Bootstrap chính mà chúng ta đã sử dụng:

Lớp Mục đích
container Căn giữa nội dung và thêm padding
row Tạo một nhóm cột nằm ngang
col-md-6 Tạo một cột rộng 50% trên màn hình trung bình và lớn hơn
form-label Định dạng nhãn biểu mẫu
form-control Định dạng đầu vào biểu mẫu
btn Phong cách nút cơ bản
btn-primary Đưa nút có màu xanh lam
btn-lg Làm nút lớn hơn
form-check Định dạng hộp kiểm và nút radio
valid-feedback Hiển thị phản hồi cho đầu vào hợp lệ
invalid-feedback Hiển thị phản hồi cho đầu vào không hợp lệ

Chúc các bạn may mắn và nhớ rằng - mỗi chuyên gia từng là người mới bắt đầu. Hãy tiếp tục thực hành, và bạn sẽ ngạc nhiên với những gì bạn có thể tạo ra!

Credits: Image by storyset

Hướng Dẫn Trước:
Demo Định giá Bootstrap
Hướng Dẫn Tiếp Theo:
Demo Sản phẩm Bootstrap