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

Nếu bạn thấy trang này có nghĩa là tên miền đang được trỏ về địa chỉ IP của máy chủ Hosting tại AZDIGI, nhưng trang web không thể hoạt động do gói dịch vụ không tồn tại hoặc chưa được thêm vào máy chủ

Hoặc nếu bạn vừa mới trỏ tên miền thì có thể thực hiện xóa cookie/cache trình duyệt và thử lại sau ít phút

.

Nếu bạn cho rằng đây là lỗi, hãy liên hệ với bộ phận Hỗ trợ kỹ thuật của AZDIGI tại đây

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

  
    Dropdown link
  

  

    Action
    Another action
    Something else here
  

9 /

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

0 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ị động

Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó yêu cầu

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

1

khả năng tiếp cận

Tiêu chuẩn WAI ARIA xác định một tiện ích

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

2 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
  

3 và

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

4 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ày

Tuy nhiên, Bootstrap có thêm hỗ trợ tích hợp cho hầu hết các tương tác với 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
  

5 riêng lẻ bằng các phím con trỏ và đóng menu bằng phím ESC

ví dụ

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 trong

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

6 hoặc một phần tử khác khai báo

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

7. Danh sách thả xuống có thể được kích hoạt từ các yếu tố

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

8hoặc để phù hợp hơn với nhu cầu tiềm năng của bạn

Menu thả xuống một nút

Bất kỳ

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

9 đơn lẻ nào cũng có thể được chuyển thành nút chuyển đổi thả xuống với một số thay đổi đánh dấu. Đây là cách bạn có thể làm cho chúng hoạt động với một trong hai

yếu tố

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

1

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

20

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

21

Và với các yếu tố

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

8

  
    Dropdown link
  

  

    Action
    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
  

Menu thả xuống của 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
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

23 để tạo khoả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 25%

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

24 ngang ở hai bên của dấu mũ và loại bỏ

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

25 đượ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ính

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

2

đị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

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

1

biến thể 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
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

26 vào phần tử gốc

Tách dropup Chuyển đổi thả xuống

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

3

Biến thể Dropright

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

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

27 vào phần tử chính

Tách dropright Chuyển đổi Dropdright

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

5

Biến thể Dropleft

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

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

28 vào phần tử chính

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

7

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 thành phần trong danh sách thả xuống của mình thay vì chỉ

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

8s

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

1

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

10

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

11

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

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

12 vào một

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

13 để 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)

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

4

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

  
    Dropdown link
  

  

    Action
    Another action
    Something else here
  

0

Tách các nhóm mục menu có liên quan bằng một dải phân cách

  
    Dropdown link
  

  

    Action
    Another action
    Something else here
  

1

Đặ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 link
  

  

    Action
    Another action
    Something else here
  

2

  
    Dropdown link
  

  

    Action
    Another action
    Something else here
  

3

Thêm

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

14 vào các mục trong danh sách thả xuống để định kiểu chúng là hoạt động

  
    Dropdown link
  

  

    Action
    Another action
    Something else here
  

4

Thêm

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

15 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 link
  

  

    Action
    Another action
    Something else here
  

5

Cá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

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

16 trên mục danh sách chính. Thuộc tính

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

17 đượ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ở menu thả xuống sẽ thêm các trình xử lý trống (

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

18)

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

19 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 trình đơn thả xuống, các trình xử lý

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

19 trống bổ sung này sẽ bị xóa

Thông qua thuộc tính dữ liệu

Thêm

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

17 vào một 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
  

6

Qua JavaScript

Gọi danh sách thả xuống qua JavaScript

  
    Dropdown link
  

  

    Action
    Another action
    Something else here
  

7

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

17 vẫn cần thiết

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ì

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

17 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

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

34, như trong

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

35

Tê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. tài liệu bù đắp của 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. tài liệu lật của 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

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

36,

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

37,

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

38 hoặc tham chiếu HTMLElement (chỉ dành cho JavaScript). Để biết thêm thông tin tham khảo Popper. tài liệu ngăn chặn dòng chảy của js

Lưu ý khi

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

39 được đặt thành bất kỳ giá trị nào khác với

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

38, kiểu

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

51 được áp dụng cho vùng chứa

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

6

phương pháp

MethodDescription

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

53Chuyển đổi menu thả xuống của thanh điều hướng đã cho hoặc điều hướng theo thẻ.

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

54Cập nhật vị trí của phần tử thả xuống.

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

55Hủy bỏ 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 được kích hoạt tại phần tử cha của

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

13 và có thuộc tính

  
    Action
  
  

    Action
    Another action
    Something else here
    
    Separated link
  

57, có giá trị là phần tử neo chuyển đổi