Trình đơn thả xuống
Chuyển đổi lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và hơn thế nữa với plugin thả xuống Bootstrap.
Danh sách thả xuống có thể chuyển đổi, các lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và hơn thế nữa. Chúng được tạo tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Chúng được chuyển đổi bằng cách nhấp chuột, không phải bằng cách di chuột; đây là một quyết định thiết kế có chủ đích.
Danh sách thả xuống được xây dựng trên thư viện của bên thứ ba, Popper.js , cung cấp khả năng định vị động và phát hiện chế độ xem. Đảm bảo bao gồm popper.min.js trước JavaScript của Bootstrap hoặc sử dụng bootstrap.bundle.min.js/ bootstrap.bundle.jscó chứa Popper.js. Popper.js không được sử dụng để định vị danh sách thả xuống trong thanh điều hướng vì không cần định vị động.
Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầuutil.js .
Tiêu chuẩn WAI ARIA xác định một role="menu"widget thực tế , nhưng điều này dành riêng cho các menu giống như ứng dụng để kích hoạt các hành động hoặc chức năng. Menu ARIA chỉ có thể chứa các mục menu, các mục menu hộp kiểm, các mục menu nút radio, nhóm nút radio và menu phụ.
Mặt khác, các trình đơn thả xuống của Bootstrap được thiết kế để chung chung và có thể áp dụng cho nhiều tình huống và cấu trúc đánh dấu khác nhau. Ví dụ: có thể tạo danh sách thả xuống chứa các đầu vào bổ sung và điều khiển biểu mẫu, chẳng hạn như trường tìm kiếm hoặc biểu mẫu đăng nhập. Vì lý do này, Bootstrap không mong đợi (cũng như không tự động thêm) bất kỳ thuộc tính rolevà aria-thuộc tính nào cần thiết cho các menu ARIA thực sự. Các tác giả sẽ phải tự bao gồm các thuộc tính cụ thể hơn này.
Tuy nhiên, Bootstrap bổ sung hỗ trợ tích hợp cho hầu hết các tương tác menu bàn phím tiêu chuẩn, chẳng hạn như khả năng di chuyển qua các .dropdown-itemphần tử riêng lẻ bằng cách sử dụng các phím con trỏ và đóng menu bằng ESCphím.
Bao bọc nút chuyển đổi của menu thả xuống (nút hoặc liên kết của bạn) và menu thả xuống bên trong .dropdownhoặc một phần tử khác khai báo position: relative;. Trình đơn thả xuống có thể được kích hoạt từ <a>hoặc <button>các yếu tố để phù hợp hơn với nhu cầu tiềm năng của bạn.
Bất kỳ đĩa đơn .btnnào cũng có thể được chuyển thành một trình đơn thả xuống với một số thay đổi về đánh dấu. Đây là cách bạn có thể đặt chúng hoạt động với một trong hai <button>phần tử:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Và với <a>các yếu tố:
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Phần tốt nhất là bạn cũng có thể làm điều này với bất kỳ biến thể nút nào:
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>Tương tự, tạo danh sách thả xuống nút tách với hầu như đánh dấu giống như danh sách thả xuống nút đơn, nhưng có bổ sung thêm .dropdown-toggle-splitkhoảng cách thích hợp xung quanh dấu mũ thả xuống.
Chúng tôi sử dụng lớp bổ sung này để giảm padding25% chiều ngang ở hai bên của dấu mũ và loại bỏ lớp margin-leftđược thêm vào cho các nút thả xuống thông thường. Những thay đổi bổ sung đó giữ cho dấu mũ ở giữa trong nút tách và cung cấp một vùng nhấn có kích thước phù hợp hơn bên cạnh nút chính.
<!-- Example split danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>Nút thả xuống hoạt động với các nút ở mọi kích thước, bao gồm cả nút thả xuống mặc định và nút chia nhỏ.
<!-- Large button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-lg" type="button">
Large split button
</button>
<button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>
<!-- Small button groups (default and split) -->
<div class="btn-group">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
<div class="dropdown-menu">
...
</div>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">
Small split button
</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
...
</div>
</div>Kích hoạt menu thả xuống phía trên các phần tử bằng cách thêm .dropupvào phần tử mẹ.
<!-- Default dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">
Split dropup
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>Kích hoạt menu thả xuống ở bên phải của các phần tử bằng cách thêm .droprightvào phần tử mẹ.
<!-- Default dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropright
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropright button -->
<div class="btn-group dropright">
<button type="button" class="btn btn-secondary">
Split dropright
</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropright</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>Kích hoạt menu thả xuống ở bên trái của các phần tử bằng cách thêm .dropleftvào phần tử mẹ.
<!-- Default dropleft button -->
<div class="btn-group dropleft">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropleft
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<!-- Split dropleft button -->
<div class="btn-group">
<div class="btn-group dropleft" role="group">
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropleft</span>
</button>
<div class="dropdown-menu">
<!-- Dropdown menu links -->
</div>
</div>
<button type="button" class="btn btn-secondary">
Split dropleft
</button>
</div>Trước đây, nội dung menu thả xuống phải là liên kết, nhưng điều đó không còn xảy ra với v4. Giờ đây, bạn có thể tùy chọn sử dụng <button>các phần tử trong danh sách thả xuống của mình thay vì chỉ <a>s.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>Theo mặc định, menu thả xuống tự động được định vị 100% từ trên cùng và dọc theo bên trái của trình đơn gốc. Thêm .dropdown-menu-rightvào a .dropdown-menuđể căn phải menu thả xuống.
Đứng lên! Các trình đơn thả xuống được định vị nhờ Popper.js (ngoại trừ khi chúng được chứa trong thanh điều hướng).
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>Thêm tiêu đề vào nhãn các phần hành động trong bất kỳ menu thả xuống nào.
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>Tách các nhóm các mục menu có liên quan bằng một dải phân cách.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>Đặt biểu mẫu trong menu thả xuống hoặc đưa biểu mẫu vào menu thả xuống và sử dụng các tiện ích lề hoặc đệm để tạo cho nó không gian âm mà bạn yêu cầu.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div><form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>Thêm .activevào các mục trong menu thả xuống để tạo kiểu cho chúng là hoạt động .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>Thêm .disabledvào các mục trong menu thả xuống để tạo kiểu cho chúng là bị vô hiệu hóa .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>Thông qua thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống chuyển đổi nội dung ẩn (menu thả xuống) bằng cách chuyển đổi .showlớp trên mục danh sách mẹ. Thuộc data-toggle="dropdown"tính được dựa vào để đóng menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng nó.
Trên các thiết bị hỗ trợ cảm ứng, việc mở menu thả xuống sẽ thêm các trình xử lý trống ( $.noop) mouseovervào các phần tử con ngay lập tức <body>. Việc hack được thừa nhận là xấu xí này là cần thiết để giải quyết một vấn đề trong ủy quyền sự kiện của iOS , điều này sẽ ngăn không cho một lần nhấn ở bất kỳ đâu bên ngoài trình đơn thả xuống kích hoạt mã đóng trình đơn thả xuống. Sau khi trình đơn thả xuống được đóng lại, những trình xử lý trống bổ sung mouseovernày sẽ bị xóa.
Thêm data-toggle="dropdown"vào liên kết hoặc nút để chuyển đổi menu thả xuống.
<div class="dropdown">
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
</button>
<div class="dropdown-menu" aria-labelledby="dLabel">
...
</div>
</div>Gọi các trình đơn thả xuống qua JavaScript:
$('.dropdown-toggle').dropdown()data-toggle="dropdown"vẫn được yêu cầu
Bất kể bạn gọi menu thả xuống của mình qua JavaScript hay thay vào đó sử dụng data-api, data-toggle="dropdown"luôn bắt buộc phải có trên phần tử trình kích hoạt của menu thả xuống.
Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data-, như trong data-offset="".
| Tên | Loại hình | Mặc định | Sự mô tả |
|---|---|---|---|
| bù lại | số | chuỗi | hàm số | 0 | Phần bù của menu thả xuống so với mục tiêu của nó. Để biết thêm thông tin, hãy tham khảo tài liệu bù đắp của Popper.js . |
| lật | boolean | thật | Cho phép Trình đơn thả xuống lật trong trường hợp có phần chồng chéo trên phần tử tham chiếu. Để biết thêm thông tin, hãy tham khảo tài liệu lật của Popper.js . |
| ranh giới | chuỗi | yếu tố | 'scrollParent' | Ranh giới ràng buộc tràn của menu thả xuống. Chấp nhận các giá trị của , 'viewport'hoặc một tham chiếu HTMLElement (chỉ JavaScript). Để biết thêm thông tin, hãy tham khảo tài liệu ngăn chặn dòng chảy của Popper.js .'window''scrollParent' |
Lưu ý khi boundaryđược đặt thành bất kỳ giá trị nào khác 'scrollParent', kiểu position: staticđược áp dụng cho vùng .dropdownchứa.
| Phương pháp | Sự mô tả |
|---|---|
$().dropdown('toggle') |
Chuyển đổi menu thả xuống của một thanh điều hướng hoặc tab điều hướng nhất định. |
$().dropdown('update') |
Cập nhật vị trí của một phần tử thả xuống. |
$().dropdown('dispose') |
Hủy bỏ danh sách thả xuống của một phần tử. |
Tất cả các sự kiện thả xuống đều được kích hoạt tại .dropdown-menuphần tử mẹ của 'và có một relatedTargetthuộc tính, có giá trị là phần tử neo chuyển đổi.
| Biến cố | Sự mô tả |
|---|---|
show.bs.dropdown |
Sự kiện này kích hoạt ngay lập tức khi phương thức thể hiện show được gọi. |
shown.bs.dropdown |
Sự kiện này được kích hoạt khi menu thả xuống được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). |
hide.bs.dropdown |
Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn thể hiện đã được gọi. |
hidden.bs.dropdown |
Sự kiện này được kích hoạt khi danh sách thả xuống hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). |
$('#myDropdown').on('show.bs.dropdown', function () {
// do something…
})