JS 버튼 (button.js)
당신이 당신의 버튼보다 효율적으로 제어 할하려면이 플러그인을 사용합니다.
버튼에 대한 자습서를 들어, 우리의 읽기 Bootstrap 버튼 자습서 .
버튼 플러그인 클래스
아래의 클래스는 어떤 스타일을 사용할 수 있습니다 <a>, <button> 또는 <input> 요소를 :
| 수업 | 기술 | 예 |
|---|---|---|
| .btn | 모든 버튼에 기본 스타일을 추가합니다 | 시도 해봐 |
| .btn-default | 기본 / 표준 버튼을 나타냅니다 | 시도 해봐 |
| .btn-primary | 여분의 시각적 무게를 제공하며 버튼 세트에 기본 작업을 식별 | 시도 해봐 |
| .btn-success | 성공 또는 긍정적 인 조치를 나타냅니다 | 시도 해봐 |
| .btn-info | 정보 알림 메시지의 문맥 버튼 | 시도 해봐 |
| .btn-warning | 주의이 작업에주의해야한다 나타냅니다 | 시도 해봐 |
| .btn-danger | 위험 또는 잠재적으로 부정적인 행동을 나타냅니다 | 시도 해봐 |
| .btn-link | 버튼은 링크처럼 보이게 (정지 버튼 동작이됩니다) | 시도 해봐 |
| .btn-lg | 큰 버튼을 만든다 | 시도 해봐 |
| .btn-sm | 작은 버튼을 만든다 | 시도 해봐 |
| .btn-xs | 여분의 작은 버튼을 만든다 | 시도 해봐 |
| .btn-block | 만드는 블록 레벨 버튼 (부모 요소의 전체 폭에 걸쳐) | 시도 해봐 |
| .active | 버튼을 누르면 보이게 | 시도 해봐 |
| .disabled | 비활성화 버튼을 만듭니다 | 시도 해봐 |
자바 스크립트를 통해
수동으로 사용 :
$('.btn').button();
버튼 옵션
| None |
버튼 방법
다음 표는 사용 가능한 모든 버튼 방법을 보여줍니다.
참고 :이 플러그인의 경우, 방법은 데이터 속성을 통해 전달 될 수있다; 데이터 전환 또는 데이터로드에서와 같이, 데이터 -에 메소드 이름을 추가합니다.
| 방법 | 기술 | 시도 해봐 |
|---|---|---|
| .button("toggle") | 누른 버튼 모양을 만든다 | 시도 해봐 |
| .button("loading") | 버튼을 비활성화하고에있는 버튼 텍스트 변경 "로드 ..." | 시도 해봐 |
| .button("reset") | (변경 한 경우) 원본 텍스트 버튼 텍스트를 변경합니다 | 시도 해봐 |
| .button("string") | 새로운 버튼의 텍스트를 지정합니다 | 시도 해봐 |
예
CSS를 사용하여 버튼을 사용자 지정하는 방법
반올림 테두리를 제거하는 방법 :
특정 색상을 추가하는 방법 :
예
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
} »그것을 자신을 시도 그림자를 추가하는 방법 :