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

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

Button 클래스

 

아래 클래스는 <a>, <button> , <input> 태그에 사용 가능.

 

.btn-group  :  버튼그룹 생성 (= 버튼을 가로 한 줄로 묶기.)

.btn-group-justified  :  버튼그룹을 화면 전체 너비에 걸쳐 배분.

.btn-group-lg  :  큰 버튼그룹 (버튼 그룹의 모든 버튼을 크게-글꼴 크기 및 패딩 증가)

.btn-group-sm   :  작은 버튼 그룹 (버튼 그룹의 모든 버튼을 더 작게 만듦.)

.btn-group-xs  :  매우 작은 버튼 그룹 (버튼 그룹의 모든 버튼을 더 작게 만듦.)

.btn-group-vertical  :  버튼 그룹을 세로로 쌓기. 

 



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 전체너비 균등배분

 

<a> 태그 경우

 

<div class="btn-group btn-group-justified">

  <a href="#" class="btn btn-primary">HTML</a>

  <a href="#" class="btn btn-primary">CSS</a>

  <a href="#" class="btn btn-primary">JS</a>

</div>

 

결과보기


 

<button> 태그 경우, .btn-group 클래스 갖은 div로 button 태그 감싸줘야 함.

 

<div class="btn-group btn-group-justified">

    <div class="btn-group">

        <button type="button" class="btn btn-primary">HTML</button>

    </div>

    <div class="btn-group">

        <button type="button" class="btn btn-primary">CSS</button>

    </div>

    <div class="btn-group">

        <button type="button" class="btn btn-primary">JS</button>

    </div>

</div>

 

결과보기


Button Group 드롭다운 (= 중첩버튼그룹)

 

<div class="btn-group">

    <button type="button" class="btn btn-primary">HTML</button>

    <button type="button" class="btn btn-primary">CSS</button>

    <div class="btn-group">

        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

    BS<span class="caret"></span></button>

        <ul class="dropdown-menu" role="menu">

            <li><a href="#">BS3</a></li>

            <li><a href="#">BS4</a></li>

        </ul>

    </div>

</div>

 

결과보기


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

 

 

<div class="btn-group">

    <button type="button" class="btn btn-primary">BS</button>

    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

        <span class="caret"></span>

    </button>

    <ul class="dropdown-menu" role="menu">

        <li><a href="#">BS3</a></li>

        <li><a href="#">BS4</a></li>

    </ul>

</div>

 

결과보기

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


 

오늘도 즐겁게 열심히 .....

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