이 기사는 먼저 버튼 그룹을 사용하는 방법과 공유합니다. 특정 내용은 다음과 같습니다
1. 버튼 그룹
1. 단일 버튼 그룹
.btn-group을 사용하여 .BTN을 사용하여 다중 <버튼>을 캡슐화하십시오
<div> <button> 1 </button> <button> 2 </button> <button> 3 </button> </div>
2. 다중 버튼 그룹
다중 <div>를 <div>에 넣으십시오.
<div> <div> ... </div> <div> ... </div> </div> </div>
3. 수직 버튼 그룹
.BTN-Group-verctical을 .BTN-Group에 추가하십시오.
<div> ... </div>
2. 풀다운 버튼 (버튼 드롭 다운)
예
<div> <a data-toggle = "dropdown"href = "#"> action <span> </span> </a> <ul> <!-드롭 다운 메뉴 링크-> </ul> </div>
1. 크기를 제어하십시오
또한 .btn-large, .btn-small 및 .btn-mini를 사용하여 크기를 제어하십시오.
2. 분할 풀다운 버튼
<div> <button> 액션 </button> <버튼 데이터-토글 = "드롭 다운"> <span> </span> </button> <ul> <!-드롭 다운 메뉴 링크-> </ul> </div>
3. 위쪽으로 나타나는 메뉴
<div> <button> 드롭업 </button> <버튼 데이터-토글 = "드롭 다운"> <span> </span> </button> <ul> <!-드롭 다운 메뉴 링크-> </ul> </div>
3. JavaScript
예
로드 상태. Data-Loading-Text = "로드 ..."를 추가하십시오.
다음과 같이 코드를 복사하십시오. <button type = "button"data-loading-text = "로드 ...">로드 스테이트 </button>
스위치 상태. Data-Toggle = "버튼"을 추가하십시오.
다음과 같이 코드를 복사하십시오. <button type = "button"data-toggle = "button"> 단일 토글 </button>
확인란. BTN-Group 후 Data-Toggle = "Buttons-Checkbox"를 추가하십시오.
<div datoggle = "buttons-Checkbox"> <버튼 유형 = "버튼"> 왼쪽 </button> <버튼 유형 = "버튼"> 중간 </button> <버튼 유형 = "버튼"> 오른쪽 </button> </div>
단일 선택. BTN-Group 후 Data-Toggle = "Buttons-Radio"를 추가하십시오.
<div datoggle = "buttons-radio"> <button type = "button"> 왼쪽 </button> <button type = "button"> middle </button> <버튼 유형 = "button"> 오른쪽 </button> </div>
용법
JavaScript 코드는 스위치 상태를 트리거합니다.
$ (). 버튼 ( "토글")
데이터 토글 속성을 추가하여 자동으로 트리거 할 수도 있습니다.
<버튼 유형 = "버튼"data-toggle = "button">… </button>
JavaScript 코드를 사용하여로드 상태를 트리거하고 버튼에는 데이터로드 텍스트 속성으로 지정된 값이 표시됩니다.
$ (). 버튼 ( "로드")
<버튼 유형 = "버튼"Data-loading-text = "로드하는 것 ..."> ... </button>
참고 : 페이지가로드되면 Firefox가 버튼을 무효로 유지합니다. 해결 방법은 버튼에 autocomplete = "Off"를 적용하는 것입니다.
JavaScript 코드를 사용하여 버튼 상태를 재설정하십시오.
$ (). 버튼 ( "재설정")
버튼 상태를 재설정하고 버튼 텍스트를 지정된 텍스트로 바꿉니다. 다음 예제의 전체는 예제 일 뿐이며 교체 할 수 있습니다.
<버튼 Data-Complete-text = "완료!" > ... </button> <cript> $ ( '. btn'). 버튼 ( '완료') </script>
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람의 학습에 도움이되기를 바랍니다.