Button 클래스
.btn (기본 버튼) - 회색 버튼
.btn-default (기본/표준 버튼) - 흰색 버튼
.btn-primary (주요/핵심 버튼) - 파란색 버튼
.btn-success (성공/긍정 버튼) - 녹색 버튼
.btn-info (정보/환기 버튼) - 하늘색 (=아쿠아 색) 버튼
.btn-warning (주의/경고 버튼) - 황갈색 버튼
.btn-danger (위험/부정 버튼) - 빨간색 버튼
.btn-link (링크 버튼) - 일반 링크 모양
.btn-lg (큰 버튼)
.btn-sm (작은 버튼)
.btn-xs (아주 작은 버튼)
.btn-block (블럭 버튼) - 한 줄 전체 너비 차지 버튼
.active (버튼 눌림 효과) - 현재 선택된 상태 표시
.disabled (버튼 비활성화) - 작동 않는 버튼
.navbar-btn (수직정렬) - Navbar 안 수직정렬. .navbar-btn { margin-top: 8px; margin-bottom: 8px; }
1.
Button 배경색
<button type="button" class="btn ">Basic (회색배경)</button>
<button type="button" class="btn btn-default ">Default (흰색배경)</button>
<button type="button" class="btn btn-primary ">Primary (파란배경)</button>
<button type="button" class="btn btn-success ">Success (녹색배경)</button>
<button type="button" class="btn btn-info ">Info (하늘배경)</button>
<button type="button" class="btn btn-warning ">Warning (주황배경)</button>
<button type="button" class="btn btn-danger ">Danger (빨간배경)</button>
<button type="button" class="btn btn-link ">Link (테두리없는 흰배경의 파란글씨)</button>
결과보기
Button 가능요소 : <a> , <button> , <input>
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
결과보기
※ href 속성에 # 넣는 이유: 링크할 페이지가 없고 "404" 에러메시지 안 뜨게 하기 위함.
Button 외곽선 버튼
없음. (※ BS4에 추가)
Button 높이 (= 버튼세로크기)
<button type="button" class="btn btn-primary btn-lg ">Large (큰 버튼)</button>
<button type="button" class="btn btn-primary">Normal (보통 버튼)</button>
<button type="button" class="btn btn-primary btn-sm ">Small (작은 버튼)</button>
<button type="button" class="btn btn-primary btn-xs ">XSmall (아주 작은 버튼)</button>
결과보기
Button 너비 (= 버튼가로크기 = 한줄버튼 = 블록버튼 = 가로전체너비버튼)
<button type="button" class="btn btn-primary btn-block ">Full-Width Button</button>
(예) 버튼높이 + 버튼너비
<h2>Block 기본 버튼</h2>
<button type="button" class="btn btn-primary btn-block ">기본버튼</button>
<h2>Block 큰 버튼</h2>
<button type="button" class="btn btn-primary btn-lg btn-block ">큰버튼</button>
<h2>Block 작은 버튼</h2>
<button type="button" class="btn btn-primary btn-sm btn-block ">작은버튼 1</button>
결과보기
Button 활성화 /비활성화
<button type="button" class="btn btn-primary active ">Active Primary</button>
<button type="button" class="btn btn-primary" disabled >Disabled Primary</button>
<a href="#" class="btn btn-primary disabled ">Disabled Link</a>
[활성화 = 버튼눌림효과]
active 클래스 활용.
[비활성화 = 버튼클릭방지]
<button> 태그disabled 속성 이용.
주의: disabled 클래스 이용 X
<a> 태그disabled 클래스 이용.
주의: disabled 속성 이용 X
Button 회전버튼 (= 로딩버튼 = 스피너버튼)
BS4부터 지원.
Button Navbar 안 수직정렬
.navbar-btn 클래스 이용.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header "><a class="navbar-brand" href="#">홈짱닷컴</a></div>
<ul class="nav navbar-nav ">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
<button class="btn btn-danger navbar-btn ">회원가입</button>
</div>
</nav>
JS Button
Button 플러그인
아래 파일 중 하나 필요.
개별: button.js
통합: bootstrap.js (또는, bootstrap.min.js)
Button 수동활성화 - JS 이용
$('.btn').button();
Button Option (옵션 )
none
Button Method (메서드 )
.button( "toggle")
버튼을 누른 것처럼 보이게 함.
.button( "loading")
버튼을 비활성화하고 버튼 텍스트를 "loading ..."으로 변경.
.button( "reset")
버튼 텍스트를 원래 텍스트로 변경. (만약, 변경된 경우)
.button( "string")
새 버튼 텍스트를 지정.
Button 예제 - round 효과 제거
<style>
.btn-default {border-radius: 0;}
</style>
...btn-default ">클릭</button>
예제보기
Button 예제 - Color 추가
<style>
.btn-default {background: #000; color: #fff;}
.btn-default:hover {background: #fff; color: #000;}
</style>
...
<button type="button" class="btn btn-default ">클릭</button>
Button 예제 - Shadow 추가
<style>
.btn-default { box-shadow: 1px 2px 5px #000000; }
</style>
...
<button type="button" class="btn btn-default ">클릭</button>
