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 속성 이용.
주의: disabled 클래스 이용 X
<a> 태그
disabled 속성 지원 안 하므로, 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>
...
<button type="button" class="btn 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>
예제보기
