부트스트랩 버튼 그룹
버튼 그룹
부트스트랩을 사용하면 버튼 그룹에서 일련의 버튼을 한 줄로 그룹화할 수 있습니다.
클래스가 있는 <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|sm|xs를 사용하여 그룹의 모든 버튼 크기를 조정합니다.
예시
<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>
수직 버튼 그룹
부트스트랩은 수직 버튼 그룹도 지원합니다.
클래스 .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>
양쪽 맞춤 버튼 그룹
화면의 전체 너비를 확장하려면 다음 .btn-group-justified
클래스를 사용하세요.
요소 가 있는 예 <a>:
예시
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">Apple</a>
<a href="#" class="btn btn-primary">Samsung</a>
<a href="#" class="btn btn-primary">Sony</a>
</div>
참고: 요소의 경우 클래스 <button>의 각 버튼을 래핑해야 합니다 ..btn-group
예시
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Samsung</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
</div>
</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 <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>
</div>
분할 버튼 드롭다운
예시
<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Tablet</a></li>
<li><a href="#">Smartphone</a></li>
</ul>
</div>