버튼은 부트 스트랩 버튼 장에 소개됩니다. 버튼 플러그인을 사용하면 버튼 상태 제어 또는 툴바와 같은 다른 구성 요소의 버튼 그룹 생성과 같은 상호 작용을 추가 할 수 있습니다.
플러그인의 기능을 별도로 참조하려면 Button.js를 참조해야합니다. 또는 Bootstrap 플러그인 개요 장에서 언급했듯이 bootstrap.js 또는 compressed 버전의 bootstrap.min.js를 참조하십시오.
1.로드 상태
버튼에로드 상태를 추가하려면 다음 예에서 표시된 것처럼 데이터로드 텍스트 = "로드 ..."버튼 요소에 속성으로 버튼 요소에 추가하십시오.
<button id = "fat-btn"data-loading-text = "로드 ..."type = "button">로드 상태 </button> <cript> $ (function () {$ ( ". btn"). click (function () {$ (this) .Button ( 'loading') }); }); </스크립트>2. 단일 스위치
단일 버튼의 스위치를 활성화하려면 (즉, 버튼의 일반 상태를 프레스 상태로 변경하고 그 반대도 마찬가지) 다음 예에서 볼 수 있듯이 버튼 요소에 데이터 토글 = "버튼"을 추가하십시오.
다음과 같이 코드를 복사하십시오. <버튼 데이터-토글 = "버튼"autocomplete = "off"> 단일 스위치 </button>
참고 : Firefox 페이지가 여러 번로드되면 버튼이 양식을 비활성화하거나 선택할 수 있습니다. 해결책은 다음과 같습니다. autocomplete = "off"를 추가하십시오.
3. 라디오 버튼
마찬가지로 데이터 속성 Data-Toggle = "Buttons"를 BTN-Group에 추가하여 라디오 버튼 그룹을 만들고 라디오 버튼 그룹의 토글을 추가 할 수 있습니다.
<div dato-toggle = "buttons"> <label for = "" "> <입력 유형 ="radio "name ="sex "autocomplete ="off "checked> male </label> <label> <input type ="radio "name ="sex "autocomplete ="off "> female </label> </div.
4. 확인 버튼
데이터 속성 Data-Toggle = "Buttons"를 BTN-Group에 추가하여 확인란 그룹을 생성하고 체크 박스 그룹에 토글을 추가 할 수 있습니다.
<div dato-toggle = "buttons"> <label for = ""> <input type = "checkbox"name = "fa"autocomplete = "autocomplete ="off "checked> music </label> <label> <input type ="checkbox "name ="fa "autocomplete ="off "> sport </label> <input type ="check "fa"fa "fa. art </label> <label for = ""> <input type = "checkbox"name = "fa"autocomplete = "off"> 컴퓨터 </label> </div>
버튼 플러그인의 버튼 메소드에는 토글, 재설정 및 문자열 (예 :로드, 완료)의 세 가지 매개 변수가 있습니다.
// data-toggle = "button"$ ( 'button'). on ( 'click', function () {$ (this) .button ( 'toggle');}을 대체 할 수 있습니다.버튼 플러그인의 유용한 방법은 다음과 같습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. Bootstrap에 대한 자세한 내용은 주제를 참조하십시오 : Bootstrap Learning Tutorial