버튼은 부트스트랩 버튼 장에서 소개되었습니다. 버튼 플러그인을 사용하면 버튼 상태 제어와 같은 일부 상호 작용을 추가하거나 다른 구성 요소(예: 도구 모음)에 대한 버튼 그룹을 생성할 수 있습니다.
이 플러그인의 기능을 별도로 참조하려면 버튼.js를 참조해야 합니다. 또는 Bootstrap 플러그인 개요 장에서 언급한 대로 bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 참조할 수 있습니다.
1. 로딩상태
버튼에 로드 상태를 추가하려면 아래 예와 같이 버튼 요소에 data-loading-text="Loading..."을 속성으로 추가하면 됩니다.
<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 加载状态 </button> <script> $(function() { $(".btn").click(function(){ $(this).button('loading').delay(1000).queue(function() { // $(this).button('reset'); }); }); }); </script>
2. 단일 전환
단일 버튼의 토글을 활성화하려면(즉, 버튼의 일반 상태를 누른 상태로 또는 그 반대로 변경), 다음과 같이 버튼 요소에 해당 속성으로 data-toggle="button"을 추가하면 됩니다. 아래 예 :
3. 라디오 버튼
마찬가지로, btn-group에 데이터 속성 data-toggle="buttons"를 추가하여 라디오 버튼 그룹을 만들고 라디오 버튼 그룹에 대한 토글을 추가할 수 있습니다.
<div class="btn-group" data-toggle="buttons"> <label for="" class="btn btn-primary active"> <input type="radio" name="sex" autocomplete="off" checked>男 </label> <label for="" class="btn btn-primary"> <input type="radio" name="sex" autocomplete="off">女 </label> </div>
4. 확인 버튼
btn-group에 데이터 속성 data-toggle="buttons"를 추가하여 체크박스 그룹을 만들고 체크박스 그룹에 대한 토글을 추가할 수 있습니다.
<div class="btn-group" data-toggle="buttons"> <label for="" class="btn btn-primary active"> <input type="checkbox" name="fa" autocomplete="off" checked> 音乐 </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off"> 体育 </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off"> 美术 </label> <label for="" class="btn btn-primary"> <input type="checkbox" name="fa" autocomplete="off"> 电脑 </label> </div>
Button 플러그인의 버튼 메소드에는 토글, 재설정, 문자열(예: 로드, 완료)의 세 가지 매개변수가 있습니다.
//可代替 data-toggle="button" $('button').on('click', function() { $(this).button('toggle'); })
Button 플러그인의 유용한 방법은 다음과 같습니다.
위 내용은 모두의 학습에 도움이 되기를 바랍니다.