Bootstrap 플러그인 소개 및 사용

Bootstrap 플러그인 개요
이전 레이아웃 구성 요소 장에서 설명한 구성 요소는 시작에 불과합니다. Bootstrap과 함께 제공되는 12개의 jQuery 플러그인에는 확장된 기능이 있으며 사이트에 더 많은 상호 작용을 추가할 수 있습니다. 고급 js 개발자가 아니더라도
Bootstrap의 js 플러그인을 배울 수 있습니다. Bootstrap Data API를 사용하면 코드를 작성하지 않고도 대부분의 플러그인을 실행할 수 있습니다.
사이트에서 부트스트랩 플러그인을 참조하는 방법에는 두 가지가 있습니다.
개별 참조: Bootstrap의 개별 *.js 파일을 사용합니다. 일부 플러그인과 CSS 구성요소는 다른 플러그인에 종속됩니다. 플러그인을 개별적으로 참조하는 경우 먼저 해당 플러그인 간의 종속성을 파악해야 합니다.
컴파일(동시) 참조: Bootstrap.js 또는 bootstrap.min.js의 압축 버전을 사용하세요
bootstrap.js와 bootstrap.min.js 모두 모든 플러그인을 포함하고 있으므로 두 파일을 동시에 참조하려고 하지 마세요.
모든 플러그인은 jQuery에 의존합니다. 따라서 플러그인 파일 앞에 jQuery를 인용해야 합니다. 현재 Boostrap에서 지원하는 jQuery 버전을 보려면 bower.json을 방문하세요.
데이터 속성
한 줄의 자바스크립트 코드도 작성하지 않고도 데이터 속성 API를 통해서만 모든 부트스트랩 플러그인을 사용할 수 있습니다. 이는 부트스트랩의 첫 번째 클래스 API이며 선호하는 방법이어야 합니다.
그러다가 다시 기능을 꺼야 하는 상황이 발생할 수 있습니다. 따라서 데이터 속성 API를 끄는 방법, 즉 data-api 네임스페이스를 사용하여 문서에 바인딩된 이벤트를 차단 해제하는 방법도 제공합니다. 다음과 같습니다:
$(document).off('.data-api')
특정 플러그인을 꺼야 하는 경우 플러그인 이름 앞에 네임스페이스로 플러그인 이름을 추가하기만 하면 됩니다. data-api 네임스페이스는 아래와 같습니다:
$(document).off('.alert.data-api')
Programmatic API
모든 Bootstrap 플러그인에 순수 자바스크립트 API를 제공합니다. 모든 공개 API는 개별 또는 체인 호출 방법을 지원하고 모든 작업에 대한 요소 컬렉션을 반환합니다(참고: 호출 형식은 jQuery와 일치합니다).
$('.btn.danger').button('toggle').addClass('fat')

Import

【일회성 가져오기】

　Bootstrap은 Bootstrap 모든 JavaScript 플러그가 포함된 단일 파일을 제공합니다. -ins, 즉 bootstrap.js (압축 버전: bootstrap.min.js)

【개별 가져오기】

　특수 효과 파일을 쉽게 별도로 가져올 수 있도록 Bootstrap에서는 12가지 유형의 JavaScript 플러그인을 제공합니다.

xml 애니메이션 전환: 해당 플러그인 파일 "transition.js"

　 ✽ 모달 팝업 창(Modal): 해당 플러그인 파일 "modal.js"

　xml 드롭다운 메뉴(Dropdown): 해당 플러그 -in 파일 "dropdown.js"

　xml 스크롤 감지(Scrollspy): 해당 플러그인 파일 “scrollspy.js”

　xml 탭(Tab): 해당 플러그인 파일 “tab.js”

　EMA 툴팁 : 해당 Plug-in 파일 "tooltop.js"

　xml 팝업 상자 (Popover) : 해당 플러그인 파일 "popover.js"

　tax Alert box (Alert) : 해당 플러그인 파일 "alert.js"

　tax Buttons : 해당 플러그인 파일 "button.js"

　되더라도 접기/아코디언(Collapse) : 해당 플러그인 파일 "collapse.js"

　xml Image carousel Carousel : 해당 플러그인- "carousel.js" 파일에

　xml 자동 위치 지정 부표 Affix: 해당 플러그인 파일 "affix.js"

data attribute

　한 줄도 쓰지 않고 데이터 속성 API를 통해서만 모든 Bootstrap 플러그인을 사용할 수 있습니다. 자바스크립트 코드. 이는 Bootstrap의 최고 수준 API이며 선호되는 접근 방식입니다.

　그리고 어떤 경우에는 이 기능을 꺼야 할 수도 있습니다. 따라서 데이터 속성 API를 끄는 방법, 즉 data-api를 네임스페이스로 사용하여 문서에 바인딩된 이벤트를 차단 해제하는 방법도 제공됩니다. 다음과 같습니다. data-api 为命名空间并绑定在文档上的事件。就像下面这样：

$(document).off('.data-api')

　　另外，如果是针对某个特定的插件，只需在 data-api

$(document).off('.alert.data-api')

$('.btn.danger').button('toggle').addClass('fat')

$('#myModal').modal()                      // 以默认值初始化$('#myModal').modal({ keyboard: false })   // initialized with no keyboard$('#myModal').modal('show')                // 初始化后立即调用 show 方法

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 将模态框插件的 `keyboard` 默认选参数置为 false

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

$('#myModal').on('show.bs.modal', function (e) {  if (!data) return e.preventDefault() // 阻止模态框的展示})

$.support.transition = false

위 내용은 Bootstrap 플러그인 소개 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!