부트스트랩은 쉬고, 간단하게 웹 개발을 위해서 제작된 워크프레임입니다.
최신 웹트랜드인 반응형웹을 제작하기 적합하고, 다양한 기능들을 쉽게 사용할 수 있다는 장점있습니다.
그럼 지금부터 bootstrap을 사용해 보도록하겠습니다.
1.bootstrap 연결하기
(부트스트랩 공식홈페이지 주소:http://bootstrapk.com)
부트스트랩 공식홈페이지 접속하면 부트스트랩을 다운받을 수 있습니다. 부트스트랩은 jQueryUI와 마찬가지로 jQuery를 기반으로 작동됩니다.
그러므로 jQuery를 연결 한 다음 Bootstrap을 사용하셔야합니다.
부트스트랩을 사용하기 이전 기본적틀을 만들어줍니다.
<!DOCTYPE html>
<html lang=”ko”><head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!–bootstrap은 반응형에 적합한 워크프레임입니다. viewport를 지정해 반응형웹으로 지정해주세요.–><link href=”css/bootstrap.min.css” rel=”stylesheet”> <!–bootstapcss 파일을 연결해준다–>
<script src=”js/jquery.js”></script> <!–jQuery 파일을 연결해준다–>
<script src=”js/bootstrap.min.js”></script> <!–bootstrap 파일을 연결해준다–>
</head>
head 부분에 css와 js파일을 연결해주셔야 bootstrap을사용할 준비가 되어있는것입니다.
2.bootstrap buttons 사용하기
부트스트랩의 장점은 간단한 클레스명으로 다양한 효과를 줄 수있다는 점입니다.
다양한 색의 버튼을 만들려면 class명을 다르게 해주면 가능합니다.
기본 btn class에 추가적인 class명을 입력해서 다양한 색상의 버튼으로 활용 가능합니다.
버튼색상 지정하기
HTML 소스
<button class=”btn”>기본</button>
<button class=”btn btn-primary”>중요</button>
<button class=”btn btn-info”>안내</button>
<button class=”btn btn-success”>성공 블록형식버튼</button>
<button class=”btn btn-warning”>경고</button>
<button class=”btn btn-danger”>위험</button>
<button class=”btn btn-inverse”>반전</button>
<button class=”btn btn-link”>링크</button>
결과화면
결과화면처럼 다양한 컬러의 버튼들이 생성이됩니다.
버튼크기 지정하기
HTML 소스
<button class=”btn btn-large”>기본</button>
<button class=”btn”>기본</button>
<button class=”btn btn-small”>기본</button>
<button class=”btn btn-mini”>기본</button>
결과화면
버튼의 크기를 이처럼 원하시는 사이즈를 정하셔서 사용하시면 됩니다.
버튼그룹 지정하기
HTML 소스
<div class=”btn-group”>
<button class=”btn”>왼쪽</button>
<button class=”btn”>중앙</button>
<button class=”btn”>오른쪽</button>
</div>
결과화면
btn-group클레스를 지정한 div 안에 버튼들을 넣어주면 버튼이 그룹핑된 모양으로 나타나게 됩니다.
버튼그룹을 넣을 수 있는 버튼 툴바 사용하기
HTML 소스
<div class=”btn-toolbar”>
<div class=”btn-group”>
<button class=”btn”>왼쪽</button>
<button class=”btn”>중앙</button>
<button class=”btn”>오른쪽</button>
</div>
<div class=”btn-group”>
<button class=”btn”>왼쪽</button>
<button class=”btn”>중앙</button>
<button class=”btn”>오른쪽</button>
</div>
<div class=”btn-group”>
<button class=”btn”>왼쪽</button>
<button class=”btn”>중앙</button>
<button class=”btn”>오른쪽</button>
</div>
</div>
결과화면
이처럼 btn-toolbar를 사용하면 btn-group들을 다시 한줄에 같이 표시해주는 효과를 얻을 수 있습니다.
버튼 수직으로 연결하기
HTML 소스
<div class=”btn-group btn-group-vertical”>
<a class=”btn” href=”#”><i class=”icon-align-left”></i></a>
<a class=”btn” href=”#”><i class=”icon-align-center”></i></a>
<a class=”btn” href=”#”><i class=”icon-align-right”></i></a>
<a class=”btn” href=”#”><i class=”icon-align-justify”></i></a>
</div>
결과화면
이처럼 btn-toolbar에 btn-group-vertical을 추가하시면 아래로 떨어지는 효과의 버튼그룹을 만드실 수 있습니다.