Trình đơn thả xuống Bootstrap

Thả xuống cơ bản

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

Ví dụ giải thích

Lớp .dropdown biểu thị một menu thả xuống.

Để mở menu thả xuống, hãy sử dụng nút hoặc liên kết có lớp .dropdown-toggle và thuộc tính data-toggle="dropdown" .

Lớp .caret tạo biểu tượng mũi tên dấu mũ ( ), cho biết nút này là một danh sách thả xuống.

Thêm lớp .dropdown-menu vào phần tử <ul> để thực sự xây dựng menu thả xuống.

Bộ chia thả xuống

Lớp .divider được sử dụng để phân tách các liên kết bên trong menu thả xuống bằng đường viền ngang mỏng:

Tiêu đề thả xuống

Lớp .dropdown-header được sử dụng để thêm tiêu đề bên trong menu thả xuống:

Các mục vô hiệu hóa và kích hoạt

Đánh dấu một mục thả xuống cụ thể bằng lớp .active (thêm màu nền xanh lam).

Để tắt một mục trong menu thả xuống, hãy sử dụng lớp .disabled (có màu văn bản xám nhạt và biểu tượng "biển báo cấm đỗ xe" khi di chuột):

Vị trí thả xuống

Để căn chỉnh đúng menu thả xuống, hãy thêm lớp .dropdown-menu-right vào phần tử có .dropdown-menu:

thả xuống

Nếu bạn muốn menu thả xuống mở rộng lên trên thay vì hướng xuống dưới, hãy thay đổi phần tử <div> bằng class="dropdown" thành "dropup" :

Khả năng truy cập thả xuống

Để giúp cải thiện khả năng truy cập cho những người sử dụng trình đọc màn hình, bạn nên bao gồm các thuộc tính role và aria-* sau đây khi tạo menu thả xuống:

<div lớp=" ">
  <nút
  class="btn btn-chính ">
  Ví dụ thả xuống
  <span class="caret"></span></button>
  <ul lớp=" ">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Tham khảo thả xuống Bootstrap hoàn chỉnh

Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện thả xuống, hãy truy cập Tài liệu tham khảo thả xuống Bootstrap JS của chúng tôi.