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

Tổng quan

Xin chào các bạn đang học lập trình web! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của Bootstrap và tạo một trang thanh toán đẹp mắt với hỗ trợ RTL (Từ phải sang trái). Đừng lo lắng nếu bạn là người mới bắt đầu - tôi sẽ hướng dẫn bạn từng bước với sự kiên nhẫn của một giáo viên dày dạn kinh nghiệm đã giúp đỡ biết bao sinh viên như bạn.

Bootstrap-Checkout RTL Demo

Bootstrap là gì?

Trước khi chúng ta bắt đầu với bài demo thanh toán, hãy cùng nhau hiểu rõ Bootstrap là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bootstrap giống như một bộ kit预制 mà cung cấp cho bạn tất cả các yếu tố cấu trúc cơ bản mà bạn cần. Đây là một bộ khung CSS miễn phí, mã nguồn mở giúp bạn tạo ra các trang web responsive, ưu tiên di động nhanh chóng và dễ dàng.

Tại sao sử dụng Bootstrap?

  1. Tiết kiệm thời gian
  2. Đảm bảo tính nhất quán
  3. Thiết kế responsive từ đầu
  4. Cộng đồng lớn và hỗ trợ

Thiết lập dự án của chúng ta

Hãy bắt đầu bằng cách thiết lập dự án của chúng ta. Chúng ta cần bao gồm Bootstrap trong tệp HTML của mình. Đây là cách chúng ta làm:

<!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>
<!-- Nội dung của chúng ta sẽ được đặt ở đây -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Trong thiết lập này, chúng ta đang bao gồm cả phiên bản CSS thông thường của Bootstrap và phiên bản RTL. Thuộc tính dir="rtl" trong thẻ <html> cho biết trình duyệt hiển thị trang web theo hướng từ phải sang trái.

Tạo biểu mẫu thanh toán

Bây giờ, hãy tạo biểu mẫu thanh toán của chúng ta. Chúng ta sẽ sử dụng hệ thống lưới và các thành phần biểu mẫu của Bootstrap để tạo một bố cục responsive.

<div class="container mt-5">
<h1 class="mb-4">Thanh toán</h1>
<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Họ</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Tên</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>
<!-- Các trường biểu mẫu khác sẽ được thêm vào đây -->
</form>
</div>

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

  • Class container tạo một hộp chứa trung tâm cho nội dung của chúng ta.
  • Class row và col-md-6 tạo một bố cục hai cột responsive.
  • Class form-label và form-control định dạng các nhãn và ô nhập liệu.

Thêm các trường biểu mẫu khác

Hãy thêm một số trường vào biểu mẫu của chúng ta:

<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">Địa chỉ</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">Quốc gia</label>
<select class="form-select" id="country" required>
<option value="">Chọn...</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">Bang</label>
<select class="form-select" id="state" required>
<option value="">Chọn...</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">Mã bưu điện</label>
<input type="text" class="form-control" id="zip" required>
</div>
</div>

Tại đây, chúng ta đã thêm các trường cho email, địa chỉ, quốc gia, bang và mã bưu điện. Lưu ý cách chúng ta sử dụng form-select cho các menu下拉.

Thông tin thanh toán

Bây giờ, hãy thêm một phần cho thông tin thanh toán:

<h3 class="mb-3">Thanh toán</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">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 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">Tên trên thẻ</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">Số thẻ tín dụng</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">Hạn sử dụng</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>

Phần này bao gồ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ẻ.

Thêm nút gửi

Cuối cùng, hãy thêm nút gửi vào biểu mẫu của chúng ta:

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

Các class btn, btn-primary, và btn-lg định dạng nút của chúng ta thành một nút lớn có màu chính.

Xem xét RTL

Khi làm việc với các bố cục RTL, hãy nhớ những điểm sau:

  1. Căn chỉnh văn bản: Trong các bố cục RTL, văn bản thường được căn phải.
  2. Bố cục biểu mẫu: Các nhãn biểu mẫu nên xuất hiện bên phải của các ô nhập liệu.
  3. Biểu tượng: Các biểu tượng hướng dẫn (như mũi tên) nên được mirroring.

Bootstrap's RTL CSS tự động xử lý phần lớn các xem xét này!

Kết luận

Chúc mừng! Bạn đã tạo thành công một trang thanh toán responsive, hỗ trợ RTL bằng Bootstrap. Nhớ rằng, thực hành là cách tốt nhất để trở thành người thạo. Hãy thử thay đổi biểu mẫu này, thêm các trường mới hoặc thay đổi giao diện để làm cho nó trở thành của riêng bạn.

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

Class Mục đích
container Tạo một hộp chứa trung tâm cho nội dung
row Tạo một nhóm cột nằm ngang
col-md-* Tạo các cột có độ rộng khác nhau
form-label Định dạng các nhãn biểu mẫu
form-control Định dạng các ô nhập liệu
form-select Định dạng các menu下拉
form-check Định dạng các hộp kiểm tra và nút radio
btn Định dạng cơ bản cho nút
btn-primary Áp dụng màu chính cho nút
btn-lg Làm nút lớn

Chúc mừng编码, và hãy 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ẽ sớm trở thành một chuyên gia Bootstrap!

Credits: Image by storyset

Hướng Dẫn Trước:
Demo Album Bootstrap RTL
Hướng Dẫn Tiếp Theo:
Demo Bootstrap-Carousel RTL