Bài 32: Menu lựa chọn trong Bootstrap 5

Chí Vỹ

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>

Menu lựa chọn

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>

Kích thước menu lựa chọn trong Bootstrap

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>

Vô hiệu hóa menu lựa chọn

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>

Danh sách dữ liệu

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.

Thứ Năm, 08/12/2022 15:25

5 ★ 1 👨 842

#Bootstrap