부트스트랩 Bootstrap 3 구성요소 Button group

버튼그룹은 한줄에 또는 하나의 묶음의 버튼들을 말합니다.

라디오버튼과 체크박스 등의 추가적인 동작을 원할때는 자바스크립트 플러그인을 사용해야 합니다. 자바스크립트에 대해서는 차후 포스팅에서 자세히 다루겠습니다.

버튼그룹에서 툴팁과 팝오버(popovers)를 사용하려면 특별한 설정이 필요합니다.

.btn-group 안의 태그에 툴팁이나 팝오버를 사용할 때, 원치 않는 부작용(툴팁이나 팝오버가 동작할때 태그 요소가 넓어진다거나 둥근모서리 효과가 없어진다거나 하는 현상)을 피하기 위해서는 container: 'body' 옵션을 명시해야 한다고 합니다.

기본은 .btn 클래스를 .btn-group 가 감싸는 형태를 취하면 됩니다.

.btn-group(버튼 그룹이라 칭함) 이 버튼을 모음이라고 하면 .btn-toolbar(버튼 툴바라 칭함)는 버튼 그룹의 모음입니다.

버튼의 크기 조정은 .btn-group-* 즉 lg, sm, xs 와 같은 단어가 포함되면 됩니다. 이 단어는 맨 처음에 이야기했던 large, small, extra small 을 뜻합니다.

중첩은 버튼그룹에 또다른 일련의 버튼 그룹을 사용할때를 말합니다. 예를들어 기본 버튼그룹에 드롭다운버튼 형식을 사용할때를 말합니다.

같은 버튼그룹이지만 성격이 다르죠. 버튼그룹으로 묶지만 드롭다운은 또 다른 버튼그룹이기때문에 .btn-group 로 묶어줘야 합니다.

버튼 그룹을 세로로 배치하고 싶다면 단순이 .btn-group-vertical 클래스만 추가해주면 됩니다.

앵커(a)요소 같은 경우 고정 너비를 같고 있지 않습니다. 더군다나 인라인입니다. 그래서 내용의 크기만큼 너비를 차지하게 됩니다.

허나 내용이 없어도 고정적인 너비를 차지하게끔 하고 싶을때 .btn-group-justified 클래스를 추가합니다.

여기서 고정적인 너비란 부모의 너비란 뜻입니다.

즉 부모의 너비를 모두 사용한 너비를 자식들이 차지한다는 말입니다.

아래 이미지에서 보시면 a 요소가 3개가 있습니다. a 요소에는 .btn 이라는 클래스가 붙어서 inline-block 로 지정되었지 고정적인 너비는 없습니다.

근데 example 에 보면 고정적인 너비를 차지하고 있는데요. 그것은 .btn-group-justified 클래스 때문입니다.

이것이 display:table 로 부모의 너비만큼 각각 차지하고 있기 때문입니다.

결론은 인라인을 또는 a 요소가 같은 것을 부모요소 너비만큼 꽉차게 사용하려면 .btn-group-justified 를 사용하면 됩니다.

<button> 태그에는 작동하지 않고, 오직 <a> 태그에만 작동합니다.

demun(대문블로그)