자바스크립트

jQuery에 구축된 선택적 JavaScript 플러그인을 사용하여 Bootstrap에 생명을 불어넣으세요. 각 플러그인, 데이터 및 프로그래밍 방식 API 옵션 등에 대해 알아보세요.

개별 또는 편집

플러그인은 개별적으로 포함(Bootstrap의 개별 사용) 하거나 또는 축소 js/dist/*.js를 사용하여 한 번에 모두 포함할 수 있습니다 (둘 모두 포함하지 않음).bootstrap.jsbootstrap.min.js

번들러(Webpack, Rollup…)를 사용 /js/dist/*.js하는 경우 UMD가 지원되는 파일을 사용할 수 있습니다.

종속성

일부 플러그인 및 CSS 구성 요소는 다른 플러그인에 종속됩니다. 플러그인을 개별적으로 포함하는 경우 문서에서 이러한 종속성을 확인해야 합니다. 또한 모든 플러그인은 jQuery에 의존합니다 (즉 , 플러그인 파일 보다 먼저 jQuery가 포함되어야 함 ). 지원되는 jQuery 버전을 확인하려면 당사에 문의하십시오 .package.json

드롭다운, 팝오버 및 툴팁도 Popper.js 에 의존합니다 .

데이터 속성

거의 모든 부트스트랩 플러그인은 데이터 속성이 있는 HTML을 통해서만 활성화 및 구성할 수 있습니다(자바스크립트 기능을 사용하는 데 선호하는 방식). 단일 요소에 대해 하나의 데이터 속성 세트만 사용해야 합니다 ( 예: 동일한 버튼에서 도구 설명과 모달을 실행할 수 없음).

그러나 일부 상황에서는 이 기능을 비활성화하는 것이 바람직할 수 있습니다. 데이터 속성 API를 비활성화하려면 다음과 data-api같이 네임스페이스가 지정된 문서의 모든 이벤트를 바인딩 해제합니다.

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

또는 특정 플러그인을 대상으로 하려면 플러그인의 이름을 다음과 같이 data-api 네임스페이스와 함께 네임스페이스로 포함하기만 하면 됩니다.

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

이벤트

부트스트랩은 대부분의 플러그인의 고유한 작업에 대한 사용자 정의 이벤트를 제공합니다. 일반적으로 이들은 부정사와 과거 분사 형태로 제공됩니다. 여기서 부정사(예: show)는 이벤트가 시작될 때 실행되고 과거 분사 형태(예: shown)는 작업이 완료될 때 실행됩니다.

모든 부정사 이벤트는 preventDefault()기능을 제공합니다. 이것은 작업이 시작되기 전에 실행을 중지하는 기능을 제공합니다. 이벤트 핸들러에서 false를 반환하면 자동으로 가 호출 preventDefault()됩니다.

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) {
    return e.preventDefault() // stops modal from being shown
  }
})

프로그래밍 방식 API

또한 JavaScript API를 통해서만 모든 부트스트랩 플러그인을 사용할 수 있어야 한다고 생각합니다. 모든 공개 API는 연결 가능한 단일 메서드이며 작업을 수행한 컬렉션을 반환합니다.

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

모든 메소드는 선택적 옵션 객체, 특정 메소드를 대상으로 하는 문자열 또는 아무것도 허용하지 않아야 합니다(기본 동작으로 플러그인을 시작함):

$('#myModal').modal() // initialized with defaults
$('#myModal').modal({ keyboard: false }) // initialized with no keyboard
$('#myModal').modal('show') // initializes and invokes show immediately

각 플러그인은 또한 속성에 원시 생성자를 노출합니다 Constructor: $.fn.popover.Constructor. 특정 플러그인 인스턴스를 얻으려면 요소에서 직접 검색하십시오: $('[rel="popover"]').data('popover').

비동기 함수 및 전환

모든 프로그래밍 방식 API 메서드는 비동기식 이며 전환이 시작되었지만 종료되기 전에 호출자에게 반환됩니다 .

전환이 완료된 후 작업을 실행하기 위해 해당 이벤트를 수신할 수 있습니다.

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

또한 전환 구성 요소에 대한 메서드 호출은 무시 됩니다.

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

기본 설정

Constructor.Default플러그인의 개체 를 수정하여 플러그인의 기본 설정을 변경할 수 있습니다 .

// changes default for the modal plugin's `keyboard` option to false
$.fn.modal.Constructor.Default.keyboard = false

충돌 없음

다른 UI 프레임워크와 함께 부트스트랩 플러그인을 사용해야 하는 경우가 있습니다. 이러한 상황에서 네임스페이스 충돌이 가끔 발생할 수 있습니다. .noConflict이 경우 값을 되돌리려는 플러그인을 호출할 수 있습니다 .

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

버전 번호

각 부트스트랩의 jQuery 플러그인 버전은 VERSION플러그인 생성자의 속성을 통해 액세스할 수 있습니다. 예를 들어 도구 설명 플러그인의 경우:

$.fn.tooltip.Constructor.VERSION // => "4.4.1"

JavaScript가 비활성화된 경우 특별한 대체 없음

Bootstrap의 플러그인은 JavaScript가 비활성화되어 있을 때 특별히 정상적으로 대체되지 않습니다. 이 경우 사용자 경험에 관심이 있는 경우 를 사용하여 사용자 <noscript>에게 상황(및 JavaScript를 다시 활성화하는 방법)을 설명하고 고유한 사용자 정의 대체를 추가하십시오.

유틸리티

모든 Bootstrap의 JavaScript 파일은 의존 util.js하며 다른 JavaScript 파일과 함께 포함되어야 합니다. 컴파일된(또는 축소된) 을 사용하는 경우 bootstrap.js이를 포함할 필요가 없습니다. 이미 있습니다.

util.jstransitionEndCSS 전환 에뮬레이터뿐만 아니라 이벤트에 대��� 유틸리티 기능과 기본 도우미가 포함되어 있습니다. CSS 전환 지원을 확인하고 정지 전환을 포착하기 위해 다른 플러그인에서 사용됩니다.

살균제

도구 설명 및 팝오버는 내장된 새니타이저를 사용하여 HTML을 허용하는 옵션을 삭제합니다.

기본값 whiteList은 다음과 같습니다.

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultWhitelist = {
  // Global attributes allowed on any supplied element below.
  '*': ['class', 'dir', 'id', 'lang', 'role', ARIA_ATTRIBUTE_PATTERN],
  a: ['target', 'href', 'title', 'rel'],
  area: [],
  b: [],
  br: [],
  col: [],
  code: [],
  div: [],
  em: [],
  hr: [],
  h1: [],
  h2: [],
  h3: [],
  h4: [],
  h5: [],
  h6: [],
  i: [],
  img: ['src', 'alt', 'title', 'width', 'height'],
  li: [],
  ol: [],
  p: [],
  pre: [],
  s: [],
  small: [],
  span: [],
  sub: [],
  sup: [],
  strong: [],
  u: [],
  ul: []
}

이 기본값에 새 값을 추가 whiteList하려면 다음을 수행할 수 있습니다.

var myDefaultWhiteList = $.fn.tooltip.Constructor.Default.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

전용 라이브러리(예: DOMPurify )를 사용하는 것을 선호하기 때문에 새니타이저를 우회하려면 다음을 수행해야 합니다.

$('#yourTooltip').tooltip({
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})