자바스크립트

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 (event) {
  if (!data) {
    return event.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 (event) {
  // Action to execute once the collapsible area is expanded
})

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

$('#myCarousel').on('slid.bs.carousel', function (event) {
  $('#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.6.2"

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

부트스트랩의 플러그인은 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', 'srcset', '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)
  }
})