부트 스트랩-버튼 그룹

버튼 그룹을 사용하면 여러 버튼을 한 줄에 함께 쌓을 수 있습니다. 정렬 버튼과 같은 항목을 함께 배치하려는 경우에 유용합니다. Bootstrap Button Plugin을 사용 하여 선택적 JavaScript 라디오 및 확인란 스타일 동작을 추가 할 수 있습니다 .

다음 표는 Bootstrap이 버튼 그룹을 사용하기 위해 제공하는 중요한 클래스를 요약 한 것입니다.

수업	기술	코드 샘플
.btn-group	이 클래스는 기본 버튼 그룹에 사용됩니다. 일련의 버튼을 클래스로 감싸기.btn 에 .btn-group.	`<div class = "btn-group"> <button type = "button" class = "btn btn-default">Button1</button> <button type = "button" class = "btn btn-default">Button2</button> </div>`
.btn-toolbar	이렇게하면 더 복잡한 구성 요소를 위해 <div class = "btn-group"> 집합을 <div class = "btn-toolbar">로 결합하는 데 도움이됩니다.	`<div class = "btn-toolbar" role = "toolbar"> <div class = "btn-group">...</div> <div class = "btn-group">...</div> </div>`
.btn-group-lg, .btn-group-sm, .btn-group-xs	이러한 클래스는 각 버튼의 크기를 조정하는 대신 버튼 그룹에 적용 할 수 있습니다.	`<div class = "btn-group btn-group-lg">...</div> <div class = "btn-group btn-group-sm">...</div> <div class = "btn-group btn-group-xs">...</div>`
.btn-group-vertical	이 클래스는 버튼 세트를 가로가 아닌 세로로 쌓아 표시합니다.	`<div class = "btn-group-vertical"> ... </div>`

기본 버튼 그룹

다음 예제는 클래스 사용을 보여줍니다. .btn-group 위의 표에서 논의-

<div class = "btn-group">
   
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
   
</div>

버튼 도구 모음

다음 예제는 클래스 사용을 보여줍니다. .btn-toolbar 위의 표에서 논의-

<div class = "btn-toolbar" role = "toolbar">
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 1</button>
      <button type = "button" class = "btn btn-default">Button 2</button>
      <button type = "button" class = "btn btn-default">Button 3</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 4</button>
      <button type = "button" class = "btn btn-default">Button 5</button>
      <button type = "button" class = "btn btn-default">Button 6</button>
   </div>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default">Button 7</button>
      <button type = "button" class = "btn btn-default">Button 8</button>
      <button type = "button" class = "btn btn-default">Button 9</button>
   </div>
   
</div>

버튼 크기

다음 예제는 클래스 사용을 보여줍니다. .btn-group-* 위의 표에서 논의-

<div class = "btn-group btn-group-lg">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   <button type = "button" class = "btn btn-default">Button 3</button>
</div>

<div class = "btn-group btn-group-sm">
   <button type = "button" class = "btn btn-default">Button 4</button>
   <button type = "button" class = "btn btn-default">Button 5</button>
   <button type = "button" class = "btn btn-default">Button 6</button>
</div>

<div class = "btn-group btn-group-xs">
   <button type = "button" class = "btn btn-default">Button 7</button>
   <button type = "button" class = "btn btn-default">Button 8</button>
   <button type = "button" class = "btn btn-default">Button 9</button>
</div>

중첩

다른 버튼 그룹 내에 버튼 그룹을 중첩 할 수 있습니다. .btn-group 다른 안에서 .btn-group . 이것은 일련의 버튼과 혼합 된 드롭 다운 메뉴를 원할 때 수행됩니다.

<div class = "btn-group">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>

수직 버튼 그룹

다음 예제는 클래스 사용을 보여줍니다. .btn-group-vertical 위의 표에서 논의-

<div class = "btn-group-vertical">
   <button type = "button" class = "btn btn-default">Button 1</button>
   <button type = "button" class = "btn btn-default">Button 2</button>
   
   <div class = "btn-group-vertical">
      <button type = "button" class = "btn btn-default dropdown-toggle" data-toggle = "dropdown">
         Dropdown
         <span class = "caret"></span>
      </button>
      
      <ul class = "dropdown-menu">
         <li><a href = "#">Dropdown link 1</a></li>
         <li><a href = "#">Dropdown link 2</a></li>
      </ul>
   </div>
  
</div>