[basic] BS5 - Button Group (BS버튼그룹)

1. Button Group 수평형 (= 버튼가로나열)
2. Button Group 크기 (= 큰버튼그룹/작은버튼그룹)
3. Button Group 수직형 (= 버튼세로나열)
4. Button Group 옆으로 나란히 배치
5. Button Group 드롭다운버튼 (= 중첩버튼그룹)

※ BS4와 대체로 유사하나, 버튼 그룹 중첩 시 드롭다운 위한 속성이 바뀜.

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>

 

결과보기

※ BS4와 동일

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>

 

결과보기

※ BS4와 동일

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>

 

결과보기

※ BS4와 동일 

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>

결과보기

※ 버튼그룹은 인라인이라 부모요소 너비 충분히 클 때, 옆으로 나란히 배치됨.

※ BS4와 동일

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-bs-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>

 

결과보기

cf. BS4 경우, BUTTON 요소에 data-toggle="dropdown" 속성 사용.

※ BS5 경우, .caret 클래스 제거됨.