부트스트랩 플러그인 개요


이전 레이아웃 구성요소 장에서 설명한 구성요소는 시작에 불과합니다. Bootstrap에는 기능을 확장하고 사이트에 더 많은 상호 작용을 추가하는 12개의 jQuery 플러그인이 함께 제공됩니다. 고급 JavaScript 개발자가 아니더라도 Bootstrap의 JavaScript 플러그인 학습을 시작할 수 있습니다. Bootstrap Data API를 사용하면 코드를 작성하지 않고도 대부분의 플러그인을 실행할 수 있습니다.

사이트에서 Bootstrap 플러그인을 참조하는 방법에는 두 가지가 있습니다.

  • 별도 참조: Bootstrap의 개별 *.js 파일을 사용하세요. 일부 플러그인과 CSS 구성요소는 다른 플러그인에 종속됩니다. 플러그인을 개별적으로 참조하는 경우 먼저 해당 플러그인 간의 종속성을 이해해야 합니다.

    컴파일(및 동시에) 참조 : bootstrap.js 또는 bootstrap.min.js의 축소된 버전을 사용하세요.

    두 파일을 동시에 참조하려고 하지 마세요. bootstrap.js 및 bootstrap.min.js에 모든 플러그인이 포함되어 있기 때문입니다.
모든 플러그인은 jQuery에 의존합니다. 따라서 jQuery는 플러그인 파일 앞에 인용되어야 합니다. 현재 Bootstrap에서 지원하는 jQuery 버전을 보려면 bower.json을 방문하세요.

data attribute

  • JavaScript 코드 한 줄도 작성하지 않고도 데이터 속성 API를 통해서만 모든 Bootstrap 플러그인을 사용할 수 있습니다. 이는 Bootstrap의 최고 수준 API이며 첫 번째 선택이 되어야 합니다.

  • 그리고 또 이 기능을 꺼야 하는 상황이 발생할 수 있습니다. 따라서 데이터 속성 API를 끄는 방법, 즉 data-api 네임스페이스를 사용하여 문서에 바인딩된 이벤트의 차단을 해제하는 방법도 제공합니다. 다음과 같습니다:                    

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

  • 특정 플러그인을 꺼야 하는 경우 먼저 플러그인을 추가하기만 하면 됩니다. data-api 네임스페이스 이름은 아래와 같이 네임스페이스로 사용할 수 있습니다.

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

Programmatic API

순수한 JavaScript를 제공합니다. API. 모든 공개 API는 개별 또는 체인 호출 메서드를 지원하고 해당 메서드가 작동하는 요소 컬렉션을 반환합니다(참고: 호출 형식은 jQuery와 일치합니다). 예:

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

모든 메소드는 아래와 같이 선택적 옵션 객체를 매개변수 또는 특정 메소드를 나타내는 문자열로 받아들이거나 매개변수 없이 받아들일 수 있습니다(이 경우 플러그인은 기본 동작으로 초기화됩니다).

// 초기화됨 기본 동작으로
$("#myModal").modal()
// 키보드를 지원하지 않도록 초기화됨
$("#myModal").modal({keyboard: false })
// 초기화되고 즉시 호출 표시
$("#myModal").modal('show')

모든 플러그인은 Constructor 속성인 $.fn.popover.Constructor에 원래 생성자를 노출합니다. 특정 플러그인의 인스턴스를 얻으려면 페이지 요소를 통해 직접 얻을 수 있습니다:

$('[rel=popover]').data('popover').

네임스페이스 충돌 방지

때때로 부트스트랩 플러그인을 다른 UI 프레임워크와 함께 사용해야 할 수도 있습니다. 이 경우 네임스페이스 충돌이 발생할 수 있습니다. 불행하게도 이런 일이 발생하면 플러그인의 .noConstrict 메소드를 호출하여 원래 값을 복원할 수 있습니다.

// $.fn.button에 할당된 값 반환
var bootstrapButton = $.fn.button.noContribute()
// $().bootstrapBtn에 부트스트랩 기능 제공
$.fn.bootstrapBtn = ton

Events

Bootstrap은 대부분의 플러그인의 고유한 동작에 대한 맞춤 이벤트를 제공합니다. 일반적으로 이러한 이벤트는 두 가지 형태로 나타납니다:

  • 동사 부정사: 이벤트가 시작될 때 트리거됩니다. 예를 들어 ex: show. 부정사 이벤트는 preventDefault 기능을 제공합니다. 이를 통해 이벤트가 시작되기 전에 작업 실행을 중지할 수 있습니다.

$('#myModal').on('show.bs.modal', function (e) {
// 모달 상자 표시 방지
if (!data) return e.preventDefault()
})

  • 과거분사형: 동작이 실행된 후에 실행됩니다. 예를 들어 ex: 표시됨.