이번 포스팅 주제는 메뉴버튼(다른말로 드롭다운이라고도 불립니다) 생성을 해보도록 하겠습니다 ^^ㅋ
메뉴버튼 역시 지난 포스팅과 동일하게 색상 및 사이즈에 대해서도 클래스 속성을 적용함으로써 출력이 가능합니다.
2014/10/08 - [웹개발강좌/부트스트랩] - 부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편)
그러므로 색상 및 사이즈에 대해서는 배제하고 포스팅을 진행하겠습니다.
기본적인 메뉴버튼에 대한 구조는 다음과 같습니다.
<div class="btn-group"> <!-- 버튼태그 --> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 메뉴버튼 <!-- 버튼태그 우측 메뉴출력을 위한 화살표표시 (없어도 무관하나 메뉴버튼이라는것을 알려주기 위함) --> <span class="caret"></span> </button> <!--메뉴버튼 클릭시 하단 표출된 리스트 영역 --> <ul class="dropdown-menu" > <!-- 메뉴1 --> <li><a href="#">메뉴1</a></li> <!-- 메뉴2 --> <li><a href="#">메뉴2</a></li> </ul> </div>
위와 같은 코드가 메뉴버튼의 기본 구조입니다.
메뉴버튼의 크기 및 사이즈의 경우는 button태그의 class 속성을 추가 및 변경만 해주시면 되겠습니다 ^^
위 기본구조에 대한 코드형태는 다음과 같습니다.
그 외의 메뉴버튼 별도의 속성이 존재한다면 다음과 같이 2가지를 들수 있겠습니다.
해당 속성의 설명은 버튼태그를 2개로 나누는 방법입니다.
기존에 dropdown-toggle 클래스가 존재하는 버튼태그에는 클래스가 "caret"인 span 클래스만 존재하고
해당 태그 이전에 추가로 button태그를 생성하여 일반 버튼을 생성해주시면 됩니다.
그렇게 된다면 현재 제 블로그상단에 메뉴버튼들 처럼 구분이되어 텍스트버튼 클릭시는 링크를 타고 이동이 되고
화살표 클릭시 그 하위의 서브카테고리 목록들이 표출되는 방식과 동일합니다.
기존 코드를 변형해서 샘플코드와 실행결과를 작성해보겠습니다.
<div class="btn-group"> <!-- 추가 버튼태그 --> <button class="btn btn-default" type="button"> 메뉴버튼 </button> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> <!-- 버튼태그 우측 메뉴출력을 위한 화살표표시 (없어도 무관하나 메뉴버튼이라는것을 알려주기 위함) --> <span class="caret"></span> </button> <!--메뉴버튼 클릭시 하단 표출된 리스트 영역 --> <ul class="dropdown-menu" > <!-- 메뉴1 --> <li><a href="#">메뉴1</a></li> <!-- 메뉴2 --> <li><a href="#">메뉴2</a></li> </ul> </div>
메뉴버튼의 위치가 footer에 있다고 가정해봅니다.
만약 메뉴를 클릭했을 경우 메뉴버튼 상단으로 출력이 되는것이 더 깔끔하겠죠?
최상단에 위치할경우 메뉴가 상단으로 출력하면 브라우저로부터 감추어 지니
"DROPUP" 은 상단과 간격이 있는 상태에서 사용해야 합니다.
이런 경우외에도 필요에 따라 사용하면 되므로 알아두도록 하겠습니다.
※ 상단출력을 원하실경우 "btn-group"클래스를 가지고 있는 div태그에 추가로 "dropup"이라는 클래스 추가를 해주시면 되겠습니다.
<!-- 간격을 내리고자 임의로 줄바꿈 --> <br/><br/><br/><br/><br/><br/><br/><br/> <div class="btn-group dropup"> <!-- 추가 버튼태그 --> <button class="btn btn-default" type="button"> 메뉴버튼 </button> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> <!-- 버튼태그 우측 메뉴출력을 위한 화살표표시 (없어도 무관하나 메뉴버튼이라는것을 알려주기 위함) --> <span class="caret"></span> </button> <!--메뉴버튼 클릭시 하단 표출된 리스트 영역 --> <ul class="dropdown-menu" > <!-- 메뉴1 --> <li><a href="#">메뉴1</a></li> <!-- 메뉴2 --> <li><a href="#">메뉴2</a></li> </ul> </div>
임의의 br태그를 이용하여 하단에 위치한다는 가정을 한 후 "dropup" 적용을 해보았습니다 ^^
by 개발로짜
부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
---|---|
부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |
부트스트랩 1장 - 부트스트랩 연동하기 (3) | 2014.10.08 |
지난 포스팅에는 부트스트랩을 이용하여 버튼의 색상이랑 크기를 지원해주는 클래스를 이용하여 출력해보았습니다 ㅎㅎ
이번은 추가로 그룹버튼에 대하여 포스팅을 진행해보겠습니다!
※ 클래스만 동일하다면 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 |
안녕하세요 개발로짜입니다 ^^
이번 부트스트랩 강좌 주제는 버튼 컴포넌트 생성 하는 내용을 다루어 보고자 합니다
부트스트랩의 컴포넌트들은 단순히 태그에 미리 정해져있는 클래스들만 추가 하면
깔끔한 화면으로 출력이 되는것이 참 마음에 듭니다.
이번 시간에는 버튼 컴포넌트들을 다루어 보도록 해보겠습니다.
버튼을 만들기 위해서는 기본적으로 button태그를 구현합니다.
<button>일반버튼</button>
한번 실행해보도록 하겠습니다.
여기서 class들을 추가해주면 되는데 버튼 UI를 적용하기위해서는 기본적은 "btn" 클래스와
추가적으로 지정된 색상 및 사이즈 버튼을 클래스를 표현하는
"btn-xx" 옵션을 추가 해주시면 되겠습니다.
다음 샘플 코드를 먼저 작성해보겠습니다.
코드전 연동법에 관련해서는 다음포스팅을 참고해주세요
2014/10/08 - [웹개발강좌/부트스트랩] - 부트스트랩 1장 - 부트스트랩 연동하기
<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/> <button class="btn btn-default btn-lg">LARGE DEFAULT</button> <button class="btn btn-default btn-sm">SMALL DEFAULT</button> <button class="btn btn-default btn-xs">VERY SMALL DEFAULT</button>
실행화면을 먼저 보시겠습니다.
위에보니 확실히 깔끔한 버튼이 생성되었네요 ㅎ
깔끔한 버튼UI를 만들기 위해서는 다음과 같습니다.
1. 부트스트랩 기본버튼 : class="btn btn-default"
2. 파랑색버튼 : class="btn btn-primary"
3. 녹색버튼 : class="btn btn-success"
4. 하늘색버튼 : class="btn btn-info"
5. 노란버튼 : class="btn btn-warning"
6. 빨간버튼 : class="btn btn-danger"
※ 사이즈에 대한 코드는 default 버튼에 적용을 하였으나 색상별 적용도 가능합니다.
사이즈 적용을 하기 위해서는 버튼 컴포넌트를 색상별 클래스로 적용 후 다음 클래스를 적용하시면 되겠습니다.
1. default 사이즈에는 별도의 클래스가 필요없습니다.
2. 큰사이즈 경우에는 "btn-lg" 클래스 추가
3. 작은사이즈 경우에는 "btn-sm" 클래스 추가
4. 제일작은 사이즈 경우에는 "btn-xs" 클래스 추가
위처럼 정리를 해볼수가 있겠습니다 ^^
by 개발로짜
부트스트랩 6장 - 스크롤스파이 기능을 이용하여 메뉴포커스 변경해보기 (0) | 2014.10.22 |
---|---|
부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
부트스트랩 1장 - 부트스트랩 연동하기 (3) | 2014.10.08 |