지난 포스팅에는 부트스트랩을 이용하여 버튼의 색상이랑 크기를 지원해주는 클래스를 이용하여 출력해보았습니다 ㅎㅎ
이번은 추가로 그룹버튼에 대하여 포스팅을 진행해보겠습니다!
※ 클래스만 동일하다면 BUTTON 태그말고도 A 태그로도 적용이 가능합니다 .
그룹 버튼을 만들기 위해서는 버튼태그들을 div 태그로 감싸준 다음 클래스명을
가로형 그룹버튼일 경우에는 "btn-group"
세로형 그룹버튼일 경우에는 "btn-group-vertical"
적용 해주시면 되겠습니다.
저번에 포스팅한 버튼 코드를 변경하여 그룹버튼으로 변경해보도록 하겠습니다
지난시간에 생성한 버튼들을 위처럼 따로 떨어져있었습니다.
그렇다면 가로형 그룹과 세로형 그룹버튼을 한번 만들어 보도록 하겠습니다.
<!-- 기존 default 색상별 버튼 --> <button class="btn btn-default">DEFAULT</button> <button class="btn btn-primary">BLUE</button> <button class="btn btn-success">GREEN</button> <button class="btn btn-info">SKY</button> <button class="btn btn-warning">YELLO</button> <button class="btn btn-danger">RED</button> <br/><br/> <!-- 가로형 그룹버튼 --> <div class="btn-group"> <button class="btn btn-default">DEFAULT</button> <button class="btn btn-primary">BLUE</button> <button class="btn btn-success">GREEN</button> <button class="btn btn-info">SKY</button> <button class="btn btn-warning">YELLO</button> <button class="btn btn-danger">RED</button> </div> <br/><br/> <!-- 세로형 그룹버튼 --> <div class="btn-group-vertical"> <button class="btn btn-default">DEFAULT</button> <button class="btn btn-primary">BLUE</button> <button class="btn btn-success">GREEN</button> <button class="btn btn-info">SKY</button> <button class="btn btn-warning">YELLO</button> <button class="btn btn-danger">RED</button> </div>
위 코드를 기준으로 실행결과를 확인하도록 해보겠습니다.
그룹버튼을 적용한 결과화면입니다.
상단은 그룹버튼 생성이긴 하나 추가로 브라우저 너비 100% 채우기 위한 그룹버튼을 생성하고 싶을 경우에는
그룹클래스가 들어간 div태그에 "btn-group-justified" 라는 클래스 추가만으로
브라우저의 가로넓이를 가득채우는 버튼그룹을 만들 수 있습니다.
<div class="btn-group btn-group-justified">
한번 가득채우는 그룹버튼과 기본적인 그룹버튼을 비교 해보도록 하겠습니다.
<!-- 가로형 그룹버튼 --> <div class="btn-group"> <a class="btn btn-default" >좌측</a> <button class="btn btn-default">DEFAULT</button> <button class="btn btn-primary">BLUE</button> <button class="btn btn-success">GREEN</button> <button class="btn btn-info">SKY</button> <button class="btn btn-warning">YELLO</button> <button class="btn btn-danger">RED</button> </div> <br/><br/> <!-- 넓이 100% 그룹버튼 --> <div class="btn-group btn-group-justified"> <a class="btn btn-default" >좌측</a> <button class="btn btn-default">DEFAULT</button> <button class="btn btn-primary">BLUE</button> <button class="btn btn-success">GREEN</button> <button class="btn btn-info">SKY</button> <button class="btn btn-warning">YELLO</button> <button class="btn btn-danger">RED</button> </div>
역시 클래스추가 만으로도 UI를 깔끔하게 만들어주는 부트스트랩 참으로 편하네요 ㅋㅋ
다음에는 메뉴바를 알아보도록 하겠습니다 .
by 개발로짜
부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
---|---|
부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |
부트스트랩 1장 - 부트스트랩 연동하기 (3) | 2014.10.08 |