버튼 스타일
Bootstrap 버튼의 일곱 스타일을 제공합니다 :
위의 버튼 스타일을 달성하기 위해, Bootstrap 다음과 같은 클래스가 있습니다 :
-
.btn-default -
.btn-primary -
.btn-success -
.btn-info -
.btn-warning -
.btn-danger -
.btn-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> , <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" 메시지를, 우리는 넣어 # 링크로. 현실에서 그것은 물론 '검색'페이지에 실제 URL되어 있어야합니다.
버튼 크기
부트 스트랩은 네 개의 버튼 크기를 제공합니다 :
서로 다른 크기를 정의하는 클래스는 다음과 같습니다
-
.btn-lg -
.btn-md -
.btn-sm -
.btn-xs
다음의 예는 다른 버튼 크기에 대한 코드를 보여줍니다 :
예
<button
type="button" class="btn btn-primary btn-lg">Large</button>
<button
type="button" class="btn btn-primary btn-md">Medium</button>
<button
type="button" class="btn btn-primary btn-sm">Small</button>
<button
type="button" class="btn btn-primary btn-xs">XSmall</button>
»그것을 자신을 시도 블록 레벨 버튼
블록 레벨 버튼 부모 요소의 전체 폭에 걸쳐있다.
클래스 추가 .btn-block 블록 레벨 버튼을 만들 수를 :
활성 / 비활성화 버튼
A 버튼은 활성 (표시를 누르면) 또는 비활성화 (unclickable) 상태로 설정할 수 있습니다 :
클래스 .active 표시를 누르면 버튼을 만들고, 클래스 .disabled 버튼이 unclickable합니다 :
예
<button
type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled
Primary</button> »그것을 자신을 시도 연습으로 자신을 테스트!
전체 부트 스트랩 버튼 참조
모든 버튼 클래스의 완전한 참고로, 우리의 완전한 이동 부트 스트랩 버튼 참조 .