이전 섹션 레이아웃 구성 요소에서 논의 된 구성 요소는 시작일뿐입니다. Bootstrap에는 12 개의 JQuery 플러그인이 제공되어 기능을 확장하고 사이트에 더 많은 상호 작용을 추가 할 수 있습니다. 높은 수준의 JavaScript 개발자가 아니더라도 Bootstrap 용 JavaScript 플러그인에 대한 학습을 시작할 수 있습니다. 부트 스트랩 데이터 API (Bootstrap Data API)를 사용하면 코드를 작성하지 않고도 대부분의 플러그인을 트리거 할 수 있습니다.
사이트의 부트 스트랩 플러그인을 참조하는 두 가지 방법이 있습니다 .
개별 참조 : bootstrap을 사용하는 개별 *.js 파일. 일부 플러그인 및 CSS 구성 요소는 다른 플러그인에 의존합니다. 플러그인을 별도로 참조하면 먼저이 플러그인간에 종속성을 요청하십시오.
컴파일 (동시) 참조 : bootstrap.js 또는 압축 버전의 bootstrap.min.js를 사용하십시오.
"bootstrap.js 및 bootstrap.min.js 모두 모든 플러그인이 포함되어 있기 때문에 두 파일을 동시에 참조하려고 시도하지 마십시오."
모든 플러그인은 jQuery에 따라 다릅니다. 따라서 플러그인 파일 전에 jQuery를 참조해야합니다. Bower.json을 방문하여 현재 지원되는 JQuery 버전의 Bootstrap을보십시오.
1. 데이터 속성
JavaScript 코드의 단일 줄을 쓰지 않고 데이터 속성 API를 통해 모든 부트 스트랩 플러그인을 사용할 수 있습니다. 이것은 부트 스트랩의 일류 API이며 선호하는 방법이어야합니다.
그런 다음이 기능을 다시 한 번 끄는 것이 필요할 수 있습니다. 따라서 데이터 속성 API를 닫는 방법, 즉 Data-API를 네임 스페이스로 취하고 문서에 바인딩하는 실행 취소 이벤트도 제공합니다. 이렇게 :
$ (Document) .Off ( '. Data-API')
특정 플러그인을 닫으려면 아래 그림과 같이 플러그인의 이름을 데이터 -API 네임 스페이스 앞에 네임 스페이스로 추가하십시오.
$ (document) .off ( '. alert.data-api')
2. 프로그래밍 API
모든 부트 스트랩 플러그인에 대한 순수한 자바 스크립트 기반 API를 제공합니다. 모든 공개 API는 개인 또는 체인 된 호출 방법을 지원하고 그들이 작동하는 요소 세트를 반환합니다 (참고 : jQuery의 호출 양식과 일치). 예를 들어:
$ ( ". btn.danger"). 버튼 ( "토글"). AddClass ( "fat")
모든 메소드는 옵션 옵션 객체를 매개 변수로, 또는 특정 메소드를 나타내는 문자열로 또는 매개 변수가 없으면 (이 경우 플러그인은 기본 동작으로 초기화) : 다음과 같습니다.
// 기본값으로 초기화 $ ( "#myModal"). modal () // 키보드를 지원하지 않기 위해 초기화 $ ( "#myModal"). modal ({keyboard : false}) // 초기화 및 호출 $ ( "#myModal"). modal ( 'show').각 플러그인은 또한 생성자 속성에 원래 생성자를 노출시킵니다 : $ .fn.popover.constructor. 특정 플러그인의 인스턴스를 얻으려면 페이지 요소를 통해 직접 가져올 수 있습니다.
$ ( '[rel = popover]'). data ( 'popover').
3. 네임 스페이스 충돌을 피하십시오
때로는 부트 스트랩 플러그인을 다른 UI 프레임 워크와 함께 사용해야 할 수도 있습니다. 이 경우 네임 스페이스 충돌이 발생할 수 있습니다. 불행히도이 경우 플러그인의 .Noconflict 메소드를 호출하여 원래 값을 복원 할 수 있습니다.
// $ .fn.button var bootstrapbutton = $ .fn.button.noconflict () // bootstrap 함수 할당 $ (). bootstrapbtn $ .fn.bootstrapbtn = bootstrapbutton에 할당 된 값을 반환합니다.
4. 이벤트
Bootstrap은 대부분의 플러그인의 고유 한 동작을위한 맞춤형 이벤트를 제공합니다. 일반적 으로이 사건은 두 가지 형태로 제공됩니다.
동사 부정사 : 이벤트가 시작될 때 트리거됩니다. 예를 들어 예 : show. 동사 부정사 이벤트는 예방 기능을 제공합니다. 이를 통해 이벤트가 시작되기 전에 작업을 중지 할 수 있습니다.
$ ( '#myModal'). on ( 'show.bs.modal', function (e) {// 모달 상자의 표시를 방지하는 경우 (! data) retud E.preventDefault ()}).과거 분사 형식 : 이것은 작업이 실행 된 후에 트리거됩니다. 예를 들어 예 : show.
위는 부트 스트랩 플러그인의 간단한 개요입니다. 모든 사람이 부트 스트랩 플러그인을 이해하는 것이 도움이되기를 바랍니다.