Làm cách nào tôi có thể tạo nhiều danh sách thả xuống trong bootstrap?
|
Menu thả xuống thường được sử dụng bên trong tiêu đề điều hướng để hiển thị danh sách các liên kết có liên quan khi người dùng di chuột hoặc nhấp vào phần tử kích hoạt Show
Bạn có thể sử dụng plugin thả xuống Bootstrap để thêm menu thả xuống có thể chuyển đổi (tôi. e. mở và đóng khi nhấp chuột) vào hầu hết mọi thứ, chẳng hạn như liên kết, nút hoặc nhóm nút, thanh điều hướng, tab và thuốc điều hướng, v.v. thậm chí không cần viết một dòng mã JavaScript nào Thêm danh sách thả xuống thông qua thuộc tính dữ liệuBootstrap cung cấp một cơ chế dễ dàng và thanh lịch để thêm menu thả xuống vào một phần tử thông qua thuộc tính dữ liệu. Ví dụ sau sẽ cho bạn thấy mức đánh dấu tối thiểu cần thiết để thêm menu thả xuống vào siêu liên kết thông qua thuộc tính dữ liệu Ví dụ trên minh họa hình thức cơ bản nhất của trình đơn thả xuống Bootstrap. Hãy hiểu từng phần của thành phần thả xuống Bootstrap từng cái một Giải thích mãTrình đơn thả xuống Bootstrap về cơ bản có hai thành phần - phần tử kích hoạt trình đơn thả xuống có thể là một siêu liên kết hoặc nút và chính menu thả xuống
Tương tự, bạn có thể thêm danh sách thả xuống vào các nút và thành phần điều hướng. Phần sau đây sẽ cho bạn thấy một số triển khai phổ biến của trình đơn thả xuống Bootstrap Danh sách thả xuống trong một thanh điều hướngCác ví dụ sau sẽ chỉ cho bạn cách thêm danh sách thả xuống vào thanh điều hướng — Đầu ra của ví dụ trên sẽ giống như thế này Mẹo. Bạn có thể vẽ một đường phân cách để phân tách các liên kết bên trong menu thả xuống bằng cách thêm lớp thành phần Danh sách thả xuống trong NavsVí dụ sau sẽ chỉ cho bạn cách thêm menu thả xuống vào bảng điều hướng thuốc — Đầu ra của ví dụ trên sẽ giống như thế này Bạn có thể chỉ cần chuyển đổi ví dụ trên thành danh sách tab thả xuống bằng cách thay thế lớp Danh sách thả xuống trong các nútCác ví dụ sau sẽ chỉ cho bạn cách thêm danh sách thả xuống vào nút chính — Tương tự, bạn có thể thêm danh sách thả xuống vào các biến thể khác của các nút, như được hiển thị ở đây Trình đơn thả xuống nút tách BootstrapCác ví dụ sau sẽ chỉ cho bạn cách thêm danh sách thả xuống vào các nút tách — Tương tự, bạn có thể thêm danh sách thả xuống vào các biến thể khác của các nút, như được hiển thị ở đây Danh sách thả xuống bên trong các nhóm nútĐể tạo các menu thả xuống bên trong một nhóm nút, chỉ cần đặt một — Đầu ra của ví dụ trên sẽ giống như thế này Tương tự, bạn có thể thả xuống thùng bên trong các nhóm nút xếp chồng lên nhau theo chiều dọc, như thế này Tạo Menu Dropup, Dropleft và DroprightBạn thậm chí có thể kích hoạt các menu thả xuống ở trên, cũng như, ở bên trái và bên phải của các phần tử bằng cách thêm một lớp bổ sung — Đầu ra của ví dụ trên sẽ giống như thế này Tạo menu thả xuống được căn chỉnh phù hợpTheo mặc định, góc trên cùng bên trái của menu thả xuống được đặt ở góc dưới cùng bên trái của phần tử cha i. e. 100% từ trên xuống và dọc theo bên trái. Để căn phải menu thả xuống, chỉ cần thêm một lớp bổ sung — Đầu ra của ví dụ trên sẽ giống như thế này Thêm tiêu đề vào các mục thả xuốngBạn có thể tùy chọn thêm tiêu đề menu để gắn nhãn một phần của các mục menu bên trong menu thả xuống bằng cách thêm lớp yếu tố, như thế này Vô hiệu hóa các mục trong danh sách thả xuốngBạn có thể áp dụng lớp Thêm danh sách thả xuống qua JavaScriptBạn cũng có thể thêm danh sách thả xuống theo cách thủ công bằng JavaScript — chỉ cần gọi phương thức Bootstrap Ghi chú. Tùy chọnCó một số tùy chọn nhất định có thể được chuyển đến phương pháp Bootstrap của Để đặt tùy chọn thả xuống thông qua thuộc tính dữ liệu, chỉ cần thêm tên tùy chọn vào Định cấu hình hành vi tự động đóng của danh sách thả xuống
Xem Popper. js để biết thêm thông tin về các tùy chọn được đề cập ở trên phương phápĐây là phương pháp thả xuống của bootstrap tiêu chuẩn chuyển đổiPhương pháp này bật/tắt menu thả xuống của thanh điều hướng đã cho hoặc điều hướng theo thẻ trình diễnPhương pháp này hiển thị menu thả xuống của một thanh điều hướng đã cho hoặc điều hướng theo thẻ ẩn giấuPhương pháp này ẩn menu thả xuống của một thanh điều hướng đã cho hoặc điều hướng theo thẻ cập nhậtPhương pháp này cập nhật vị trí thả xuống của một phần tử vứt bỏPhương pháp này phá hủy trình đơn thả xuống của một phần tử (tôi. e. xóa dữ liệu được lưu trữ trên phần tử DOM) getInstanceĐây là một phương thức tĩnh cho phép bạn lấy phiên bản thả xuống được liên kết với một phần tử DOM getOrCreateInstanceĐây là một phương thức tĩnh cho phép bạn lấy phiên bản thả xuống được liên kết với phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nếu menu thả xuống không được khởi tạo Sự kiệnĐây là các sự kiện Bootstrap tiêu chuẩn để tăng cường chức năng thả xuống Tất cả các sự kiện thả xuống được kích hoạt ở phần tử chuyển đổi và sau đó nổi lên. Vì vậy, bạn cũng có thể thêm trình xử lý sự kiện vào phần tử cha của Sự kiệnMô 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. cho xem. bs. thả xuống Sự kiện này được kích hoạt khi danh sách thả xuống hiển thị với người dùng và quá trình chuyển đổi CSS đã hoàn tất. ẩn giấu. bs. thả xuống Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn dụ được gọi. ẩn giấu. bs. thả xuốngSự 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 và quá trình chuyển đổi CSS đã hoàn tất Làm cách nào để thêm nhiều danh sách thả xuống trong Bootstrap?Không, không thể có hai menu thả xuống trong cùng một div . Chúng cần được tách biệt vì mã để chuyển đổi chúng tìm kiếm phần tử đầu tiên trong div cha của nút/neo. Vì vậy, nếu chúng ở trong cùng một div cha thì chỉ cái đầu tiên sẽ được bật.
Làm cách nào để tùy chỉnh menu thả xuống Bootstrap?Tạo danh sách thả xuống . Tạo danh sách thả xuống cơ bản yêu cầu bạn tạo một nút bằng cách sử dụng. btn và. các lớp thả xuống-chuyển đổi Bạn cũng nên thêm. thuộc tính chuyển đổi dữ liệu với. giá trị thả xuống Then, you need to create a
container with the . dropdown-menu class. .. . Điều này sẽ tạo ra một menu thả xuống cơ bản Làm cách nào để đặt vị trí thả xuống trong Bootstrap?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 trình đơn gốc. Thêm. menu thả xuống sang phải. menu thả xuống để căn phải menu thả xuống .
Danh sách thả xuống lồng nhau là gì?Trình đơn thả xuống lồng nhau cho phép bạn có trình đơn thả xuống thứ hai xuất hiện sau khi trình đơn thả xuống đầu tiên được trả lời . Điều này đặc biệt hữu ích cho các trường hợp liên quan đến câu trả lời phụ thuộc vào câu trả lời trước đó. (Ví dụ: quốc gia, tiểu bang và thành phố của ai đó). |
