부트스트랩 버튼
버튼 스타일
부트스트랩은 다양한 스타일의 버튼을 제공합니다.
위의 버튼 스타일을 달성하기 위해 Bootstrap에는 다음 클래스가 있습니다.
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
다음 예제에서는 다양한 버튼 스타일에 대한 코드를 보여줍니다.
예시
<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>
버튼 클래스는 <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-sm.btn-xs
다음 예제에서는 다양한 버튼 크기에 대한 코드를 보여줍니다.
예시
<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>
블록 레벨 버튼
블록 수준 버튼은 상위 요소의 전체 너비에 걸쳐 있습니다.
클래스 .btn-block를 추가하여 블록 수준 버튼 생성:
예시
<button type="button" class="btn btn-primary btn-block">Button 1</button>
활성/비활성화 버튼
버튼은 활성(눌린 상태로 표시) 또는 비활성화(클릭 불가) 상태로 설정할 수 있습니다.
클래스 .active는 버튼을 누른 상태로 만들고 클래스
.disabled
는 버튼을 클릭할 수 없도록 만듭니다.
예시
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
전체 부트스트랩 버튼 참조
모든 버튼 클래스에 대한 전체 참조를 보려면 전체 부트스트랩 버튼 참조 로 이동하십시오 .