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 Show
Thí dụ
Tự mình thử » Ví dụ giải thíchLớp Để mở menu thả xuống, hãy sử dụng nút hoặc liên kết có lớp Thêm lớp yếu tố để thực sự xây dựng menu thả xuống. Sau đó, thêm lớp Dải phân cách thả xuốngLớ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ốngLớp 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 Để vô hiệu hóa một mục trong menu thả xuống, hãy sử dụng lớp Thí dụVị trí thả xuốngBạn cũng có thể tạo menu "dropright" hoặc "dropleft" bằng cách thêm lớp Menu thả xuống bên phảiĐể căn phải menu thả xuống, hãy thêm lớp dropupNế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 Văn bản thả xuốngLớp Thí dụ
Các nút được nhóm với danh sách thả xuốngThí dụ
Tự mình thử » Tách nút thả xuốngThí dụ
Tự mình thử » Nhóm nút dọc với danh sách thả xuốngThí dụ
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 quanDanh 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 Nế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ậnTiê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 Tuy 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ử ví 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 nút đơnBất kỳ một Và với 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 nút táchTươ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 Chúng tôi sử dụng lớp bổ sung này để giảm 25% đị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 HướngdropupKích hoạt menu thả xuống phía trên các phần tử bằng cách thêm Tách dropup Chuyển đổi thả xuống Thả ngayKích hoạt menu thả xuống ở bên phải của phần tử bằng cách thêm Tách dropright Chuyển đổi Dropright thả tráiKích hoạt menu thả xuống ở bên trái của các phần tử bằng cách thêm 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ỉ Bạn cũng có thể tạo các mục thả xuống không tương tác với Tích cựcThêm Tàn tậtThêm Theo 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 Đứ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) Thêm tiêu đề để gắn nhãn các phần hành động trong bất kỳ menu thả xuống nào dải phân cáchTách các nhóm mục menu có liên quan bằng một dải phân cách ChữĐặ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 Cá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 tùy chọn thả xuốngSử dụng Cách sử dụngThô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 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 ( Thông qua thuộc tính dữ liệuThêm Qua JavaScriptGọi danh sách thả xuống qua JavaScript
|
