정보실

웹학교

정보실

bootstrap 버튼 활용법

본문

부트스트랩에서 버튼을 사용하는 것은 대부분이 그렇듯이 간단합니다..

 

관련 클래스만 추가하면 되는데 아래와 같은 것이 있습니다...

 

Default Primary Success Info Warning Danger Link 

 

<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> 

 

버튼에서 뿐만이 아니라 <a 태그에서도 위 클래스를 추가하면 버튼으로 작동합니다..

 

버튼의 사이즈 역시 클래스를 추가하면 되는데 아래와 같은 것들이 있습니다..

 

btn-lg

btn-md

btn-sm

btn-xs 

 

그 외에 버튼을 블럭처리할 경우 btn-block

버튼의 활성화(선택상황)는 active

비활성화(선택하지 못하게)는 disabled

 

클래스 추가만으로 얼마든지 버튼처리를 할 수 있는 이것이 부트스트랩의 매력입니다..

 

  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 908회 ]  작성일15-01-09 14:03

웹학교