여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Bootstrap - Bootstrap 4 버튼 그룹
Bootstrap – Bootstrap 4 버튼 그룹
6개월전 작성
6개월전 수정



부트스트랩 4 버튼 그룹

Bootstrap 4를 사용하면 일련의 버튼을 버튼 그룹에서 (한 줄에) 함께 그룹화할 수 있다.



.btn-group 클래스가 있는 <div> 요소를 사용하여 버튼 그룹을 만든다.

예제
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
기본 예시
예제 보기

⭐ 그룹의 모든 버튼에 버튼 크기를 적용하는 대신 큰 버튼 그룹 .btn-group-lg 또는 작은 버튼 그룹에 .btn-group-sm 클래스를 사용하자.

예제
<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
기본 예시
예제 보기

수직 버튼 그룹

Bootstrap 4는 수직 버튼 그룹도 지원한다.

.btn-group-vertical 클래스를 사용하여 수직 버튼 그룹을 만든다.

예제
<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>
기본 예시
예제 보기

중첩 버튼 그룹 및 드롭다운 메뉴

예제
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>
기본 예시
예제 보기

분할 버튼 드롭다운

예제
<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</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="#">Tablet</a>
    <a class="dropdown-item" href="#">Smartphone</a>
  </div>
</div>
기본 예시
예제 보기

드롭다운이 있는 수직 버튼 그룹

예제
<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
       Sony
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Tablet</a>
      <a class="dropdown-item" href="#">Smartphone</a>
    </div>
  </div>
</div>
기본 예시
예제 보기

여러 버튼 그룹

버튼 그룹은 기본적으로 “인라인”이므로 여러 그룹이 있는 경우 나란히 표시된다.

예제
<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-primary">BMW</button>
  <button type="button" class="btn btn-primary">Mercedes</button>
  <button type="button" class="btn btn-primary">Volvo</button>
</div>
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그