Bootstrap Buttons

Bootstrap은 다양한 스타일의 버튼을 제공합니다.

출처: W3Schools.com - Bootstrap Buttons

상기 스타일의 버튼을 얻기 위해, Bootstrap에는 다음과 같은 클래스가 있습니다.

• .btn
• .btn-default
• .btn-primary
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

하기 예제에서 다양한 버튼 스타일에 대한 코드를 확인하겠습니다.

button 클래스는 <a>, <button> 또는 <input> 요소에서 사용할 수 있습니다:

링크의 href 속성에 #을 입력하는 이유는 무엇입니까?
링크할 페이지가 없고 “404” 메시지를 받고 싶지 않기 때문에, 예제에서 #을 링크로 넣었습니다.
특정 페이지에 대한 실제 URL를 href 속성에 입력해야 합니다.

Bootstrap은 4가지 버튼 크기를 제공합니다:
다른 크기를 정의하는 클래스는 다음과 같습니다:

• .btn-lg
• .btn-sm
• .btn-xs

하기 예제는 다양한 버튼 크기에 대한 코드를 보여줍니다.

블록 레벨 버튼은 부모 요소의 전체 너비에 걸쳐 있습니다.

.btn-block 클래스를 추가하여 블록 레벨 버튼을 만듭니다.

버튼은 활성(누른 것처럼 보임) 또는 비활성화(클릭 할 수 없음) 상태로 설정할 수 있습니다.

.active 클래스는 버튼이 눌린 것처럼 보이게 하고 .disabled 클래스는 버튼을 클릭 할 수 없게 만듭니다.