부트스트랩 JS 버튼

JS 버튼(button.js)

버튼을 더 많이 제어하려면 이 플러그인을 사용하세요.

버튼에 대한 튜토리얼은 부트스트랩 버튼 튜토리얼 을 읽어보세요 .

아래 클래스는 <a>, <button> 또는 <input> 요소의 스타일을 지정하는 데 사용할 수 있습니다.

Class	Description	Example
.btn	Adds basic styling to any button
.btn-default	Indicates a default/standard button
.btn-primary	Provides extra visual weight and identifies the primary action in a set of buttons
.btn-success	Indicates a successful or positive action
.btn-info	Contextual button for informational alert messages
.btn-warning	Indicates caution should be taken with this action
.btn-danger	Indicates a dangerous or potentially negative action
.btn-link	Makes a button look like a link (will still have button behavior)
.btn-lg	Makes a large button
.btn-sm	Makes a small button
.btn-xs	Makes an extra small button
.btn-block	Makes a block-level button (spans the full width of the parent element)
.active	Makes the button appear pressed
.disabled	Makes the button disabled

다음을 사용하여 수동으로 활성화:

$('.btn').button();

None

다음 표에는 사용 가능한 모든 버튼 방법이 나열되어 있습니다.

참고: 이 플러그인의 경우 데이터 속성을 통해 메서드를 전달할 수도 있습니다. data-toggle 또는 data-loading에서와 같이 메서드 이름을 data-에 추가합니다.

Method	Description	Try it
.button("toggle")	Makes the button look pressed
.button("loading")	Disables the button and changes the button text to "loading..."
.button("reset")	Changes the button text to original text (if changed)
.button("string")	Specifies a new button text

둥근 테두리를 제거하는 방법:

.btn-default {
border-radius: 0;
}

특정 색상을 추가하는 방법:

.btn-default {
background: #000;
color: #fff;
}

.btn-default:hover {
background: #fff;
color: #000;
}

그림자를 추가하는 방법:

.btn-default {
box-shadow: 1px 2px 5px #000000;
}