목차
Button Group 수평형 (= 버튼가로나열) Button Group 크기 (= 큰버튼그룹/작은버튼그룹) Button Group 수직형 (= 버튼세로나열) Button Group 드롭다운버튼 (= 중첩버튼그룹) Button Group 스플릿버튼드롭다운 (= 드룹다운분리버튼) Button Group 드롭다운수직버튼 (= 드롭다운세로버튼) Button Group 옆으로 나란히 .btn-group, .btn-group-vertical 기본 CSS
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 드롭다운버튼 (= 중첩버튼그룹)
<div class="btn-group">
<button type="button" class="btn btn-primary">홈짱닷컴</button>
<button type="button" class="btn btn-primary">Homzzang.com</button>
<div class="btn-group" >
<button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown" >
코딩언어
</button>
<div class="dropdown-menu ">
<a class="dropdown-item " href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
</div>
</div>
</div>
결과보기
Button Group 스플릿버튼드롭다운 (= 드룹다운분리버튼)
<div class="btn-group">
<button type="button" class="btn btn-primary">코딩언어</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="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
</div>
</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>
<div class="btn-group ">
<button type="button" class="btn btn-primary dropdown-toggle " data-toggle="dropdown" >
코딩언어
</button>
<div class="dropdown-menu ">
<a class="dropdown-item " href="#">HTML</a>
<a class="dropdown-item" href="#">CSS</a>
<a class="dropdown-item" href="#">JS</a>
</div>
</div>
</div>
결과보기
Button Group 옆으로 나란히
<div class="container">
<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">2012</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">HTML</button>
<button type="button" class="btn btn-primary">CSS</button>
<button type="button" class="btn btn-primary">JS</button>
</div>
</div>
결과보기
※ 버튼그룹은 인라인이라 부모요소 너비 충분히 클 때, 옆으로 나란히 배치됨.
.btn-group, .btn-group-vertical 기본 CSS
.btn-group, .btn-group-vertical {
position: relative;
display: -ms-inline-flexbox;
display: inline-flex;
vertical-align: middle;
}
