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 30: Flex trong Bootstrap 5
-
Bài 27: Scrollspy trong Bootstrap 5
-
Bài 1: Bootstrap 5 là gì? Bắt đầu như thế nào?
-
Bài 29: Utilities trong Bootstrap 5
-
Bài 28: Offcanvas trong Bootstrap 5
-
Bài 6: Bảng trong Bootstrap 5
-
Bài 3: Hệ thống lưới Grid System trong Bootstrap 5
-
Bài 7: Ảnh trong Bootstrap 5
-
Bài 4: Typography 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
-
5 cách mở cài đặt âm thanh trên PC Windows
Hôm qua 2 -
Toán tử trong SQL
Hôm qua -
Cách hiện file ẩn, thư mục ẩn trên Windows 10/8/7
Hôm qua -
9 công cụ tạo video AI tốt nhất
Hôm qua -
Cách xem số thẻ MBBank trên ứng dụng
Hôm qua -
Bluestacks
-
Cách sửa lỗi gõ tiếng Việt trên Word, Excel
Hôm qua -
Cách kiểm tra số dư tài khoản Sacombank rất đơn giản
Hôm qua -
Những ứng dụng hoán đổi khuôn mặt tốt nhất
Hôm qua -
Cách khóa và mở khóa file Powerpoint để chỉnh sửa
Hôm qua