Hướng dẫn học Bootstrap
Progress Bar là một thành phần phổ biến trong Bootstrap 5 để hiển thị tiến trình hoàn thành của một nhiệm vụ hoặc quá trình nào đó. Dưới đây là cách tạo và sử dụng Progress Bar trong Bootstrap 5:
- Bước 1: Tạo cấu trúc HTML Bắt đầu bằng việc tạo cấu trúc HTML cơ bản cho Progress Bar. Bạn cần một thẻ
divvới lớpprogressđể bao quanh toàn bộ thanh tiến trình và một thẻdivcon với lớpprogress-barđể đại diện cho tiến trình.
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
- Bước 2: Điều chỉnh tiến trình
style="width: 50%;": Điều này xác định phần trăm của tiến trình đã hoàn thành. Trong ví dụ này, tiến trình hoàn thành 50%, vì vậy thanh tiến trình sẽ được điều chỉnh để hiển thị 50%.aria-valuenow="50": Giá trị hiện tại của tiến trình.aria-valuemin="0": Giá trị tối thiểu của tiến trình (thường là 0).aria-valuemax="100": Giá trị tối đa của tiến trình (thường là 100).
- Bước 3: Tùy chỉnh Progress Bar Bạn có thể tùy chỉnh Progress Bar bằng cách thay đổi màu sắc, kích thước và các lớp CSS khác. Dưới đây là ví dụ về cách thay đổi màu sắc bằng cách sử dụng lớp
bg-*trong Bootstrap:
<div class="progress">
<div class="progress-bar bg-success" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Trong ví dụ này, thanh tiến trình sẽ có màu xanh lá cây (bg-success) và đã hoàn thành 75%.
- Bước 4: Sử dụng JavaScript (tuỳ chọn) Nếu bạn muốn tương tác với Progress Bar bằng JavaScript, bạn có thể sử dụng các sự kiện và phương thức của JavaScript để điều khiển nó.
Đây là ví dụ sử dụng JavaScript để tăng giá trị tiến trình sau một khoảng thời gian:
<div class="progress">
<div id="myProgressBar" class="progress-bar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<script>
const progressBar = document.getElementById('myProgressBar');
function increaseProgress() {
let width = 0;
const interval = setInterval(function() {
if (width >= 100) {
clearInterval(interval);
} else {
width++;
progressBar.style.width = width + '%';
progressBar.setAttribute('aria-valuenow', width);
}
}, 50); // Tăng giá trị mỗi 50ms
}
// Gọi hàm để tăng giá trị tiến trình
increaseProgress();
</script>
Trong ví dụ này, chúng tôi sử dụng JavaScript để tăng giá trị của tiến trình và cập nhật thanh tiến trình dựa trên giá trị mới với progress Bar trong Bootstrap 5
Dưới đây là một ví dụ cụ thể về cách tạo một Progress Bar trong Bootstrap 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Bar Example</title>
<!-- Sử dụng Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<h1>Progress Bar Example</h1>
<!-- Thanh tiến trình Bootstrap -->
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
</div>
<!-- Sử dụng Bootstrap JavaScript (tuỳ chọn) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</body>
</html>
Trong ví dụ này, chúng tôi sử dụng Bootstrap để tạo một thanh tiến trình có màu xanh lá cây, đã hoàn thành 50%. Bạn có thể sao chép mã này vào một tệp HTML và mở tệp đó trong trình duyệt để xem thanh tiến trình hoạt động.
Lưu ý rằng bạn cần sử dụng các tệp CSS và JavaScript của Bootstrap từ một nguồn bên ngoài, như CDNs (Content Delivery Networks), để tạo chức năng Bootstrap. Trong ví dụ trên, chúng tôi sử dụng CDNs cho Bootstrap CSS và JavaScript.