주요 콘텐츠로 건너뛰기 문서 탐색으로 건너뛰기
in English

자바스크립트

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

개별 또는 편집

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

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

부트스트랩을 모듈로 사용

대상 브라우저가 지원하는 경우 부트스트랩을 브라우저에서 모듈로 사용할 수 있도록 ESM( bootstrap.esm.js및 ) 로 빌드된 부트스트랩 버전을 제공 합니다 .bootstrap.esm.min.js

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'

  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

호환되지 않는 플러그인

브라우저 제한으로 인해 Dropdown, Tooltip 및 Popover 플러그인과 같은 일부 플러그인 은 Popper에 의존하기 때문에 유형 이 있는 <script>태그 에서 사용할 수 없습니다. module문제에 대한 자세한 내용은 여기를 참조하십시오 .

종속성

일부 플러그인 및 CSS 구성 요소는 다른 플러그인에 종속됩니다. 플러그인을 개별적으로 포함하는 경우 문서에서 이러한 종속성을 확인해야 합니다.

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

여전히 jQuery를 사용하고 싶으십니까? 있을 수있다!

Bootstrap 5는 jQuery 없이 사용하도록 설계되었지만 여전히 jQuery와 함께 구성 요소를 사용할 수 있습니다. Bootstrap 이 객체 jQuery에서window 감지하면 jQuery의 플러그인 시스템에 모든 구성 요소를 추가합니다. 이것은 $('[data-bs-toggle="tooltip"]').tooltip()툴팁을 활성화하기 위해 할 수 있음을 의미합니다. 다른 구성 요소도 마찬가지입니다.

데이터 속성

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

선택기

현재 DOM 요소를 쿼리 하기 위해 성능상의 이유로 네이티브 메서드 querySelector를 사용하므로 유효한 선택기 를 사용해야 합니다 . 예를 들어 특수 선택기를 사용하는 경우 이 선택자를 이스케이프해야 합니다.querySelectorAllcollapse:Example

이벤트

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

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

var myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', function (event) {
  if (!data) {
    return event.preventDefault() // stops modal from being shown
  }
})

jQuery 이벤트

부트스트랩은 객체 에 jQuery jQuery가 있고 에 설정된 속성 이 없는 경우 jQuery를 감지 합니다 . jQuery가 발견되면 Bootstrap은 jQuery의 이벤트 시스템 덕분에 이벤트를 내보냅니다. 따라서 부트스트랩의 이벤트를 수신하려면 . 대신 jQuery 메서드( , ) 를 사용해야 합니다 .windowdata-bs-no-jquery<body>.on.oneaddEventListener

$('#myTab a').on('shown.bs.tab', function () {
  // do something...
})

프로그래밍 방식 API

모든 생성자는 선택적 옵션 객체를 허용하거나 아무것도 허용하지 않습니다(기본 동작으로 플러그인을 시작함):

var myModalEl = document.getElementById('myModal')

var modal = new bootstrap.Modal(myModalEl) // initialized with defaults
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // initialized with no keyboard

특정 플러그인 인스턴스를 얻으려면 각 플러그인이 메소드를 노출합니다 getInstance. 요소에서 직접 검색하려면 다음을 수행하십시오 bootstrap.Popover.getInstance(myPopoverEl).

생성자의 CSS 선택기

DOM 요소 대신 CSS 선택기를 첫 번째 인수로 사용하여 플러그인을 초기화할 수도 있습니다. 현재 플러그인의 요소는 플러그인이 querySelector단일 요소만 지원하기 때문에 메소드에 의해 발견됩니다.

var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

비동기 함수 및 전환

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

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

var myCollapseEl = document.getElementById('myCollapse')

myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
  // Action to execute once the collapsible area is expanded
})

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

var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
  carousel.to('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

carousel.to('1') // Will start sliding to the slide 1 and returns to the caller
carousel.to('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
bootstrap.Modal.Default.keyboard = false

충돌 없음(jQuery를 사용하는 경우에만)

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

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

버전 번호

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

bootstrap.Tooltip.VERSION // => "5.0.2"

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

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

타사 라이브러리

Bootstrap은 Prototype 또는 jQuery UI와 같은 타사 JavaScript 라이브러리를 공식적으로 지원하지 않습니다 . 네임스페이스 이벤트 에도 불구 .noConflict하고 직접 수정해야 하는 호환성 문제가 있을 수 있습니다.

살균제

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

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

var ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
var DefaultAllowlist = {
  // 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: []
}

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

var myDefaultAllowList = bootstrap.Tooltip.Default.allowList

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

// To allow td elements and data-bs-option attributes on td elements
myDefaultAllowList.td = ['data-bs-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-]+/
myDefaultAllowList['*'].push(myCustomRegex)

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

var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn: function (content) {
    return DOMPurify.sanitize(content)
  }
})