• Q&A
  • 회원가입
  • 로그인

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

181  
목차
  1. Button Group 수평형 (= 버튼가로나열)
  2. Button Group 크기 (= 큰버튼그룹/작은버튼그룹)
  3. Button Group 수직형 (= 버튼세로나열)
  4. Button Group 드롭다운버튼 (= 중첩버튼그룹)
  5. Button Group 스플릿버튼드롭다운 (= 드룹다운분리버튼)
  6. Button Group 드롭다운수직버튼 (= 드롭다운세로버튼)
  7. Button Group 옆으로 나란히
  8. .btn-group, .btn-group-vertical 기본 CSS

 

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>

 

결과보기

 

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>

 

결과보기

 

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>

 

결과보기

 

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

 

결과보기

 

Button Group 스플릿버튼드롭다운 (= 드룹다운분리버튼)

 

<div class="btn-group">

    <button type="button" class="btn btn-primary">코딩언어</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="#">HTML</a>

        <a class="dropdown-item" href="#">CSS</a>

        <a class="dropdown-item" href="#">JS</a>

    </div>

</div>

 

결과보기

※ 드롭다운버튼과 유사하나, 핑크색 부분에서 차이.

 

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>

    <div class="btn-group">

        <button type="button" class="btn btn-primary dropdown-toggledata-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>

 

결과보기

 

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>

결과보기

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

 

.btn-group, .btn-group-vertical 기본 CSS

 

.btn-group, .btn-group-vertical {

    position: relative;

    display: -ms-inline-flexbox;

    display: inline-flex;

    vertical-align: middle;

}

 



찾아주셔서 감사합니다. Since 2012