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

Cơ bản thả xuống

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:

Giải thích ví dụ

Lớp .dropdownchỉ ra 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ó loại .dropdown-togglevà data-toggle="dropdown"thuộc tính.

Lớp .carettạo một biểu tượng mũi tên dấu mũ (), chỉ ra rằng nút là một trình đơn thả xuống.

Thêm .dropdown-menulớp vào một <ul>phần tử để thực sự tạo menu thả xuống.

Dải phân cách 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 một đườ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 trình đơn thả xuống:

Các mục Tắt và Hoạt động

Đánh dấu một mục thả xuống cụ thể với 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 .disabledlớp (có màu văn bản xám nhạt và biểu tượng "biển báo cấm đỗ" khi di chuột):

Vị trí thả xuống

Để căn phải menu thả xuống, hãy thêm .dropdown-menu-rightlớp vào phần tử bằng .dropdown-menu:

Dropup

Nếu bạn muốn menu thả xuống mở rộng lên trên thay vì xuống dưới, hãy thay đổi phần tử <div> với 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 rolevà aria-*thuộc tính sau khi tạo menu thả xuống:

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Toàn bộ tham chiếu thả xuống Bootstrap

Để có tài liệu tham khảo đầy đủ về tất cả các tùy chọn, phương pháp 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 .