Button 클래스
아래 클래스는 <a>, <button> , <input> 태그에 사용 가능.
.btn-group : 버튼그룹 생성 (= 버튼을 가로 한 줄로 묶기.)
.btn-group-justified : 버튼그룹을 화면 전체 너비에 걸쳐 배분.
.btn-group-lg : 큰 버튼그룹 (버튼 그룹의 모든 버튼을 크게-글꼴 크기 및 패딩 증가)
.btn-group-sm : 작은 버튼 그룹 (버튼 그룹의 모든 버튼을 더 작게 만듦.)
.btn-group-xs : 매우 작은 버튼 그룹 (버튼 그룹의 모든 버튼을 더 작게 만듦.)
.btn-group-vertical : 버튼 그룹을 세로로 쌓기.
Button Group 기본 (= 수평 = 가로나열)
<div class="btn-group">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<button type="button" class="btn btn-primary">홈페이지 제작관리</button>
</div>
결과보기
Button Group 크기 (= 대형/소형)
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<button type="button" class="btn btn-primary">홈페이지 제작관리</button>
</div>
<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<button type="button" class="btn btn-primary">홈페이지 제작관리</button>
</div>
결과보기
Button Group 수직 (= 세로나열)
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<button type="button" class="btn btn-primary">홈페이지 제작관리</button>
</div>
결과보기
Button Group 전체너비 균등배분
<a> 태그 경우
<div class="btn-group btn-group-justified">
<a href="#" class="btn btn-primary">HTML</a>
<a href="#" class="btn btn-primary">CSS</a>
<a href="#" class="btn btn-primary">JS</a>
</div>
결과보기
<button> 태그 경우, .btn-group 클래스 갖은 div로 button 태그 감싸줘야 함.
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-primary">HTML</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">CSS</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">JS</button>
</div>
</div>
결과보기
Button Group 드롭다운 (= 중첩버튼그룹)
<div class="btn-group">
<button type="button" class="btn btn-primary">HTML</button>
<button type="button" class="btn btn-primary">CSS</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
BS<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">BS3</a></li>
<li><a href="#">BS4</a></li>
</ul>
</div>
</div>
결과보기
Button Group 스플릿버튼드롭다운 (= 드룹다운분리버튼)
<div class="btn-group">
<button type="button" class="btn btn-primary">BS</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="#">BS3</a></li>
<li><a href="#">BS4</a></li>
</ul>
</div>
결과보기
※ 드롭다운버튼과 유사하나, 핑크색 부분에서 차이.
