자바스크립트

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

이 페이지에서

개별 또는 편집

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

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

JavaScript 프레임워크와 함께 사용

부트스트랩 CSS는 모든 프레임워크와 함께 사용할 수 있지만 부트스트랩 JavaScript는 DOM에 대한 완전한 지식을 가정하는 React, Vue 및 Angular와 같은 JavaScript 프레임워크와 완전히 호환되지 않습니다 . 부트스트랩과 프레임워크는 모두 동일한 DOM 요소를 변경하려고 시도하여 "열린" 위치에 갇힌 드롭다운과 같은 버그가 발생할 수 있습니다.

이러한 유형의 프레임워크를 사용하는 사람들을 위한 더 나은 대안은 부트스트랩 JavaScript 대신 프레임워크별 패키지를 사용하는 것입니다. 다음은 가장 인기 있는 옵션 중 일부입니다.

반응: 반응 부트스트랩
Vue: BootstrapVue (현재 Vue 2 및 Bootstrap 4만 지원)
각도: ng-부트스트랩

부트스트랩을 모듈로 사용

직접 해보십시오! twbs/examples 저장소 에서 부트스트랩을 ES 모듈로 사용하기 위한 소스 코드와 작업 데모를 다운로드하십시오 . StackBlitz 에서 예제를 열 수도 있습니다 .

대상 브라우저가 지원하는 경우 부트스트랩을 브라우저에서 모듈로 사용할 수 있도록 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>

JS 번들러와 비교하여 브라우저에서 ESM을 사용하려면 모듈 이름 대신 전체 경로와 파일 이름을 사용해야 합니다. 브라우저의 JS 모듈에 대해 자세히 읽어보세요. 그래서 우리 'bootstrap.esm.min.js'는 위의 대신 사용합니다 'bootstrap'. 그러나 이것은 Popper 종속성으로 인해 더욱 복잡해집니다. Popper는 다음과 같이 JavaScript로 가져옵니다.

import * as Popper from "@popperjs/core"

이것을 있는 그대로 시도하면 콘솔에 다음과 같은 오류가 표시됩니다.

Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../".

이 문제를 해결하려면 를 사용 importmap하여 임의의 모듈 이름을 확인하여 경로를 완료할 수 있습니다. 대상 브라우저 가 지원하지 않는 경우 es-module-shims 프로젝트 importmap를 사용해야 합니다 . Bootstrap 및 Popper에서 작동하는 방법은 다음과 같습니다.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <title>Hello, modularity!</title>
  </head>
  <body>
    <h1>Hello, modularity!</h1>
    <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button>

    <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script>
    <script type="importmap">
    {
      "imports": {
        "@popperjs/core": "https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
        "bootstrap": "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.esm.min.js"
      }
    }
    </script>
    <script type="module">
      import * as bootstrap from 'bootstrap'

      new bootstrap.Popover(document.getElementById('popoverButton'))
    </script>
  </body>
</html>

종속성

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

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

데이터 속성

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

옵션은 데이터 속성이나 JavaScript를 통해 전달할 수 있으므로 에서 data-bs-와 같이 옵션 이름을 에 추가할 수 있습니다 data-bs-animation="{value}". 데이터 속성을 통해 옵션을 전달할 때 옵션 이름의 대소문자 유형을 " camelCase "에서 " kebab-case "로 변경해야 합니다. 예를 들어, data-bs-custom-class="beautifier"대신 를 사용 data-bs-customClass="beautifier"하십시오.

Bootstrap 5.2.0부터 모든 구성 요소 는 JSON 문자열로 간단한 구성 요소 구성을 수용할 수 있는 실험적 으로 예약된 데이터 속성 을 지원합니다. data-bs-config요소에 data-bs-config='{"delay":0, "title":123}'및 data-bs-title="456"속성이 있는 경우 최종 title값은 456이고 별도의 데이터 속성은 에 제공된 값을 재정의합니다 data-bs-config. 또한 기존 데이터 속성은 와 같은 JSON 값을 저장할 수 data-bs-delay='{"show":0,"hide":150}'있습니다.

선택기

성능상의 이유로 DOM 요소를 쿼리 하는 데 네이티브 querySelector및 메서드를 사용하므로 유효한 선택기querySelectorAll 를 사용해야 합니다 . 와 같은 특수 선택자를 사용하는 경우 이 선택자를 이스케이프하십시오.collapse:Example

이벤트

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

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

const myModal = document.querySelector('#myModal')

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

프로그래밍 방식 API

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

const myModalEl = document.querySelector('#myModal')

const modal = new bootstrap.Modal(myModalEl) // initialized with defaults

const configObject = { keyboard: false }
const modal1 = new bootstrap.Modal(myModalEl, configObject) // initialized with no keyboard

특정 플러그인 인스턴스를 얻으려면 각 플러그인이 메소드를 노출합니다 getInstance. 예를 들어 요소에서 직접 인스턴스를 검색하려면 다음을 수행합니다.

bootstrap.Popover.getInstance(myPopoverEl)

null요청된 요소에 대해 인스턴스가 시작되지 않은 경우 이 메서드가 반환 됩니다.

또는 getOrCreateInstanceDOM 요소와 연결된 인스턴스를 가져오거나 초기화되지 않은 경우 새 인스턴스를 만드는 데 사용할 수 있습니다.

bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)

인스턴스가 초기화되지 않은 경우 선택적 구성 개체를 두 번째 인수로 수락하고 사용할 수 있습니다.

생성자의 CSS 선택기

getInstance및 메서드 외에도 getOrCreateInstance모든 플러그인 생성자는 DOM 요소 또는 유효한 CSS 선택기 를 첫 번째 인수로 받아들일 수 있습니다. querySelector플러그인 은 단일 요소만 지원하기 때문에 플러그인 요소는 메소드와 함께 발견됩니다 .

const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
const offcanvas = bootstrap.Offcanvas.getInstance('#myOffcanvas')
const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')

비동기 함수 및 전환

모든 프로그래밍 방식 API 메서드는 비동기식 이며 전환이 시작되지만 종료되기 전에 호출자에게 반환 됩니다 . 전환이 완료된 후 작업을 실행하기 위해 해당 이벤트를 수신할 수 있습니다.

const myCollapseEl = document.querySelector('#myCollapse')

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

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

const myCarouselEl = document.querySelector('#myCarousel')
const carousel = bootstrap.Carousel.getInstance(myCarouselEl) // Retrieve a Carousel instance

myCarouselEl.addEventListener('slid.bs.carousel', 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 !!

`dispose`방법

dispose직후에 메서드 를 사용하는 것이 올바른 것처럼 보일 수 있지만 hide()잘못된 결과를 초래할 수 있습니다. 다음은 문제 사용의 예입니다.

const myModal = document.querySelector('#myModal')
myModal.hide() // it is asynchronous

myModal.addEventListener('shown.bs.hidden', event => {
  myModal.dispose()
})

기본 설정

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

// changes default for the modal plugin's `keyboard` option to false
bootstrap.Modal.Default.keyboard = false

메서드 및 속성

모든 부트스트랩 플러그인은 다음 메서드와 정적 속성을 노출합니다.

방법	설명
`dispose`	요소의 모달을 파괴합니다. (DOM 요소에 저장된 데이터 제거)
`getInstance`	DOM 요소와 연결된 모달 인스턴스를 가져올 수 있는 정적 메서드입니다.
`getOrCreateInstance`	DOM 요소와 연결된 모달 인스턴스를 가져오거나 초기화되지 않은 경우 새 인스턴스를 만들 수 있는 정적 메서드입니다.

정적 속성	설명
`NAME`	플러그인 이름을 반환합니다. (예: `bootstrap.Tooltip.NAME`)
`VERSION`	각 부트스트랩 플러그인의 버전은 `VERSION`플러그인 생성자의 속성을 통해 액세스할 수 있습니다(예: `bootstrap.Tooltip.VERSION`)

살균제

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

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

const ARIA_ATTRIBUTE_PATTERN = /^aria-[\w-]*$/i
const 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하려면 다음을 수행할 수 있습니다.

const 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
const myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)

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

const yourTooltipEl = document.querySelector('#yourTooltip')
const tooltip = new bootstrap.Tooltip(yourTooltipEl, {
  sanitizeFn(content) {
    return DOMPurify.sanitize(content)
  }
})

선택적으로 jQuery 사용

Bootstrap 5에서는 jQuery가 필요하지 않지만 jQuery 와 함께 구성 요소를 사용할 수 있습니다. Bootstrap이 객체를 감지하면 jQueryjQuery window의 플러그인 시스템에 모든 구성 요소를 추가합니다. 이를 통해 다음을 수행할 수 있습니다.

$('[data-bs-toggle="tooltip"]').tooltip() // to enable tooltips, with default configuration

$('[data-bs-toggle="tooltip"]').tooltip({ boundary: 'clippingParents', customClass: 'myClass' }) // to initialize tooltips with given configuration

$('#myTooltip').tooltip('show') // to trigger `show` method

다른 구성 요소도 마찬가지입니다.

충돌 없음

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

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

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

jQuery 이벤트

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

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

비활성화된 자바스크립트

JavaScript가 비활성화된 경우 부트스트랩의 플러그인에는 특별한 대체가 없습니다. 이 경우 사용자 경험에 관심이 있는 경우 를 사용하여 사용자 <noscript>에게 상황(및 JavaScript를 다시 활성화하는 방법)을 설명하고 고유한 사용자 정의 대체를 추가하십시오.