버튼 그룹
Bootstrap 그룹에 버튼 그룹 (한 줄에) 함께 버튼의 일련을 할 수 있습니다 :
용도 <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-* 크기 그룹의 모든 버튼에 :
예
<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 또한 수직 버튼 그룹을 지원합니다 :
클래스 사용 .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> »그것을 자신을 시도