부트스트랩 4 버튼 그룹
버튼 그룹
부트스트랩 4를 사용하면 버튼 그룹에서 일련의 버튼을 한 줄로 그룹화할 수 있습니다.
클래스가 있는 <div>요소 .btn-group를 사용하여 버튼 그룹 생성:
예시
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
팁: 그룹의 모든 버튼에 버튼 크기를 적용하는 대신 .btn-group-lg큰 버튼 그룹 또는 .btn-group-sm작은 버튼 그룹에 대해 클래스를 사용합니다.
큰 버튼:
기본 버튼:
작은 버튼:
예시
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
수직 버튼 그룹
Bootstrap 4는 수직 버튼 그룹도 지원합니다.
클래스 .btn-group-vertical를 사용하여 수직 버튼 그룹을 만듭니다.
예시
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
중첩 버튼 그룹 및 드롭다운 메뉴
드롭다운 메뉴를 만들기 위한 네스트 버튼 그룹(드롭다운에 대한 자세한 내용은 이후 장에서 설명):
예시
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
분할 버튼 드롭다운
예시
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle
dropdown-toggle-split"
data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
수직 버튼 그룹(드롭다운 포함)
예시
<div class="btn-group-vertical">
<button type="button" class="btn
btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn
btn-primary dropdown-toggle" data-toggle="dropdown">
Sony
</button>
<div
class="dropdown-menu">
<a
class="dropdown-item" href="#">Tablet</a>
<a
class="dropdown-item" href="#">Smartphone</a>
</div>
</div>
</div>
버튼 그룹 나란히
버튼 그룹은 기본적으로 "인라인"이므로 여러 그룹이 있을 때 나란히 표시됩니다.
예시
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>