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
Thí dụ
nút thả xuống
Tự mình thử »
Ví dụ giải thích
Lớp .dropdown chỉ 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ó lớp .dropdown-toggle và thuộc tính data-toggle="dropdown"
Thêm lớp .dropdown-menu vào một
yếu tố để thực sự xây dựng menu thả xuống. Sau đó, thêm lớp .dropdown-item vào từng phần tử (liên kết hoặc nút) bên trong menu thả xuống
Dải phân cách thả xuống
Lớp ________ 83 ______ đượ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 các tiêu đề bên trong menu thả xuống
Vô hiệu hóa và kích hoạt các mục
Đá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)
Để vô hiệu hóa 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 "cấm đỗ xe" khi di chuột)
Thí dụ
Vị trí thả xuống
Bạn cũng có thể tạo menu "dropright" hoặc "dropleft" bằng cách thêm lớp .dropright hoặc .dropdown-toggle0 vào phần tử thả xuống. Lưu ý rằng dấu mũ/mũi tên được thêm tự động
Menu thả xuống bên phải
Để căn phải menu thả xuống, hãy thêm lớp .dropdown-toggle1 vào phần tử với. trình đơn thả xuống
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ử có class="dropdown" thành .dropdown-toggle2
Văn bản thả xuống
Lớp .dropdown-toggle3 được sử dụng để thêm văn bản thuần túy vào mục thả xuống hoặc được sử dụng trên các liên kết để tạo kiểu liên kết mặc định
Thí dụ
Chỉ nhắn tin
Các nút được nhóm với danh sách thả xuống
Thí dụ
Quả táo
SAMSUNG
sony
Tự mình thử »
Tách nút thả xuống
Thí dụ
Sơ đẳng
Tự mình thử »
Nhóm nút dọc với danh sách thả xuống
Thí dụ
Quả táo
SAMSUNG
sony
Tự mình thử »
Hoàn thành Tài liệu tham khảo thả xuống Bootstrap 4
Để có 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 4 JS của chúng tôi
Chuyển đổi lớp phủ theo ngữ cảnh để hiển thị danh sách liên kết và hơn thế nữa bằng plugin thả xuống Bootstrap
Tổng quan
Danh sách thả xuống có thể chuyển đổi, lớp phủ theo ngữ cảnh để hiển thị danh sách liên kết và hơn thế nữa. Chúng được thực hiện tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Chúng được bật bằng cách nhấp chuột, không phải bằng cách di chuột;
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 tính năng định vị động và phát hiện khung nhìn. Hãy chắc chắn bao gồm popper. tối thiểu. js trước JavaScript của Bootstrap hoặc sử dụng
Action
Action Another action Something else here Separated link
2 /Action
Action Another action Something else here Separated link
3 có chứa Popper. js. thuốc phiện. js không được sử dụng để định vị danh sách thả xuống trong thanh điều hướng mặc dù không yêu cầu định vị độngNếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó
khả năng tiếp cận
Tiêu chuẩn WAI ARIA xác định một 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, mục menu hộp kiểm, mục menu nút radio, nhóm nút radio và menu phụ
Mặt khá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. Chẳng hạn, có thể tạo danh sách thả xuống chứa đầ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
Action
Action Another action Something else here Separated link
6 vàAction
Action Another action Something else here Separated link
7 nào cần thiết cho các menu ARIA thực sự. Các tác giả sẽ phải tự đưa vào các thuộc tính cụ thể hơn nàyTuy nhiên, Bootstrap có thêm 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 phần tử
Action
Action Another action Something else here Separated link
8 riêng lẻ bằng cách sử dụng các phím con trỏ và đóng menu bằng phím ESCví dụ
Bọc nút chuyển đổi của trình đơn thả xuống (nút hoặc liên kết của bạn) và trình đơn thả xuống trong
Action
Action Another action Something else here Separated link
9 hoặc một phần tử khác tuyên bốAction Toggle Dropdown
Action Another action Something else here Separated link
0. Danh sách thả xuống có thể được kích hoạt từAction Toggle Dropdown
Action Another action Something else here Separated link
1hoặc các yếu tố để phù hợp hơn với nhu cầu tiềm năng của bạnnút đơn
Bất kỳ một
Action Toggle Dropdown
Action Another action Something else here Separated link
2 nào cũng có thể được chuyển đổi thành một nút bật/tắt thả xuống với một số thay đổi về đánh dấu. Đây là cách bạn có thể làm cho chúng hoạt động với một trong haiyếu tố.
Action Toggle Dropdown
Action Another action Something else here Separated link
3
Action Toggle Dropdown
Action Another action Something else here Separated link
4Và với
Action Toggle Dropdown
Action Another action Something else here Separated link
1 phần tử Dropdown linkAction Another action Something else here
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
Action
Action Another action Something else here Separated link
nút tách
Tương tự, tạo danh sách thả xuống của nút tách với cách đánh dấu gần như giống với danh sách thả xuống của nút đơn, nhưng có thêm
Action Toggle Dropdown
Action Another action Something else here Separated link
6 để tạo khoảng cách thích hợp xung quanh dấu mũ thả xuốngChúng tôi sử dụng lớp bổ sung này để giảm 25%
Action Toggle Dropdown
Action Another action Something else here Separated link
7 nằm ngang ở hai bên của dấu mũ và loại bỏAction Toggle Dropdown
Action Another action Something else here Separated link
8 đượ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 nháy ở giữa nút tách và cung cấp vùng nhấn có kích thước phù hợp hơn bên cạnh nút chínhAction Toggle Dropdown
Action Another action Something else here Separated link
định cỡ
Menu thả xuống nút hoạt động với các nút ở mọi kích cỡ, bao gồm các nút thả xuống mặc định và chia nhỏ
Nút tách lớn Toggle Dropdown
Nút tách nhỏ Toggle Dropdown
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
Hướng
dropup
Kích hoạt menu thả xuống phía trên các phần tử bằng cách thêm
Action Toggle Dropdown
Action Another action Something else here Separated link
9 vào phần tử gốcTách dropup Chuyển đổi thả xuống
Dropup
Split dropup Toggle Dropdown
Thả ngay
Kích hoạt menu thả xuống ở bên phải của phần tử bằng cách thêm
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
0 vào phần tử gốcTách dropright Chuyển đổi Dropright
Dropright
Split dropright Toggle Dropright
thả trái
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
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
1 vào phần tử gốcDropleft
Toggle Dropleft
Split dropleft
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 ý sử dụng các phần tử trong danh sách thả xuống của mình thay vì chỉ
Action Toggle Dropdown
Action Another action Something else here Separated link
1.
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
3
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
4Bạn cũng có thể tạo các mục thả xuống không tương tác với
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
5. Thoải mái tạo kiểu hơn nữa với các tiện ích văn bản hoặc CSS tùy chỉnhAction Another action Something else hereTích cực
Thêm
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
6 vào các mục trong danh sách thả xuống để tạo kiểu cho chúng là hoạt động Dropdown linkAction Another action Something else here
0Tàn tật
Thêm
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
7 vào các mục trong danh sách thả xuống để định kiểu chúng là bị vô hiệu hóa Dropdown linkAction Another action Something else here
1Theo mặc định, menu thả xuống được tự động định vị 100% từ trên cùng và dọc theo bên trái của menu chính. Thêm
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
8 vàoLarge button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
9 để căn phải menu thả xuốngĐứng lên. Danh sách thả xuống được định vị nhờ Popper. js (trừ khi chúng được chứa trong thanh điều hướng)
Dropdown linkAction Another action Something else here
2Thêm tiêu đề để gắn nhãn các phần hành động trong bất kỳ menu thả xuống nào
Dropdown linkAction Another action Something else here
3dải phân cách
Tách các nhóm mục menu có liên quan bằng một dải phân cách
Dropdown linkAction Another action Something else here
4Chữ
Đặt bất kỳ văn bản dạng tự do nào trong menu thả xuống có văn bản và sử dụng các tiện ích giãn cách. Lưu ý rằng bạn có thể sẽ cần các kiểu định cỡ bổ sung để hạn chế chiều rộng của menu
Dropdown linkAction Another action Something else here
5Các hình thức
Đặt một biểu mẫu trong menu thả xuống hoặc biến nó thành một menu thả xuống và sử dụng các tiện ích lề hoặc đệm để cung cấp cho nó khoảng trống mà bạn yêu cầu
Dropdown linkAction Another action Something else here
6_______13_______7tùy chọn thả xuống
Sử dụng
Dropup
Split dropup Toggle Dropdown
0 hoặc
Dropup
Split dropup Toggle Dropdown
1 để thay đổi vị trí của danh sách thả xuống Dropdown link
Action Another action Something else here
8Cách sử dụng
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 lớp
Dropup
Split dropup Toggle Dropdown
2 trên mục danh sách gốc. Thuộc tính
Dropup
Split dropup Toggle Dropdown
3 được dựa vào để đóng các menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng thuộc tính này
Trên các thiết bị hỗ trợ cảm ứng, việc mở một danh sách thả xuống sẽ thêm các trình xử lý trống (
Dropup
Split dropup Toggle Dropdown
4)
Dropup
Split dropup Toggle Dropdown
5 cho phần tử con trực tiếp của phần tử. Bản hack xấu xí được thừa nhận này là cần thiết để giải quyết một vấn đề khó hiểu trong ủy quyền sự kiện của iOS, điều này sẽ ngăn một lần nhấn ở bất kỳ đâu bên ngoài danh sách thả xuống kích hoạt mã đóng danh sách thả xuống. Sau khi đóng danh sách thả xuống, các trình xử lý
Dropup
Split dropup Toggle Dropdown
5 trống bổ sung này sẽ bị xóa
Thông qua thuộc tính dữ liệu
Thêm
Dropup
Split dropup Toggle Dropdown
3 vào liên kết hoặc nút để chuyển đổi danh sách thả xuống Dropdown link
Action Another action Something else here
9Qua JavaScript
Gọi danh sách thả xuống qua JavaScript
Action
Action Another action Something else here Separated link
0
Dropup
Split dropup Toggle Dropdown
3 vẫn cần
Bất kể bạn gọi trình đơn thả xuống của mình qua JavaScript hay thay vào đó sử dụng data-api, thì ____21_______3 luôn được yêu cầu phải có mặt trên phần tử kích hoạt của trình đơn thả xuống
Tùy chọn
Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào
Dropright
Split dropright Toggle Dropright
0, như trong
Dropright
Split dropright Toggle Dropright
1TênTypeDefaultMô tảoffsetnumber. chuỗi. function0Offset của danh sách thả xuống so với mục tiêu của nó. Để biết thêm thông tin tham khảo Popper. js. flipbooleantrueCho phép danh sách thả xuống lật trong trường hợp phần tử tham chiếu bị chồng chéo. Để biết thêm thông tin tham khảo Popper. js. ranh giới. ranh giới ràng buộc phần tử'scrollParent'Overflow của menu thả xuống. Chấp nhận các giá trị của
Dropright
Split dropright Toggle Dropright
2,
Dropright
Split dropright Toggle Dropright
3,
Dropright
Split dropright Toggle Dropright
4 hoặc tham chiếu HTMLElement (chỉ dành cho JavaScript). Để biết thêm thông tin tham khảo Popper. js. chuỗi tham chiếu. element'toggle'Reference phần tử của menu thả xuống. Chấp nhận các giá trị của
Dropright
Split dropright Toggle Dropright
5,
Dropright
Split dropright Toggle Dropright
6 hoặc tham chiếu HTMLElement. Để biết thêm thông tin tham khảo Popper. js. chuỗi hiển thị'động'Theo mặc định, chúng tôi sử dụng Popper. js cho định vị động. Vô hiệu hóa điều này với
Dropright
Split dropright Toggle Dropright
7
Lưu ý khi
Dropright
Split dropright Toggle Dropright
8 được đặt thành bất kỳ giá trị nào khác với giá trị
Dropright
Split dropright Toggle Dropright
4, kiểu
Dropleft
Toggle Dropleft
Split dropleft 0 được áp dụng cho vùng chứa
Action
Action Another action Something else here Separated link
9phương pháp
Phương thức Mô tảDropleft
Toggle Dropleft
Split dropleft 2Chuyển đổi menu thả xuống của thanh điều hướng đã cho hoặc điều hướng theo thẻ.
Dropleft
Toggle Dropleft
Split dropleft 3Cập nhật vị trí của phần tử thả xuống.
Dropleft
Toggle Dropleft
Split dropleft 4Hủy danh sách thả xuống của một phần tử
Sự kiện
Tất cả các sự kiện thả xuống đều được kích hoạt tại phần tử cha của
Large button
...
Large split button Toggle Dropdown
...
Small button
...
Small split button Toggle Dropdown
...
9 và có thuộc tínhDropleft
Toggle Dropleft
Split dropleft 6, có giá trị là phần tử neo chuyển đổi. Sự kiện
Dropleft
Toggle Dropleft
Split dropleft 7 và
Dropleft
Toggle Dropleft
Split dropleft 8 có thuộc tính
Dropleft
Toggle Dropleft
Split dropleft 9 (chỉ khi loại sự kiện ban đầu là
0) chứa Đối tượng sự kiện cho sự kiện nhấp chuột