Nút chia tách dropdown sử dụng cùng kiểu chung với nút dropdown nhưng thêm hành động chính cùng với dropdown. Nút chia tách có hành động chính bên trái và nút bật/tắt bên phải hiển thị dropdown.
Ví dụ
Bạn có thể chạy mã sau để chia tách nút dropdown:
<!DOCTYPE html> <html> <head> <title>Ví dụ Bootstrap</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div class = "btn-group"> <button type = "button" class = "btn btn-default">Tuyển sinh</button> <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Thạc sĩ</a></li> <li><a href = "#">Cử nhân</a></li> </ul> </div> <div class = "btn-group"> <button type = "button" class = "btn btn-primary">Giảng viên</button> <button type = "button" class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown"> <span class = "caret"></span> <span class = "sr-only">Toggle Dropdown</span> </button> <ul class = "dropdown-menu" role = "menu"> <li><a href = "#">Quản trị</a></li> <li><a href = "#">Kỹ thuật</a></li> <li><a href = "#">Nhân viên</a></li> </ul> </div> </body> </html>
Cấu trúc: .btn-group bao gồm 2 nút - nút hành động chính và nút toggle dropdown.