Bài 34: Range trong Bootstrap 5
Range trong Bootstrap 5 là gì? Cách tạo Range trong Bootstrap 5 như thế nào? Hãy cùng Download.vn tìm hiểu nhé!
Range trong Bootstrap là một phần tử tương tác, cho phép người dùng nhanh chóng trượt qua các giá trị có thể trải rộng trên phạm vi mong muốn.
Phạm vi tùy biến - Custom Range
Để tạo kiểu một menu phạm vi, hãy thêm class .form-range
vào phần tử input với type =”range”
:
<label for="customRange" class="form-label">Custom range</label>
<input type="range" class="form-range" id="customRange">
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<form action="/action_page.php">
<label for="customRange" class="form-label">Phạm vi tùy biến</label>
<input type="range" class="form-range" id="customRange" name="points">
<button type="submit" class="btn btn-primary mt-3">Gửi</button>
</form>
</div>
</body>
</html>
Khoảng cách - Steps
Mặc định, khoảng thời gian giữa các số phạm vi là 1. Bạn có thể thay đổi nó bằng cách dùng thuộc tính step. Code mẫu:
<input type="range" class="form-range" step="10">
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Steps trong một Range</h2>
<p>Mặc định khoảng thời gian giữa các số phạm vi là 1. Bạn có thể thay đổi nó bằng cách dùng thuộc tính step:</p>
<form action="/action_page.php">
<label for="customRange" class="form-label">Phạm vi tùy biến</label>
<input type="range" class="form-range" id="customRange" step="10" name="points">
<button type="submit" class="btn btn-primary mt-3">Xác nhận</button>
</form>
</div>
</body>
</html>
Nhỏ nhất và Lớn nhất
Mặc định, giá trị nhỏ nhất là 0 và giá trị lớn nhất là 100. Bạn có thể dùng thuộc tính min và/hoặc max để thay đổi nó. Code mẫu:
<input type="range" class="form-range" min="0" max="4">
Trên đây là tất cả những điều bạn cần biết về thuộc tính Range trong Bootstrap 5. Cách dùng và tạo thuộc tính phạm vi khi lập trình web, ứng dụng bằng Bootstrap khá đơn giản. Vì thế, đừng bỏ qua nhé!
Bạn nên đọc
-
Bài 29: Utilities trong Bootstrap 5
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 32: Menu lựa chọn trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 30: Flex trong Bootstrap 5
-
Bài 2: Tìm hiểu về Container trong Bootstrap 5
-
Bài 5: Màu sắc trong Bootstrap 5
-
Giải đáp những câu hỏi về Bootstrap thường gặp
-
Bài 33: Checkbox và Radio Button trong Bootstrap 5
![❖](https://st.quantrimang.com/photos/avatars/default.png)
![❖](https://st.quantrimang.com/photos/image/2020/06/15/hoc-bootstrap-200-size-24x24-znd.png)
Cũ vẫn chất
-
Những status cảm động níu kéo người yêu cũ
2 ngày -
Công thức Minecraft để chế tạo đồ cơ bản, thức ăn, công cụ dụng cụ, đồ bảo hộ, len, màu nhuộm
Hôm qua 1 -
Những câu stt hay tâm trạng về lặng nhìn cuộc sống
Hôm qua -
Cách xem phiên bản di động của một trang web bất kỳ trên máy tính
Hôm qua -
Hướng dẫn cách kẻ chéo ô trong Excel
2 ngày -
Cách chuyển dữ liệu giữa các máy tính
2 ngày -
200 biệt danh cho người yêu bằng tiếng Anh hay và ngọt ngào
2 ngày -
44 phím tắt hữu dụng trên tất cả trình duyệt
Hôm qua 2 -
Hướng dẫn thiết lập và quản lý FTP Server trên Windows 10
2 ngày -
Reset rank Liên Quân mùa 27
2 ngày