Bootstrap 4

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

목차
  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;

}

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
basic BS4 - HOME (BS소개)
basic BS4 - Start (BS시작) - BS4다운 / BS4CDN / BS4구문
basic BS4 - Container (BS컨테이너) - 박스형 vs 와이드형 (= .container vs. .co…
basic BS4 - Grid (BS그리드)
basic BS4 - Text/Typography (BS글자 = BS텍스트)
basic BS4 - Color (BS색깔 = BS색상) - BS글자색 + BS배경색
basic BS4 - Table (BS테이블) - 테이블테두리 + 테이블배경색 + 반응형테이블
basic BS4 - Image (BS이미지) - 이미지모양 + 이미지정렬 + 반응형이미지
basic BS4 - Jumbotron (BS점보트론) - 박스형 vs 와이드형
basic BS4 - Alert (BS경고 = BS얼럿 = BS경보) - 배경색 + 글자색 + 링크색 + 닫기 + 애니…
basic BS4 - Button (BS버튼) - 버튼색깔 + 버튼크기 + 버튼활성화 + 버튼비활성화
basic BS4 - Button Group (BS버튼그룹)
basic BS4 - Badge (BS배지)
basic BS4 - Progress Bar (BS진행바 = BS진도바 = BS프로그레스바)
basic BS4 - Spinner (BS스피너 = BS회전 = BS로더)
basic BS4 - Pagination (BS페이지매기기 = BS페이지번호 = BS페이징 = BS패지네이션) + BS…
basic BS4 - List Group (BS리스트그룹)
basic BS4 - Card (BS카드) - Well (BS웰) + Panel (BS패널) + Thumbnail (B…
basic BS4 - Dropdown (BS드롭다운/BS드롭업 = BS드랍다운/BS드랍업)
basic BS4 - Collapse (BS접기 = BS컬랩스 = BS토글)
1/3
목록
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드 2
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱 PC버전 로그인