Trình đơn thả xuống – menu thả xuống với bootstrap

Chuyển đổi lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và hơn thế nữa với plugin thả xuống Bootstrap.

Bạn đang xem : trình đơn thả xuống với bootstrap

Danh sách thả xuống

Chuyển đổi các lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và hơn thế nữa bằng trình cắm thả xuống Bootstrap.

Tổng quan

Các danh sách thả xuống có thể chuyển đổi, các lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và hơn thế nữa. Chúng được tạo tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Chúng được chuyển đổi bằng cách nhấp, không phải bằng cách di chuột; đây là một quyết định thiết kế có chủ đích.

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 khả năng định vị động và phát hiện chế độ xem. Đảm bảo bao gồm popper.min.js trước JavaScript của Bootstrap hoặc sử dụng bootstrap.bundle.min.js / bootstrap.bundle.js chứa Popper.js. Popper.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 tạo JavaScript của chúng tôi từ nguồn, thì nó yêu cầu use.js .

Khả năng truy cập

Tiêu chuẩn WAI ARIA xác định tiện ích con role = "menu" 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, các mục menu hộp kiểm, các mục menu nút radio, nhóm nút radio và menu phụ.

Mặt khác, cá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 khác nhau. Ví dụ: có thể tạo danh sách thả xuống chứa các đầ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 yêu cầu (cũng như không tự động thêm) bất kỳ thuộc tính nào trong số các thuộc tính role aria- cho các menu ARIA thực sự. Các tác giả sẽ phải tự bao gồm các thuộc tính cụ thể hơn này.

Tuy nhiên, Bootstrap bổ sung 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 từng phần tử . dropdown-item bằng cách sử dụng các phím con trỏ và đóng menu bằng phím ESC.

Ví dụ

Bao 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 . dropdown hoặc một phần tử khác khai báo vị trí: tương đối; . Trình đơn thả xuống có thể được kích hoạt từ các phần tử & lt; a & gt; hoặc & lt; button & gt; để phù hợp hơn với nhu cầu tiềm năng của bạn.

Trình đơn thả xuống một nút

Mọi . btn đều có thể được chuyển thành một trình đơn thả xuống với một số thay đổi đánh dấu. Dưới đây là cách bạn có thể làm cho chúng hoạt động với các phần tử & lt; button & gt; :

  

& lt; div

class =

"thả xuống"

& gt;

& lt; button

class =

"btn btn-Secondary dropdown-toggle"

type =

"nút"

id =

"dropdownMenuButton"

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

Nút thả xuống

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dropdownMenuButton"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

Và với các phần tử & lt; a & gt; :

  

& lt; div

class =

"trình chiếu thả xuống"

& gt;

& lt; a

class =

"btn btn-Secondary dropdown-toggle"

href =

"#"

role =

"nút"

id =

"dropdownMenuLink"

data-toggle = < / p>

"dropdown"

aria-haspopup =

"true"

< p class = "na"> aria-expand =

"false"

& gt;

Liên kết thả xuống

& lt; / a & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dropdownMenuLink"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

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:

  

& lt;! - Ví dụ về nút nguy hiểm duy nhất - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

type =

"button"

class =

" btn btn-risk dropdown-toggle "

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Hoạt động

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết riêng

& lt ; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

Trình đơn thả xuống của nút tách

Tương tự, tạo danh sách thả xuống nút tách với hầu như đánh dấu giống như danh sách thả xuống nút đơn, nhưng có thêm . dropdown-toggle-split để có khoảng cách thích hợp xung quanh trình đơn thả xuống dấu mũ.

Chúng tôi sử dụng lớp bổ sung này để giảm 25% padding ngang ở hai bên dấu mũ và xóa lề -left đượ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 mũ ở giữa trong 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.

  

& lt;! - Ví dụ về nút nguy hiểm phân tách - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

type =

"button"

class =

" btn btn-nguy hiểm "

& gt;

Hành động

& lt ; / nút & gt;

& lt; button

type =

"button"

class =

" btn btn-risk dropdown-toggle dropdown-toggle-split "

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi menu thả xuống

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết riêng

& lt ; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

Định kích thước

Nút thả xuống hoạt động với các nút ở mọi kích thước, bao gồm cả nút thả xuống mặc định và nút chia nhỏ.

  

& lt;! - Nhóm nút lớn (mặc định và chia nhỏ) - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

class =

"btn btn-Secondary btn-lg dropdown-toggle" < / p>

type =

"button"

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

" false "

& gt;

Nút lớn

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

class =

"btn btn-Secondary btn-lg"

type =

"nút"

& gt;

Nút chia lớn

& lt; / button & gt;

& lt; button

type =

"button"

class =

" btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split "

data-toggle = < / p>

"dropdown"

aria-haspopup =

"true"

< p class = "na"> aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi menu thả xuống

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

& lt;! - Nhóm nút nhỏ (mặc định và tách) - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

class =

"btn btn-Secondary btn-sm dropdown-toggle" < / p>

type =

"button"

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

" false "

& gt;

Nút nhỏ

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

class =

"btn btn-Secondary btn-sm"

type =

"nút"

& gt;

Nút chia nhỏ

& lt; / button & gt;

& lt; button

type =

"button"

class =

" btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split "

data-toggle = < / p>

"dropdown"

aria-haspopup =

"true"

< p class = "na"> aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi menu thả xuống

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

Biến thể thả xuống

Kích hoạt menu thả xuống phía trên các phần tử bằng cách thêm . dropup vào phần tử mẹ.

 

& lt;! - Nút thả xuống mặc định - & gt;

& lt; div

class =

"btn-group dropup"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle "

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Dropup

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt;! - Nút thả xuống chia nhỏ - & gt;

& lt; div

class =

"btn-group dropup"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary "

& gt;

Tách sổ lên

& lt; / button & gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle dropdown-toggle-split "

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi menu thả xuống

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

Biến thể phù hợp

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 . dropright vào phần tử mẹ.

  

& lt;! - Nút nhỏ giọt mặc định - & gt;

& lt; div

class =

"btn-group dropright"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle "

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Chiếm đoạt

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt;! - Nút tách giọt - & gt;

& lt; div

class =

"btn-group dropright"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary "

& gt;

Chia nhỏ giọt

& lt; / button & gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle dropdown-toggle-split "

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi lấy dấu

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

Biến thể giọt nước

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 . dropleft vào phần tử mẹ.

  

& lt;! - Nút hình giọt nước mặc định - & gt;

& lt; div

class =

"btn-group dropleft"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle "

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Giọt nước

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt;! - Nút tách giọt - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; div

class =

"btn-group dropleft"

role =

"nhóm"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle dropdown-toggle-split "

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi Dropleft

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary "

& gt;

Tách giọt

& lt; / button & gt;

& lt; / div & gt;

Nội dung menu thả xuống trước đây 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 chọn sử dụng các phần tử & lt; button & gt; trong trình đơn thả xuống của mình thay vì chỉ & lt; a & gt; s.

  

& lt; div

class =

"thả xuống"

& gt;

& lt; button

class =

"btn btn-Secondary dropdown-toggle"

type =

"nút"

id =

"dropdownMenu2"

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

Trình đơn thả xuống

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dropdownMenu2"

& gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Hành động

& lt; / nút & gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Một hành động khác

& lt ; / nút & gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Một cái gì đó khác ở đây

& lt; / nút & gt;

& lt; / div & gt;

& lt; / div & gt;

Theo mặc định, trình đơn thả xuống tự động được định vị 100% từ trên cùng và dọc theo bên trái của trình đơn chính. Thêm . Dropdown-menu-right vào . Dropdown-menu để căn phải menu thả xuống.

Lưu ý! Các menu thả xuống được định vị nhờ Popper.js (ngoại trừ khi chúng được chứa trong thanh điều hướng).

  

& lt; div

class =

"btn-group"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle "

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Menu căn phải

& lt; / button & gt;

& lt; div

class =

"dropdown-menu dropdown-menu-right"

& gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Hành động

& lt; / nút & gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Một hành động khác

& lt ; / nút & gt;

Nút

& lt;

class =

"dropdown-item"

type =

" nút "

& gt;

Cái gì đó khác ở đây

& lt; / button & gt;

& lt; / div & gt;

& lt; / div & gt;

Thêm tiêu đề vào nhãn các phần hành động trong bất kỳ trình đơn thả xuống nào.

Hành động
Một hành động khác

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; h6

class =

"dropdown-header"

& gt;

Tiêu đề thả xuống

& lt; / h6 & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; / div & gt;

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

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết riêng

& lt ; / a & gt;

& lt; / div & gt;

Đặt biểu mẫu trong trình đơn thả xuống hoặc đưa biểu mẫu vào trình đơn thả xuống và sử dụng tiện ích lề hoặc đệm để cung cấp cho biểu mẫu không gian phủ định mà bạn yêu cầu.

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; form

class =

"px-4 py-3"

< p class = "nt"> & gt;

& lt; div

class =

"form-group"

& gt;

& lt; label

for =

"exampleDropdownFormEmail1"

& gt;

Địa chỉ email

& lt; / label & gt;

& lt; input

type =

"email"

class =

" form-control "

id =

" exampleDropdownFormEmail1 "

placeholder =

"email@example.com"

& gt;

& lt; / div & gt;

& lt; div

class =

"form-group"

& gt;

& lt; label

for =

"exampleDropdownFormPassword1"

& gt;

Mật khẩu

& lt; / label & gt;

& lt; input

type =

"password"

class =

" form-control "

id =

" exampleDropdownFormPassword1 "

placeholder =

"Mật khẩu"

& gt;

& lt; / div & gt;

& lt; div

class =

"form-check"

& gt;

& lt; input

type =

"hộp kiểm"

class =

" form-check-input "

id =

" dropdownCheck "

& gt;

& lt; label

class =

"form-check-label"

for =

"dropdownCheck"

& gt;

Nhớ tôi

& lt; / label & gt;

& lt; / div & gt;

& lt; button

type =

"submit"

class =

" btn btn-primary "

& gt;

Đăng nhập

& lt; / nút & gt;

& lt; / form & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

< p class = "s"> "#"

& gt;

Mới ở đây? Đăng ký

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Bạn quên mật khẩu?

& lt; / a & gt;

& lt; / div & gt;

Địa chỉ email

Mật khẩu

Nhớ tôi

  

& lt; form

class =

"dropdown-menu p-4"

& gt;

& lt; div

class =

"form-group"

& gt;

& lt; label

for =

"exampleDropdownFormEmail2"

& gt;

Địa chỉ email

& lt; / label & gt;

& lt; input

type =

"email"

class =

" form-control "

id =

" exampleDropdownFormEmail2 "

placeholder =

"email@example.com"

& gt;

& lt; / div & gt;

& lt; div

class =

"form-group"

& gt;

& lt; label

for =

"exampleDropdownFormPassword2"

& gt;

Mật khẩu

& lt; / label & gt;

& lt; input

type =

"password"

class =

" form-control "

id =

" exampleDropdownFormPassword2 "

placeholder =

"Mật khẩu"

& gt;

& lt; / div & gt;

& lt; div

class =

"form-check"

& gt;

& lt; input

type =

"hộp kiểm"

class =

" form-check-input "

id =

" dropdownCheck2 "

& gt;

& lt; label

class =

"form-check-label"

for =

"dropdownCheck2"

& gt;

Nhớ tôi

& lt; / label & gt;

& lt; / div & gt;

& lt; button

type =

"submit"

class =

" btn btn-primary "

& gt;

Đăng nhập

& lt; / nút & gt;

& lt; / form & gt;

Các mục menu hoạt động

Thêm . active vào các mục trong menu thả xuống để định kiểu chúng là đang hoạt động .

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết thông thường

& lt ; / a & gt;

& lt; a

class =

"dropdown-item active"

href =

"#"

& gt;

Liên kết đang hoạt động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một liên kết khác

& lt ; / a & gt;

& lt; / div & gt;

Các mục menu bị tắt

Thêm . đã bị vô hiệu hóa vào các mục trong trình đơn thả xuống để định kiểu chúng là bị vô hiệu hóa .

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết thông thường

& lt ; / a & gt;

& lt; a

class =

"dropdown-item bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt liên kết

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một liên kết khác

& lt ; / a & gt;

& lt; / div & gt;

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 . show trên mục danh sách mẹ. Thuộc tính data-toggle = "dropdown" được dựa vào để đóng 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ở trình đơn thả xuống sẽ thêm các trình xử lý trống ( $. noop ) di chuột qua vào phần tử con trực tiếp của phần tử & lt; body & gt; . Việc tấn công xấu xí được thừa nhận này là cần thiết để giải quyết vấn đề quirk trong iOS ‘ủy quyền sự kiện , nếu không sẽ ngăn một lần nhấn ở bất kỳ đâu bên ngoài trình đơn thả xuống kích hoạt mã đóng trình đơn thả xuống. Sau khi trình đơn thả xuống bị đóng, các trình xử lý mouseover trống bổ sung này sẽ bị xóa.

Qua thuộc tính dữ liệu

Thêm data-toggle = "dropdown" vào liên kết hoặc nút để chuyển đổi menu thả xuống.

  

& lt; div

class =

"thả xuống"

& gt;

& lt; button

id =

"dLabel"

type =

" button "

data-toggle =

" thả xuống "

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

Trình kích hoạt thả xuống

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dLabel"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

Qua JavaScript

Gọi các trình đơn thả xuống qua JavaScript:

  

$

(

'. thả xuống -toggle '

).

thả xuống

()

data-toggle = "dropdown" vẫn được yêu cầu

Bất kể bạn gọi menu thả xuống của mình qua JavaScript hay thay vào đó sử dụng data-api, data-toggle = "dropdown" luôn bắt buộc phải có trên menu thả xuống phần tử kích hoạt.

Tùy chọn

Các tùy chọn có thể được chuyển qua các 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 data- , như trong data-offset = "" . < / p>

Tên
Loại hình
Mặc định
Sự mô tả

bù lại
số | chuỗi | hàm số
0
Phần bù của menu thả xuống so với mục tiêu của nó. Để biết thêm thông tin, hãy tham khảo tài liệu bù đắp của Popper.js.

lật
boolean
thật
Cho phép Trình đơn thả xuống lật trong trường hợp có phần chồng chéo trên phần tử tham chiếu. Để biết thêm thông tin, hãy tham khảo tài liệu lật của Popper.js.

ranh giới
chuỗi | yếu tố
'scrollParent'
Ranh giới ràng buộc tràn của menu thả xuống. Chấp nhận các giá trị của 'viewport' , 'window' , 'scrollParent' hoặc tham chiếu HTMLElement (chỉ JavaScript). Để biết thêm thông tin, hãy tham khảo tài liệu ngăn chặn dòng chảy của Popper.js.

Lưu ý khi ranh giới được đặt thành bất kỳ giá trị nào ngoài 'scrollParent' , kiểu position: static được áp dụng cho vùng chứa . dropdown .

Phương thức

Phương pháp
Sự mô tả

$ (). dropdown ('toggle')
Chuyển đổi menu thả xuống của thanh điều hướng hoặc điều hướng theo tab nhất định.

$ (). dropdown ('update')
Cập nhật vị trí của menu thả xuống của một phần tử.

$ (). dropdown ('dispose')
Hủy bỏ menu 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ử mẹ của . dropdown-menu và có RelatedTarget thuộc tính có giá trị là phần tử neo chuyển đổi.

Biến cố
Sự mô 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.

show.bs.dropdown
Sự kiện này được kích hoạt khi menu thả xuống được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).

hide.bs.dropdown
Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn thể hiện đã được gọi.

hidden.bs.dropdown
Sự 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 (sẽ đợi quá trình chuyển đổi CSS hoàn tất).

  

$

(

'# myDropdown '

).

trên

(

'show.bs.dropdown'

,

hàm

()

{

// làm gì đó…

})


Xem thêm những thông tin liên quan đến chủ đề menu thả xuống với bootstrap

Bài 9: Navs - Tạo thanh menu trong Bootstrap

  • Tác giả: Gola - Góc làm web
  • Ngày đăng: 2018-04-09
  • Đánh giá: 4 ⭐ ( 4318 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 🌳 Trong bài bày, chúng ta sẽ tìm hiểu về một thành phần khác của Bootstrap là Navs - tạo thanh menu trong Bootstrap. Mình sẽ hướng dẫn các bạn các tạo một menu đơn giản, với những kiến thức Bootstrap đã học. Ngoài ra, mình cũng hướng dẫn nâng cao về menu nhiều tab.

    🌳 Bài viết chi tiết và code mẫu: https://goclamweb.com/bai-9-navs-tao-thanh-menu-trong-bootstrap/

Bootstrap - menu thả xuống không hoạt động?

  • Tác giả: vi.hillwoodsacademy.org
  • Đánh giá: 3 ⭐ ( 3557 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Menu thả xuống của tôi trong Bootstrap dường như không hoạt động - có ai có thể cảnh báo cho tôi về sự cố không? Ngay bây giờ nó hiển thị danh sách thả xuống, nhưng nhấp vào nó không có gì. Cảm ơn! JS: $ (tài liệu) .ready (fu ...

menu thả xuống bootstrap góc cạnh để mở ở bên trái

  • Tác giả: vi.cagdasbaletoplulugu.com
  • Đánh giá: 4 ⭐ ( 6056 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đã sử dụng liên kết thả xuống theo góc khởi động thành công. Nhưng vấn đề là trình đơn thả xuống mở ở phía bên phải. Làm thế nào tôi có thể mở nó sang trái? Đây là đánh dấu và js tôi đã sử dụng từ ...

Bootstrap Dropdown

  • Tác giả: comdy.vn
  • Đánh giá: 3 ⭐ ( 7537 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách thêm menu thả xuống (dropdown menu) vào các thành phần Bootstrap khác nhau.

Tạo các Menu đổ xuống DropDown trong Bootstrap

  • Tác giả: xuanthulab.net
  • Đánh giá: 4 ⭐ ( 5647 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sử dụng .dropdown để tạo ra các Menu thả xuống, với các Menu dropdown-menu và Menu Item .dropdown-item

Hướng dẫn sử dụng dropdown menu trong bootstrap

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 3 ⭐ ( 8393 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dropdown Menu hay class data-toggle chính là những tiện ích hữu ích khi bạn muốn menu được xổ xuống đẹp mắt trong thiết kế giao diện website với bootstrap

Hướng dẫn tạo menu rớt xuống bằng Bootstrap

  • Tác giả: hocwebgiare.com
  • Đánh giá: 4 ⭐ ( 3724 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn tạo menu rớt xuống bằng Bootstrap

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  JavaScript và HTML - cách sử dụng html và javascript cùng nhau