Combobox bootstrap

Trong bài viết này, mình sẽ hướng dẫn các bạn về menu thả xuống – tạo menu thu gọn trong Bootstrap. Dropdowns được ứng dụng khá nhiều trong quá trình tạo ra các nút menu thu gọn

Nội dung chính Show

• Video – Dropdowns – Create menu thu gọn trong Bootstrap
• Yêu cầu cần thực hiện
• Cấu hình cấu trúc và cách thức hoạt động của danh sách thả xuống
• Nút phần hoặc thẻ điều khiển
• Nội dung phần
• tổng quan
• Khả năng cận kề
• Thả xuống một nút
• Nút thả xuống
• Change can drop
• Unabled variable
• Dropleft Biến thể
• Cách sử dụng
• Thông qua các thuộc tính dữ liệu
• Thông qua JavaScript
• Tùy chọn

Nội dung chính

• Video – Dropdowns – Create menu thu gọn trong Bootstrap
• Yêu cầu cần thực hiện
• Cấu hình cấu trúc và cách thức hoạt động của danh sách thả xuống
  • Nút phần hoặc thẻ điều khiển
  • Nội dung phần

Video – Dropdowns – Create menu thu gọn trong Bootstrap

Yêu cầu cần thực hiện

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Ví dụ cho Dropdowns – Tạo menu thu gọn trong Bootstrap

Menu sẽ được thu gọn và chỉ hiển thị khi nhấn vào nút

Cấu hình cấu trúc và cách thức hoạt động của danh sách thả xuống

Do ropdowns được xây dựng dựa trên thư viện js của bên thứ ba (cụ thể là Popper JS) nên bạn cần thêm tệp popper. tối thiểu. js vào trước bootstrap. tối thiểu. js. Các bạn có thể tải xuống tệp popper. tối thiểu. js trong phần tài liệu của bootstrap, hoặc code demo của m2inh ở cuối bài viết cũng chứa file này

Nút phần hoặc thẻ điều khiển

Nút và thẻ điều khiển cần có thuộc tính data-toggle=”dropdown”

Bài viết cùng chủ đề

bài 12. Khoảng cách và lớp chia trong Bootstrap

Bài 11. Scrollspy – Hiệu ứng điều hướng khi…

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

Menu Dropdown

Nội dung phần

+ Các dòng trong menu là các thẻ a hoặc các bạn có thể sử dụng cấu trúc thẻ ul và li cũng được. Mỗi dòng có class=”dropdown-item”

+ Tuy nhiên, các dòng chỉ xếp hạng mới thành danh sách và không ẩn vào nút. Để ẩn các mục này, các bạn bao bên ngoài các thẻ bằng 1 khối div có class=”dropdown-menu”

+ Để giữa các dòng có đường kẻ phân chia, các bạn thêm thẻ div có class=”dropdown-divider”

Item 1

Item 2

Item 3

Để chuẩn bị tốt hơn, nút 2 phần và nội dung phải nằm trong 1 khối có class=”dropdown”

Như vậy là chúng ta đã có 1 menu thu gọn. Mặc định, danh sách các dòng này sẽ chuyển xuống bên dưới. Các bạn có thể tùy chỉnh mục này nhé. Tài liệu tham khảo của Bootstrap cũng giới thiệu rất nhiều những tùy chỉnh riêng biệt

mẫu mã. Tải xuống

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách bình luận bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web

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

Nội dung chính Hiển thị

• tổng quan
• Khả năng cận kề
• Thả xuống một nút
• Nút thả xuống
• Size
• Change can drop
• Unabled variable
• Dropleft Biến thể
• Cách sử dụng
• Thông qua các thuộc tính dữ liệu
• Thông qua JavaScript
• Tùy chọn
• Phương pháp
• Cho phép thả xuống để đặt trong trường hợp chéo trên tham chiếu phần tử. Để biết thêm thông tin, hãy tham khảo tài liệu của popper. js

tổng quan

Menu thả xuống có thể bật, lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và nhiều hơn nữa. Họ đã thực hiện tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Họ đã chuyển đổi bằng cách nhấp vào, không phải bằng cách lơ lửng;

Dropdowns được xây dựng trên thư viện bên thứ ba, popper. js, cung cấp định vị động và phát chế độ xem. Hãy chắc chắn bao gồm popper. tối thiểu. js trước bootstrap từ javascript hoặc sử dụng

 class="dropdown show">
   class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  

   class="dropdown-menu" aria-labelledby="dropdownMenuLink">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
 class="dropdown-item" href="#">Separated link

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

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
 class="dropdown-item" href="#">Separated link

Khả năng cận kề

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

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
 class="dropdown-item" href="#">Separated link

Mặt khác, thả xuống Bootstrap, được thiết kế chung và áp dụng cho nhiều vấn đề và cấu trúc đánh dấu. Chẳng hạn, có thể tạo các thả xuống có chứa các đầu vào và điều khiển hình thức bổ sung, chẳng hạn như các 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 không tự động bổ sung) bất kỳ thuộc tính nào

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Tuy nhiên, Bootstrap thực hiện hỗ trợ tích hợp cho hầu hết các menu tương tác bàn phím tiêu chuẩn, chẳng hạn như khả năng di chuyển qua các yếu tố chính

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Ví dụ

Bao bọc chuyển đổi thả xuống (nút hoặc liên kết của bạn) và menu thả xuống trong

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Thả xuống một nút

bất kỳ

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

And with the elements

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="dropdown show">
   class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  

   class="dropdown-menu" aria-labelledby="dropdownMenuLink">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
  

Điều 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ào có thể nút

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Nút thả xuống

Tương tự như vậy, tạo các nút phân chia thả xuống gần với các dấu hiệu đánh dấu giống như các nút thả xuống đơn, nhưng với việc bổ sung

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Chúng tôi sử dụng lớp bổ sung này để giảm 25% theo chiều ngang

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Size

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

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Change can drop

Menu thả xuống kích hoạt các phần tử trên bằng cách bổ sung

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Unabled variable

Menu thả xuống kích hoạt ở bên phải của các phần tử bằng cách bổ sung

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Dropleft Biến thể

Menu thả xuống kích hoạt ở bên trái của các phần tử bằng cách bổ sung

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Trong lịch sử, menu nội dung thả xuống phải là liên kết, nhưng điều đó không còn là trường hợp với V4. Bây giờ bạn có thể tùy chọn sử dụng các yếu tố

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Theo mặc định, menu thả xuống được định vị tự động 100% từ trên cùng và dọc theo bên trái của cha mẹ. Họ

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Up up. Việc thả xuống được định vị nhờ popper. js ( ngoại trừ khi chúng được chứa trong một thanh hải quâ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)

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Thêm tiêu đề vào các phần của các phần hành động trong bất kỳ menu thả xuống nào

 class="dropdown show">
   class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  

   class="dropdown-menu" aria-labelledby="dropdownMenuLink">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
  

Các nhóm mục menu liên quan với một bộ chia

 class="dropdown show">
   class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  

   class="dropdown-menu" aria-labelledby="dropdownMenuLink">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
  

Nhấn 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 phần đệm để cung cấp cho nó không gian âm bạn yêu cầu

 class="dropdown show">
   class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  

   class="dropdown-menu" aria-labelledby="dropdownMenuLink">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
  

Họ

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="dropdown show">
   class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  

   class="dropdown-menu" aria-labelledby="dropdownMenuLink">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
  

Họ

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="dropdown show">
   class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  

   class="dropdown-menu" aria-labelledby="dropdownMenuLink">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
  

Cách sử dụng

Thông qua các thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống bật ẩn nội dung (menu thả xuống) bằng cách bật lớp

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Trên các thiết bị hỗ trợ cảm ứng ứng dụng, việc mở một thả xuống thêm trống (

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

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

Họ

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

 class="dropdown show">
   class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  

   class="dropdown-menu" aria-labelledby="dropdownMenuLink">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
  

Thông qua JavaScript

Calling down through JavaScript

 class="dropdown show">
   class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  

   class="dropdown-menu" aria-labelledby="dropdownMenuLink">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
  

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

16 is being request

Dù bạn có gọi thả xuống thông qua JavaScript hay thay vào đó sử dụng Data-API,

 class="btn-group">
   type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  
   class="dropdown-menu">
     class="dropdown-item" href="#">Action
     class="dropdown-item" href="#">Another action
     class="dropdown-item" href="#">Something else here
     class="dropdown-divider">
     class="dropdown-item" href="#">Separated link
  

Tùy chọn

Các tùy chọn có thể được truyề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 kết nối tên tùy chọn vào