Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

부트스트랩을 사용한 분할 버튼 드롭다운


분할 버튼 드롭다운은 드롭다운 버튼과 동일한 일반 스타일을 사용하지만 드롭다운과 함께 기본 작업을 추가합니다. 분할 버튼의 왼쪽에는 기본 동작이 있고 오른쪽에는 드롭다운을 표시하는 토글이 있습니다.

예시

다음 코드를 실행하여 버튼 드롭다운을 분할할 수 있습니다. -

<!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>