Danh sách thả Bootstrap 5

Danh sách thả cơ bản

Menu thả là một menu có thể chuyển đổi, cho phép người dùng chọn giá trị từ danh sách đã định trước:

Mô hình

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    Nút thả
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Liên kết 1</a></li>
    <li><a class="dropdown-item" href="#">Liên kết 2</a></li>
    <li><a class="dropdown-item" href="#">Liên kết 3</a></li>
  </ul>
</div>

Thử trực tiếp

Giải thích ví dụ

.dropdown loại chỉ thị menu thả.

Nếu muốn mở menu thả, hãy sử dụng .dropdown-toggle 类和 lớp và data-toggle="dropdown"

thuộc tính của nút hoặc liên kết. .dropdown-menu lớp vào <div> phần tử để xây dựng thực tế menu cuộn xuống. Sau đó, thêm .dropdown-item thêm lớp vào mỗi phần tử trong menu cuộn xuống (liên kết hoặc nút bấm).

Dấu phân隔 danh sách cuộn

.dropdown-divider lớp để phân隔 các liên kết trong menu cuộn xuống bằng đường viền ngang:

Mô hình

<li><hr class="dropdown-divider"></hr></li>

Thử trực tiếp

Tiêu đề danh sách cuộn

.dropdown-header lớp để thêm tiêu đề vào menu cuộn xuống:

Mô hình

<li><h5 class="dropdown-header">Tiêu đề cuộn xuống 1</h5></li>

Thử trực tiếp

mục bị vô hiệu hóa và hoạt động

Hãy sử dụng .active lớp để nổi bật mục cuộn xuống cụ thể (thêm màu nền xanh).

Nếu bạn muốn vô hiệu hóa một mục nào đó trong danh sách cuộn, hãy sử dụng .disabled lớp (màu văn bản nhạt và biểu tượng "no-parking-sign" khi di chuột qua).

Mô hình

<li><a class="dropdown-item" href="#">Thường</a></li>
<li><a class="dropdown-item active" href="#">Hoạt động</a></li>
<li><a class="dropdown-item disabled" href="#">Bị vô hiệu hóa</a></li>

Thử trực tiếp

vị trí danh sách cuộn

Bạn cũng có thể thông qua việc đặt .dropend hoặc .dropstart thêm lớp vào phần tử cuộn xuống để tạo menu "dropend" hoặc "dropstart". Lưu ý, dấu chèn/điểm mũi tên sẽ được thêm tự động:

Dropright

<div class="dropdown dropend">

Thử trực tiếp

Dropleft

<div class="dropdown dropstart">

Thử trực tiếp

Căn phải danh sách cuộn

Nếu bạn muốn căn phải danh sách cuộn, hãy thay đổi .dropdown-menu-end thêm lớp .dropdown-menu các phần tử sau:

Mô hình

<div class="dropdown-menu dropdown-menu-end">

Thử trực tiếp

Danh sách cuộn lên

Nếu bạn muốn menu thả mở lên thay vì mở xuống, hãy thay đổi thẻ <div> có class="dropdown" thành "dropup"：

Mô hình

<div class="dropup">

Thử trực tiếp

Văn bản trượt

.dropdown-item-text Loại này được sử dụng để thêm văn bản thuần túy cho mục trượt, hoặc để thêm樣式 liên kết mặc định cho liên kết.

Mô hình

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Liên kết 1</a></li>
  <li><a class="dropdown-item" href="#">Liên kết 2</a></li>
  <li><a class="dropdown-item" href="#">Liên kết 3</a></li>
  <li><a class="dropdown-item-text" href="#">Liên kết văn bản</a></li>
  <li><span class="dropdown-item-text">Văn bản thuần túy</span></li>
</ul>

Thử trực tiếp

组合按钮和下拉列表

Mô hình

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Điện thoại</a></li>
      <li><a class="dropdown-item" href="#">Máy tính bảng</a></li>
    </ul>
  </div>
</div>

Thử trực tiếp

组合按钮和下拉列表垂直

Mô hình

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Điện thoại</a></li>
      <li><a class="dropdown-item" href="#">Máy tính bảng</a></li>
    </ul>
  </div>
</div>

Thử trực tiếp