JavaScript

通过可选的JavaScript插件使Bootstrap栩栩如生。了解学习每个插件，我们的数据和编程API选项，等等。

在本页面

单独的或编译的

使用插件时可以单独包含(使用 Bootstrap的单独插件 js/dist/*.js), 也使用完整版 bootstrap.js 或压缩版 bootstrap.min.js （不要同时包括两者）。

如果使用bundler (Webpack, Rollup…), 那么您可以使用 /js/dist/*.js，这些文件是UMD就绪的。

使用Bootstrap作为模块

我们提供了一个构建为 ESM (bootstrap.esm.js 和 bootstrap.esm.min.js)的Bootstrap版本，如果您的目标浏览器支持Bootstrap，则您可以将Bootstrap用作浏览器中的模块。

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

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

不兼容的插件

由于浏览器的限制，我们的某些插件（即Dropdown，Tooltip和Popover插件）不能用于 <script> 带有 module类型的标记中，因为它们依赖于Popper。有关此问题的更多信息，请参见此处。

依赖

一些插件和CSS组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖性。

我们的下拉菜单，弹出窗口和工具提示也取决于Popper。

仍要使用jQuery吗？

Bootstrap 5设计为不使用jQuery，但仍可以将我们的组件与jQuery一起使用。如果Bootstrap 在 window 对象中检测到 jQuery，它将在jQuery的插件系统中添加我们所有的组件；这意味着您可以执行 $('[data-bs-toggle="tooltip"]').tooltip() 来使用工具提示。我们的其他组件也是这样。

数据属性

几乎所有的Bootstrap插件都可以单独通过HTML和数据属性（我们使用JavaScript功能的首选方式）来启用和配置。确保 仅在单个元素上使用一组数据属性 （例如，不能从同一个按钮触发工具提示和模式。）

选择器

当前为了查询DOM元素，出于性能原因，我们使用本机方法 querySelector 和 querySelectorAll，因此必须使用有效的选择器。如果使用特殊选择器，例如collapse:Example ，请确保将其转义。

事件

Bootstrap为大多数插件的独特操作提供自定义事件。通常，它们以不定式和过去分词形式出现。例如在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 存在于 window 对象，并且在<body>内没有 data-bs-no-jquery 对象属性集，那么Bootstrap 将会检测jQuery。如果检测到 jQuery， Bootstrap将会由于 jQuery的事件系统而发出事件。因此如果你想监听 Bootstrap的事件，则必须使用jQuery 的方法 (.on, .one) 而不是 addEventListener.

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

程序化 API

所有构造函数都接受可选的options对象或不接受任何内容（以默认行为启动插件）：

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).

异步函数和转换

所有编程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时）

有时有必要将Bootstrap插件与其他UI框架一起使用。在这些情况下，名称空间冲突有时会发生。如果发生这种情况，您可以调用.noConflict 要还原其值的插件。

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

版本号

每个Bootstrap插件的版本都可以通过VERSION插件构造函数的属性进行访问。例如，对于工具提示插件：

bootstrap.Tooltip.VERSION // => "5.0.0-beta1"

禁用JavaScript时没有特殊的回退

禁用JavaScript时，Bootstrap的插件不会特别优雅地回退。如果您在这种情况下关心用户体验，请使用<noscript>来向用户解释这种情况（以及如何重新启用JavaScript），和/或添加您自己的自定义后备回退。

第三方库

Bootstrap不正式支持Prototype或jQuery UI等第三方JavaScript库。尽管.noConflict有事件和命名空间事件，但可能仍需要自己解决兼容性问题。

Sanitizer

工具提示和弹出窗口使用我们内置的清理工具来清理接受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）而想绕过我们的消Sanitizer，则应执行以下操作：

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