부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편)

안녕하세요 개발로짜입니다 ^^

이번 부트스트랩 강좌 주제는 버튼 컴포넌트 생성 하는 내용을 다루어 보고자 합니다 

부트스트랩의 컴포넌트들은 단순히 태그에 미리 정해져있는 클래스들만 추가 하면 

깔끔한 화면으로 출력이 되는것이 참 마음에 듭니다.

이번 시간에는 버튼 컴포넌트들을 다루어 보도록 해보겠습니다.

버튼을 만들기 위해서는 기본적으로 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 개발로짜