Bootstrap 5 버튼 그룹
과목 추천:
버튼 그룹
Bootstrap 5는 버튼 그룹에서 버튼을 일렬로 모아서(한 줄에) 조합할 수 있습니다: .btn-group 클래스 <div> 요소를 사용하여 버튼 그룹을 만들 수 있습니다:
예제
<div class="btn-group"> <button type="button" class="btn btn-primary">화웨이</button> <button type="button" class="btn btn-primary">다죤</button> <button type="button" class="btn btn-primary">시미즈</button> </div>
훌륭한 팁:버튼 크기를 그룹 안의 각 버튼에 적용하지 말고, 클래스 .btn-group-lg 대형 버튼 그룹이나: .btn-group-sm 소형 버튼 그룹을 위한:
예제
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">화웨이</button> <button type="button" class="btn btn-primary">다죤</button> <button type="button" class="btn btn-primary">시미즈</button> </div>
수직 버튼 그룹
Bootstrap 5는 수직 버튼 그룹도 지원합니다:
클래스를 사용하세요 .btn-group-vertical 수직 버튼 그룹을 생성하려면:
예제
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">화웨이</button> <button type="button" class="btn btn-primary">다죤</button> <button type="button" class="btn btn-primary">시미즈</button> </div>
가로 버튼 그룹
기본적으로 버튼 그룹은 "inline"입니다. 여러 버튼 그룹이 있을 때는 가로로 표시됩니다:
예제
<div class="btn-group"> <button type="button" class="btn btn-primary">화웨이</button> <button type="button" class="btn btn-primary">다죤</button> <button type="button" class="btn btn-primary">시미즈</button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary">지리</button> <button type="button" class="btn btn-primary">장성</button> <button type="button" class="btn btn-primary">홍기</button> </div>
내장 버튼 그룹과 드롭다운 메뉴
내장 버튼 그룹을 사용하여 드롭다운 메뉴를 생성할 수 있습니다. (드롭다운 메뉴에 대해 더 많은 내용을 나중 장에서 배울 것입니다):
예제
<div class="btn-group">
<button type="button" class="btn btn-primary">화웨이</button>
<button type="button" class="btn btn-primary">다죤</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="#">스마트폰</a>
<a class="dropdown-item" href="#">태블릿 컴퓨터</a>
</div>
</div>
</div>
