Bài 32: Menu lựa chọn trong Bootstrap 5
Bootstrap 5 sẽ giúp bạn thêm tính năng hoặc thiết kế lại ô lựa chọn cho web. Dưới đây là cách tạo menu lựa chọn trong Bootstrap 5.
Menu lựa chọn
Menu lựa chọn được sử dụng nếu bạn muốn cho phép người dùng có nhiều lựa chọn khác nhau. Để tạo kiểu một menu lựa chọn trong Bootstrap 5, thêm class .form-select
vào phần tử <select>
. 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>Menu lựa chọn trên Quantrimang.com</h2>
<form action="/action_page.php">
<label for="sel1" class="form-label">Danh sách lựa chọn (chọn một):</label>
<select class="form-select" id="sel1" name="sellist1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for="sel2" class="form-label">Danh sách nhiều lựa chọn (giữ phím Shift để chọn nhiều hơn):</label>
<select multiple class="form-select" id="sel2" name="sellist2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</body>
</html>
Kích thước menu lựa chọn
Dùng class .form-select-lg
hoặc .form-select-sm
để thay đổi kích thước của menu lựa chọn.
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>Kích thước menu lựa chọn</h2>
<p>Dùng .form-select-lg hoặc .form-select-sm để thay đổi kích thước menu lựa chọn:</p>
<form>
<select class="form-select form-select-lg">
<option>Quantrimang</option>
<option>VnDoc</option>
<option>Downloadvn</option>
<option>Downloadcomvn</option>
</select>
<select class="form-select mt-3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select class="form-select form-select-sm mt-3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
</div>
</body>
</html>
Vô hiệu hóa menu lựa chọn
Dùng thuộc tính disabled
để vô hiệu hóa menu lựa chọn. 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>
<select class="form-select" disabled>
<option>Quantrimang</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</form>
</div>
</body>
</html>
Như bạn thấy, bạn không thể mở menu lựa chọn khi click chuột bởi nó đã bị vô hiệu hóa.
Danh sách dữ liệu
Bootstrap 5 cũng sẽ tạo kiểu cho danh sách dữ liệu. Nó liệt kê một danh sách các lựa chọn được xác định trước cho một phần tử <input>
. 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>Danh sách dữ liệu</h2>
<form action="/action_page.php">
<label for="browser" class="form-label">Lựa chọn một trang web từ danh sách:</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Quantrimang">
<option value="VnDoc">
<option value="Downloadvn">
<option value="Hoatieu">
<option value="Downloadcomvn">
</datalist>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
</body>
</html>
Trên đây là cách tạo menu lựa chọn bằng Bootstrap 5. Như bạn thấy, việc đa dạng hóa menu lựa chọn trong Bootstrap 5 khá linh hoạt và dễ dàng. Hi vọng bài học Bootstrap 5 này hữu ích với các bạn.
Bạn nên đọc
-
Bài 31: Tạo Form trong Bootstrap 5
-
Bài 10: Button trong Bootstrap 5
-
Bài 4: Typography trong Bootstrap 5
-
Bài 28: Offcanvas trong Bootstrap 5
-
Bài 27: Scrollspy trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 29: Utilities trong Bootstrap 5
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Số thập phân là gì? Các phép tính với số thập phân
Hôm qua -
Trực tâm là gì? Xác định trực tâm trong tam giác
Hôm qua 1 -
Cách đánh số trang bỏ trang đầu, đánh số từ trang bất kỳ trong Word chi tiết nhất
Hôm qua -
Hàng ngày hay hằng ngày? Khi nào dùng 'hàng ngày', khi nào dùng 'hằng ngày'
Hôm qua -
Cách cài đặt Python trên Windows, macOS, Linux
Hôm qua -
Cách giả lập CASIO FX-580VN X trên máy tính, điện thoại
Hôm qua 1 -
Cách tải toàn bộ Playlist Video trên Youtube
Hôm qua -
Cách xóa tài khoản Facebook vĩnh viễn trên điện thoại, máy tính
Hôm qua -
20+ cách giải phóng RAM trên máy tính Windows 10, reset RAM Win 10 đơn giản nhất
Hôm qua -
Những câu nói cà khịa người yêu cũ, stt cà khịa người yêu cũ bá đạo
Hôm qua 2