Menu lựa chọn trong bootstrap 5

Công nghệ Lập trình Bootstrap 5

14/12
Thạch
Bootstrap 5
0
269

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.

Bài 31: Tạo Form 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <h2>Menu lựa chọn trên Sinitc.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>Sinitc</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="container mt-3">
  <form>
   <select class="form-select" disabled>
     <option>Sinitc</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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="Sinitc">
      <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ài 33: Checkbox và Radio Button trong Bootstrap 5