Source

버튼 그룹

버튼 그룹을 사용하여 일련의 버튼을 한 줄에 그룹화하고 JavaScript로 강력한 기능을 제공합니다.

기본 예

일련의 버튼을 .btnin 으로 감쌉니다 .btn-group. 버튼 플러그인 을 사용하여 선택적 JavaScript 라디오 및 확인란 스타일 동작을 추가하십시오 .

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>
정확한지 확인 role하고 라벨 제공

보조 기술(예: 화면 판독기)이 일련의 버튼이 그룹화되었음을 전달하려면 적절한 role속성을 제공해야 합니다. 버튼 그룹의 경우 role="group", 도구 모음에는 role="toolbar".

또한 대부분의 보조 기술은 올바른 역할 속성이 있음에도 불구하고 이를 알리지 않기 때문에 그룹 및 도구 모음에 명시적인 레이블을 지정해야 합니다. 여기에 제공된 예에서는 를 사용 aria-label하지만 와 같은 대안 aria-labelledby도 사용할 수 있습니다.

버튼 툴바

더 복잡한 구성 요소를 위해 버튼 그룹 세트를 버튼 도구 모음으로 결합합니다. 필요에 따라 유틸리티 클래스를 사용하여 그룹, 버튼 등의 간격을 두십시오.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="btn-group mr-2" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">5</button>
    <button type="button" class="btn btn-secondary">6</button>
    <button type="button" class="btn btn-secondary">7</button>
  </div>
  <div class="btn-group" role="group" aria-label="Third group">
    <button type="button" class="btn btn-secondary">8</button>
  </div>
</div>

도구 모음에서 입력 그룹과 버튼 그룹을 자유롭게 혼합할 수 있습니다. 위의 예와 유사하게 공간을 적절히 배치하려면 몇 가지 유틸리티가 필요할 것입니다.

<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon">
  </div>
</div>

<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">1</button>
    <button type="button" class="btn btn-secondary">2</button>
    <button type="button" class="btn btn-secondary">3</button>
    <button type="button" class="btn btn-secondary">4</button>
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text" id="btnGroupAddon2">@</div>
    </div>
    <input type="text" class="form-control" placeholder="Input group example" aria-label="Input group example" aria-describedby="btnGroupAddon2">
  </div>
</div>

사이징

그룹의 모든 버튼에 버튼 크기 조정 클래스를 적용하는 대신, 여러 그룹을 중첩할 때 각 버튼을 포함하여 각각에 추가 .btn-group-*하기 만 하면 됩니다..btn-group



<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>

중첩

일련 의 버튼과 혼합된 드롭다운 메뉴를 원할 때 .btn-group다른 안에 배치합니다..btn-group

드롭다운 링크 드롭다운 링크 
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>

  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

수직 변동

버튼 세트를 가로가 아닌 세로로 쌓은 것처럼 보이게 합니다. 분할 버튼 드롭다운은 여기에서 지원되지 않습니다.

드롭다운 링크 드롭다운 링크
드롭다운 링크 드롭다운 링크
드롭다운 링크 드롭다운 링크
드롭다운 링크 드롭다운 링크 
<div class="btn-group-vertical">
  ...
</div>