부트스트랩(Bootstrap)에서 여러 개의 버튼을 하나의 그룹으로 묶어 표시하려면 .btn-group 클래스를 사용합니다. 이 클래스를 적용하면 버튼들이 나란히 정렬되어 마치 툴바처럼 일체형으로 보이는 UI를 손쉽게 만들 수 있습니다.
버튼 그룹의 기본 구조
버튼 그룹을 만드는 방법은 간단합니다. 여러 개의 버튼 요소를 감싸는 부모 요소에 btn-group 클래스를 지정하기만 하면 됩니다. 부트스트랩이 자동으로 버튼 사이의 간격을 제거하고 경계선을 처리해 줍니다.
예제 코드
아래 코드는 .btn-group 클래스를 활용해 세 개의 버튼(A, B, C)을 하나의 그룹으로 묶는 예제입니다.
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <p>다음은 버튼 그룹 예시입니다:</p> <div class = "btn-group"> <button type = "button" class = "btn btn-default">A</button> <button type = "button" class = "btn btn-default">B</button> <button type = "button" class = "btn btn-default">C</button> </div> </body> </html>
실행 결과
위 코드를 실행하면 A, B, C 세 개의 버튼이 붙어 있는 형태로 화면에 표시됩니다. 각 버튼은 btn btn-default 클래스를 사용해 기본 스타일이 적용되며, 그룹으로 묶였기 때문에 시각적으로 하나의 컨트롤처럼 보입니다.
참고: 다양한 버튼 그룹 옵션
- .btn-group-lg / .btn-group-sm / .btn-group-xs: 그룹 전체 버튼의 크기를 조절할 수 있습니다.
- .btn-group-vertical: 버튼을 가로가 아닌 세로 방향으로 쌓아 올린 그룹을 만들 수 있습니다.
- .btn-toolbar: 여러 버튼 그룹을 묶어 하나의 툴바 형태로 구성할 때 사용합니다.
이처럼 .btn-group 클래스는 웹 애플리케이션에서 툴바, 페이지네이션, 옵션 선택 영역 등을 만들 때 매우 유용하게 활용됩니다.