使用我们可选的 JavaScript 插件，让 Bootstrap 焕发活力。了解每个插件、我们的数据和程序化 API 选项等等。
插件可以单独包含（使用 Bootstrap 的单独插件js/dist/*.js），也可以一次性全部包含（使用Bootstrap 的bootstrap.js压缩插件bootstrap.min.js，但不要同时包含两者）。
如果你使用打包工具（Webpack、Parcel、Vite……），你可以使用/js/dist/*.jsUMD 格式的文件。
虽然 Bootstrap CSS 可以与任何框架一起使用，但Bootstrap JavaScript 与 React、Vue 和 Angular 等 JavaScript 框架并不完全兼容，因为这些框架假定它们完全了解 DOM。Bootstrap 和这些框架都可能尝试修改同一个 DOM 元素，从而导致诸如下拉菜单卡在“打开”位置之类的错误。
对于使用此类框架的用户来说，更好的选择是使用框架专用的包，而不是Bootstrap JavaScript。以下是一些最常用的选项：
亲自体验一下吧！从twbs/examples 仓库下载使用 Bootstrap 作为 ES 模块的源代码和示例。您也可以在 StackBlitz 中打开该示例。
我们提供了一个构建为ESM（bootstrap.esm.js和）的 Bootstrap 版本，如果您的目标浏览器支持bootstrap.esm.min.js，则允许您将 Bootstrap 作为浏览器模块使用。
<script type="module">
import { Toast } from 'bootstrap.esm.min.js'
Array.from(document.querySelectorAll('.toast'))
.forEach(toastNode => new Toast(toastNode))
</script>
与 JS 打包工具相比，在浏览器中使用 ESM 需要使用完整路径和文件名，而不是模块名称。阅读更多关于浏览器中 JS 模块的信息。这就是为什么我们使用<module>'bootstrap.esm.min.js'而不是'bootstrap'上面提到的 <module> 的原因。然而，由于我们依赖 Popper，情况变得更加复杂，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 "../".
为了解决这个问题，你可以使用 importmapesmodules 将任意模块名称解析为完整路径。如果你的目标浏览器不支持 importmapesmodules，则需要使用 es-module-shims项目。以下是它在 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/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" 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/core@2.11.6/dist/umd/popper.min.js",
"bootstrap": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/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。
几乎所有 Bootstrap 插件都可以通过 HTML 中的数据属性启用和配置（这是我们首选的 JavaScript 功能使用方式）。请确保每个元素只使用一组数据属性（例如，不能从同一个按钮触发工具提示和模态框）。
由于选项可以通过数据属性或 JavaScript 传递，因此您可以将选项名称附加到 <Option>data-bs-标签中，例如 <Option> 。请确保在通过数据属性传递选项时，将选项名称的大小写类型从“驼峰式”（camelCasedata-bs-animation="{value}" ）更改为“三脚架式” （kebab-case）。例如，使用 <Option>而不是 <Option> 。data-bs-custom-class="beautifier"data-bs-customClass="beautifier"
从 Bootstrap 5.2.0 开始，所有组件都支持一个实验性的保留数据属性data-bs-config，该属性可以以 JSON 字符串的形式存储简单的组件配置。当一个元素同时拥有 <value>data-bs-config='{"delay":0, "title":123}'和data-bs-title="456"<value> 属性时，最终title值将为 <value> 456，并且单独的 <value> 数据属性的值将覆盖 <value> 中指定的值data-bs-config。此外，现有的数据属性也可以存储类似 <value> 的 JSON 值data-bs-delay='{"show":0,"hide":150}'。
出于性能考虑，我们使用原生querySelector方法querySelectorAll查询 DOM 元素，因此您必须使用有效的选择器。如果您使用特殊选择器（例如 <select>）collapse:Example，请务必对其进行转义。
Bootstrap 为大多数插件的独特操作提供了自定义事件。通常，这些事件以不定式和过去分词形式出现——不定式（例如 start show）在事件开始时触发，而其过去分词形式（例如 command 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
}
})
所有构造函数都接受一个可选的选项对象，或者不接受任何值（这将使用插件的默认行为对其进行初始化）：
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如果未对请求的元素启动实例，则此方法将返回。
或者，getOrCreateInstance也可以用它来获取与 DOM 元素关联的实例，或者在未初始化的情况下创建一个新实例。
bootstrap.Popover.getOrCreateInstance(myPopoverEl, configObject)
如果实例尚未初始化，则可以接受并使用可选的配置对象作为第二个参数。
除了 getInstanceandgetOrCreateInstance方法之外，所有插件构造函数都可以接受一个 DOM 元素或一个有效的CSS 选择器作为第一个参数。querySelector由于我们的插件仅支持单个元素，因此插件元素是通过 getElementById 方法查找的。
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虽然紧接着使用该方法看似正确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
每个 Bootstrap 插件都会公开以下方法和静态属性。
| 方法 | 描述 |
|---|---|
| dispose | 销毁元素的模态框。（移除 DOM 元素上存储的数据） |
| getInstance | 静态方法，允许您获取与 DOM 元素关联的模态实例。 |
| getOrCreateInstance | 静态方法，允许您获取与 DOM 元素关联的模态实例，或者在模态实例未初始化时创建一个新的模态实例。 |
| 静态属性 | 描述 |
|---|---|
| NAME | 返回插件名称。（例如bootstrap.Tooltip.NAME：） |
| VERSION | VERSION可以通过插件构造函数的属性访问 Bootstrap 各个插件的版本（例如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)
}
})
Bootstrap 5 中不需要 jQuery，但仍然可以将我们的组件与 jQuery 结合使用。如果 BootstrapjQuery在window对象中检测到 jQuery，它会将我们所有的组件添加到 jQuery 的插件系统中。这样，您就可以执行以下操作：
// to enable tooltips with the default configuration
$('[data-bs-toggle="tooltip"]').tooltip()
// to initialize tooltips with given configuration
$('[data-bs-toggle="tooltip"]').tooltip({
boundary: 'clippingParents',
customClass: 'myClass'
})
// to trigger the `show` method
$('#myTooltip').tooltip('show')
我们的其他组件也是如此。
有时需要将 Bootstrap 插件与其他 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如果对象中存在 jQuerywindow且未data-bs-no-jquery设置任何属性， Bootstrap 将检测到 jQuery <body>。如果检测到 jQuery，Bootstrap 将借助 jQuery 的事件系统发出事件。因此，如果您想监听 Bootstrap 的事件，则必须使用 jQuery 的方法（onEventListener .on、 .oneonEventListener）而不是 onEventListener addEventListener。
$('#myTab a').on('shown.bs.tab', () => {
// do something...
})
Bootstrap 的插件在 JavaScript 被禁用时没有特殊的备用方案。如果您重视用户体验，请使用代码<noscript>向用户解释情况（以及如何重新启用 JavaScript），或者添加您自己的自定义备用方案。