버튼 그룹
일련의 버튼을 한 줄에 그룹화하거나 세로 열에 쌓습니다.
기본 예
일련의 버튼을 .btn
in 으로 감쌉니다 .btn-group
.
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
정확한지 확인 role
하고 라벨 제공
보조 기술(예: 화면 판독기)이 일련의 버튼이 그룹화되었음을 전달하려면 적절한 role
속성을 제공해야 합니다. 버튼 그룹의 경우 role="group"
, 도구 모음에는 role="toolbar"
.
또한 대부분의 보조 기술은 올바른 역할 속성이 있음에도 불구하고 이를 알리지 않기 때문에 그룹 및 도구 모음에 명시적인 레이블을 지정해야 합니다. 여기에 제공된 예에서는 를 사용 aria-label
하지만 와 같은 대안 aria-labelledby
도 사용할 수 있습니다.
.nav
이러한 클래스는 탐색 구성 요소 의 대안으로 링크 그룹에 추가할 수도 있습니다 .
<div class="btn-group">
<a href="#" class="btn btn-primary active" aria-current="page">Active link</a>
<a href="#" class="btn btn-primary">Link</a>
<a href="#" class="btn btn-primary">Link</a>
</div>
혼합 스타일
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-danger">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
윤곽선 스타일
<div class="btn-group" role="group" aria-label="Basic outlined example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
확인란 및 라디오 버튼 그룹
버튼 모양의 체크박스와 라디오 토글 버튼 을 매끄럽게 보이는 버튼 그룹으로 결합합니다.
<div class="btn-group" role="group" aria-label="Basic checkbox toggle button group">
<input type="checkbox" class="btn-check" id="btncheck1" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck1">Checkbox 1</label>
<input type="checkbox" class="btn-check" id="btncheck2" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck2">Checkbox 2</label>
<input type="checkbox" class="btn-check" id="btncheck3" autocomplete="off">
<label class="btn btn-outline-primary" for="btncheck3">Checkbox 3</label>
</div>
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
버튼 툴바
더 복잡한 구성 요소를 위해 버튼 그룹 세트를 버튼 도구 모음으로 결합합니다. 필요에 따라 유틸리티 클래스를 사용하여 그룹, 버튼 등의 간격을 두십시오.
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-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-info">8</button>
</div>
</div>
도구 모음에서 입력 그룹과 버튼 그룹을 자유롭게 혼합할 수 있습니다. 위의 예와 유사하게 공간을 적절히 배치하려면 몇 가지 유틸리티가 필요할 것입니다.
<div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon">@</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-outline-secondary">1</button>
<button type="button" class="btn btn-outline-secondary">2</button>
<button type="button" class="btn btn-outline-secondary">3</button>
<button type="button" class="btn btn-outline-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-text" id="btnGroupAddon2">@</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-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
수직 변동
버튼 세트가 수평이 아닌 수직으로 쌓이는 것처럼 보이게 합니다. 분할 버튼 드롭다운은 여기에서 지원되지 않습니다.
<div class="btn-group-vertical">
...
</div>