Bootstrap thả xuống giỏ hàng

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, cung cấp tính năng định vị động và phát hiện chế độ xem. 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 Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

4 /

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

5 có chứa Popper. Popper 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

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 Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

7 và

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

8 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 Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

9 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

Large button

...

Large split button Toggle Dropdown

...

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

Large button

...

Large split button Toggle Dropdown

...

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

Large button

...

Large split button Toggle Dropdown

...

2hoặc để phù hợp hơn với nhu cầu tiềm năng của bạn. Các ví dụ hiển thị ở đây sử dụng ngữ nghĩa

các yếu tố thích hợp, nhưng đánh dấu tùy chỉnh được hỗ trợ

nút đơn

Bất kỳ

Large button

...

Large split button Toggle Dropdown

...
3 đơ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ố

Large button

...

Large split button Toggle Dropdown

...

4

Large button

...

Large split button Toggle Dropdown

...
5

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

Large button

...

Large split button Toggle Dropdown

...

2

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

3

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 Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

4

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 giống như danh sách thả xuống của nút đơn, nhưng có thêm

Large button

...

Large split button Toggle Dropdown

...

7 để 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%

Large button

...

Large split button Toggle Dropdown

...

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

Large button

...

Large split button Toggle Dropdown

...

9 đượ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 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

Large button

...

Large split button Toggle Dropdown

...

Nút tách nhỏ Toggle Dropdown

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

0

thả xuống tối

Chọn tham gia menu thả xuống tối hơn để phù hợp với thanh điều hướng tối hoặc kiểu tùy chỉnh bằng cách thêm

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

00 vào một

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

01 hiện có. Không cần thay đổi đối với các mục thả xuống

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

3

Và đưa nó vào sử dụng trong thanh điều hướng

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

4

Hướng

RTL

Chỉ đường được nhân đôi khi sử dụng Bootstrap trong RTL, nghĩa là

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

02 sẽ xuất hiện ở bên phải

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

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

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

7

Thả ngay

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 Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

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

Tách dropend Toggle Dropright

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

9

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

30

Bạn có thể sử dụng các yếu tố

Large button

...

Large split button Toggle Dropdown

...

2or làm mục thả xuống

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

07

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link
08

Bạn cũng có thể tạo các mục thả xuống không tương tác với

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

09. 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ỉnh

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

32

Tích cực

Thêm

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

30 vào các mục trong danh sách thả xuống để định kiểu chúng là hoạt động. Để chuyển trạng thái hoạt động sang các công nghệ hỗ trợ, hãy sử dụng thuộc tính

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

31 — sử dụng giá trị

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

32 cho trang hiện tại hoặc

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

33 cho mục hiện tại trong một bộ

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

33

Vô hiệu hóa

Thêm

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

34 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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

34

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. Bạn có thể thay đổi điều này bằng các lớp

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

35 định hướng, nhưng bạn cũng có thể kiểm soát chúng bằng các lớp sửa đổi bổ sung

Thêm

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

36 vào một

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

01 để căn phải menu thả xuống. Chỉ đường được nhân đôi khi sử dụng Bootstrap trong RTL, nghĩa là

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

36 sẽ xuất hiện ở phía bên trái

Đứng lên. Danh sách thả xuống được định vị nhờ Popper trừ khi chúng được chứa trong thanh điều hướng

Ví dụ về menu căn phải

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

35

căn chỉnh đáp ứng

Nếu bạn muốn sử dụng căn chỉnh đáp ứng, hãy tắt tính năng định vị động bằng cách thêm thuộc tính

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

39 và sử dụng các lớp biến thể đáp ứng

Để căn chỉnh menu thả xuống bên phải với điểm dừng đã cho hoặc lớn hơn, hãy thêm

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

40

Căn trái nhưng căn phải khi màn hình lớn

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

36

Để căn trái menu thả xuống với điểm dừng đã cho hoặc lớn hơn, hãy thêm

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

36 và

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

42

Căn phải nhưng căn trái khi màn hình lớn

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

37

Lưu ý rằng bạn không cần thêm thuộc tính

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

39 vào các nút thả xuống trong thanh điều hướng vì Popper không được sử dụng trong thanh điều hướng

tùy chọn căn chỉnh

Sử dụng hầu hết các tùy chọn được hiển thị ở trên, đây là bản demo bồn rửa nhà bếp nhỏ về các tùy chọn căn chỉnh thả xuống khác nhau ở một nơi

Căn trái, căn phải lg

Căn phải, căn trái lg

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

38

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

39

dả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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

40

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

41

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

42

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

43

tùy chọn thả xuống

Sử dụng

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

44 hoặc

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

45 để thay đổi vị trí của danh sách thả xuống

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

44

Tự động đóng hành vi

Theo mặc định, menu thả xuống bị đóng khi nhấp vào bên trong hoặc bên ngoài menu thả xuống. Bạn có thể sử dụng tùy chọn

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

46 để thay đổi hành vi này của trình đơn thả xuống

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

45

ngổ ngáo

Biến

Biến cho tất cả danh sách thả xuống

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

46

Các biến cho

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

47

Các biến cho dấu mũ dựa trên CSS biểu thị tính tương tác của trình đơn thả xuống

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

48

hỗn hợp

Mixin được sử dụng để tạo dấu mũ dựa trên CSS và có thể tìm thấy trong

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

47

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

49

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 Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

48 trên lớp cha mẹ

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

01. Thuộc tính

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

70 đượ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ý

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

71 trống vào 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ý

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

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

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

Thêm

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

70 vào một liên kết hoặc nút để chuyển đổi danh sách thả xuống

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

0

Qua JavaScript

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

1

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

70 vẫn được yêu cầu

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ì _____270 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 Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

76, như trong

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

77. Đảm bảo thay đổi kiểu chữ hoa chữ thường của tên tùy chọn từ camelCase thành kebab-case khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ: thay vì sử dụng

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

78, hãy sử dụng

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

79

NameTypeDefaultDescription____290chuỗi. element

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

91Ranh giới hạn chế tràn của menu thả xuống (chỉ áp dụng cho công cụ sửa đổi ngăn chặn tràn của Popper). Theo mặc định, đó là

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

91 và có thể chấp nhận tham chiếu HTMLElement (chỉ qua JavaScript). Để biết thêm thông tin tham khảo Popper's.

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

93chuỗi. thành phần. đối tượng

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

94Phần tử tham chiếu của menu thả xuống. Chấp nhận các giá trị của

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

94,

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

96, một tham chiếu HTMLElement hoặc một đối tượng cung cấp

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

97. Để biết thêm thông tin, hãy tham khảo tài liệu về phần tử ảo và của Popper.

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

98string

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

99Theo mặc định, chúng tôi sử dụng Popper để định vị động. Vô hiệu hóa điều này với

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

300.

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

301mảng. chuỗi. chức năng

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

302

Độ lệch của danh sách thả xuống so với mục tiêu của nó. Bạn có thể chuyển một chuỗi trong thuộc tính dữ liệu với các giá trị được phân tách bằng dấu phẩy như.

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

303

Khi một hàm được sử dụng để xác định độ lệch, nó được gọi với một đối tượng chứa vị trí popper, tham chiếu và popper rects làm đối số đầu tiên của nó. Nút DOM phần tử kích hoạt được chuyển làm đối số thứ hai. Hàm phải trả về một mảng có hai số.

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

304

Để biết thêm thông tin tham khảo Popper's

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

46boolean. chuỗi

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

33

Định cấu hình hành vi tự động đóng của danh sách thả xuống

• Action Toggle Dropdown

  • Action
  • Another action
  • Something else here
  • Separated link
  33 - danh sách thả xuống sẽ được đóng bằng cách nhấp vào bên ngoài hoặc bên trong menu thả xuống

• Action Toggle Dropdown

  • Action
  • Another action
  • Something else here
  • Separated link
  308 - trình đơn thả xuống sẽ được đóng lại bằng cách nhấp vào nút chuyển đổi và gọi phương thức

  Action Toggle Dropdown

  • Action
  • Another action
  • Something else here
  • Separated link
  309 hoặc

  Action Toggle Dropdown

  • Action
  • Another action
  • Something else here
  • Separated link
  310 theo cách thủ công. (Cũng sẽ không bị đóng khi nhấn phím esc)

• Action Toggle Dropdown

  • Action
  • Another action
  • Something else here
  • Separated link
  311 - danh sách thả xuống sẽ được đóng (chỉ) bằng cách nhấp vào bên trong menu thả xuống

• Action Toggle Dropdown

  • Action
  • Another action
  • Something else here
  • Separated link
  312 - danh sách thả xuống sẽ được đóng (chỉ) bằng cách nhấp vào bên ngoài menu thả xuống

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

313không có giá trị. vật. chức năng

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

314

Để thay đổi cấu hình Popper mặc định của Bootstrap, hãy xem

Khi một chức năng được sử dụng để tạo cấu hình Popper, nó được gọi với một đối tượng chứa cấu hình Popper mặc định của Bootstrap. Nó giúp bạn sử dụng và hợp nhất cấu hình mặc định với cấu hình của riêng bạn. Hàm phải trả về một đối tượng cấu hình cho Popper

Sử dụng chức năng với

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

313

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

2

phương pháp

Phương pháp Mô tả

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

309Ẩn trình đơn thả xuống của thanh điều hướng hoặc điều hướng theo thẻ nhất định.

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

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

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

320Hủy bỏ danh sách thả xuống của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM)

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

321Phươ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, bạn có thể sử dụng nó như thế này.

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

322

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

323Phương thức tĩnh trả về một phiên bản thả xuống được liên kết với một phần tử DOM hoặc tạo một phần tử mới trong trường hợp nó không được khởi tạo. Bạn có thể sử dụng nó như thế này.

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

324

Sự kiện

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 trên phần tử cha của

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

01. Sự kiện

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

326 và

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

327 có thuộc tính

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

328 (chỉ khi loại Sự kiện ban đầu là

Action Toggle Dropdown

• Action
• Another action
• Something else here
• Separated link

329) chứa Đối tượng Sự kiện cho sự kiện nhấp chuột