Computer >> Máy Tính >  >> Lập trình >> Javascript

Trình đơn thả xuống nút tách với Bootstrap


Trình đơn thả xuống của nút tách sử dụng kiểu chung giống như nút thả xuống nhưng thêm một hành động chính cùng với trình đơn thả xuống. Các nút phân tách có tác vụ chính ở bên trái và nút chuyển đổi ở bên phải hiển thị menu thả xuống.

Ví dụ

Bạn có thể thử chạy đoạn mã sau để chia nút thả xuống -

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</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">Admissions</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 = "#">Masters</a></li>
            <li><a href = "#">Bachelors</a></li>
         </ul>
      </div>
      <div class = "btn-group">
         <button type = "button" class = "btn btn-primary">Faculty</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 = "#">Management</a></li>
            <li><a href = "#">Technical</a></li>
            <li><a href = "#">Staff</a></li>
         </ul>
      </div>
   </body>
</html>