Bootstrap 5 Danh sách chọn

Danh sách chọn

Chọn danh sách (chọn một mục):

Chọn danh sách (nhấn Ctrl hoặc Shift (hoặc kéo bằng chuột) để chọn nhiều mục):

Nếu bạn muốn cho phép người dùng chọn từ nhiều tùy chọn, hãy sử dụng menu chọn.

Nếu bạn muốn thiết lập phong cách menu chọn trong Bootstrap 5, hãy đặt .form-select Lớp được thêm vào phần tử <select>:

Mô hình

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Thử ngay

Kích thước của menu chọn

Vui lòng sử dụng .form-select-lg hoặc .form-select-sm Lớp để thay đổi kích thước menu chọn:

Mô hình

<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">

Thử ngay

Tắt menu chọn

Vui lòng sử dụng disabled Thuộc tính tắt menu chọn:

Mô hình

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Thử ngay

Danh sách dữ liệu

Bootstrap còn có thể thiết lập phong cách cho danh sách dữ liệu, đó là danh sách tùy chọn được định nghĩa trước cho phần tử <input>:

Vui lòng chọn trình duyệt của bạn từ danh sách:

Mô hình

<label for="browser" class="form-label">Vui lòng chọn trình duyệt của bạn từ danh sách:</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Thử ngay