JavaScript
用我們在jQuery上建置JavaScript插件將Bootstrap生動起來。了解每個插件、數據和API以及更多的選項。
單個插件或集成包
每個插件都可以被單獨引入（使用對應每個 Bootstrap 插件的 js/dist/*.js 文件），也可以通過 bootstrap.js 或壓縮版的 bootstrap.min.js 文件一次性引入所有插件（選一個即可，不要同時使用）。
如果使用打包程序（Webpack、Rollup 等），你可以使用支持 UMD 格式的 /js/dist/*.js 文件。
將 Bootstrap 作為模塊使用
我們為 Bootstrap 提供了一個 ESM 模塊（bootstrap.esm.js 和 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>
不兼容的插件
由于瀏覽器的限制，某些插件，例如下拉菜單（Dropdown）、工具提示（Tooltip）和彈出框（Popover）插件，不能通過設置為 module 類型的 <script> 標簽使用，由于它們都依賴 Popper。有關此問題的更多信息，請見 這里。
依賴項
某些插件和 CSS 組件依賴于其它插件。如果你選擇單獨引入某個插件，請確保在文檔中檢查其是否存在依賴其它插件的情況。
下拉菜單（dropdown）、彈出框（popover）和工具提示（tooltip）組件依賴 Popper。
仍然需要用到jQuery 嗎？有可能！
Bootstrap 5 被設計為不依賴 jQuery，但你仍可以將 Bootstrap 的組件與 jQuery 一起使用。如果 Bootstrap 在 window 對象上檢測到了 jQuery，它將把所有的 Bootstrap 插件添加到 jQuery 的插件系統中。也就意味著你將來能夠通過 $('[data-bs-toggle="tooltip"]').tooltip()來調用工具提示組件（tooltip）。同理，其它組件也類似。
data 屬性
幾乎所有的 Bootstrap 插件都可以通過帶有 data 屬性的 HTML 元素單獨開啟和配置（我們推薦 JavaScript API 為首選方式）。請確保 僅在單個 HTML 元素上使用一組 data 屬性 （例如，你不能通過同一按鈕觸發工具提示和模態框。）
選擇器
Currently to query DOM elements we use the native methods querySelector and
querySelectorAll for performance reasons, so you have to use valid selectors.
If you use special selectors, for example: collapse:Example be sure to escape them.
目前，由于性能的原因，我們使用原生方法 querySelector 和 querySelectorAll 來查詢 DOM 元素，因此你必須使用 合法的選擇器。 如果使用特殊的選擇器，例如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() // 停止即將展示的模態框（modal）
}
})
jQuery 事件
如果 jQuery 存在于 window 對象上，并且jQuery 元素上沒有設置 data-bs-no-jquery 屬性，Bootstrap 將認為 jQuery 存在。如果檢測到了 jQuery，Bootstrap 將基于 jQuery 的事件系統觸發相應的事件。因此，如果你想監聽 Bootstrap 的事件，就必須使用 jQuery 的方法（例如 .on, .one）而不能使用 addEventListener。
$('#myTab a').on('shown.bs.tab', function () {
// do something...
})
編程式 API
所有構造函數都可以接受對象類型的參數或沒有參數（將以默認行為初始化插件）:
var myModalEl = document.getElementById('myModal')
var modal = new bootstrap.Modal(myModalEl) // 以默認值初始化
var modal = new bootstrap.Modal(myModalEl, { keyboard: false }) // 以對象參數初始化
如果你想獲取某個插件的特定實例，可以調用每個插件都暴露出來的 getInstance 方法。為了直接從元素中獲取插件的實例對象，請執行以下操作：bootstrap.Popover.getInstance(myPopoverEl)。
構造函數中的CSS選擇器
您還可以使用CSS選擇器作為第一個參數，而不是DOM元素來初始化插件。目前，該插件的元素是通過querySelector方法找到的，因為我們的插件只支持單個元素。
var modal = new bootstrap.Modal('#myModal')
var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
異步編程和轉換
所有編程形式的 API 方法都是 異步的，并在 transition 開始之后、結束之前返回到調用者。 。
為了在 transition 完成后執行某個動作，你可以監聽相應的事件。
var myCollapseEl = document.getElementById('#myCollapse')
myCollapseEl.addEventListener('shown.bs.collapse', function (event) {
// 可折疊區域被展開時，此處的動作將被執行一次
})
另外，對正在 transitioning 狀態的組件調用的任何方法都將被忽略。
var myCarouselEl = document.getElementById('myCarousel')
var carousel = bootstrap.Carousel.getInstance(myCarouselEl) // 獲取輪播（Carousel）組件的實例
myCarouselEl.addEventListener('slid.bs.carousel', function (event) {
carousel.to('2') // 當滑動到幻燈片 1 之后，將立即滑動到幻燈片 2
})
carousel.to('1') // 開始滑動到幻燈片 1 并返回到回調者
carousel.to('2') // !! 將會被忽略，因為滑動到幻燈片 1 的轉換動作還未完成 !!
默認設置
你可以通過修改插件的 Constructor.Default 對象來更改插件的默認設置：
// 將模態框（modal）插件的 `keyboard` 的默認值修改為 false
bootstrap.Modal.Default.keyboard = false
避免沖突（僅對你使用 jQuery）
有些時候需要將 Bootstrap 插件與其它 UI 框架一起使用。在這種情況下，難免發生命名空間的沖突。如果發生這種情況，你可以在需要還原的插件上調用 ..noConflict 函數。
var bootstrapButton = $.fn.button.noConflict() // 重置 $.fn.button 為先前的值
$.fn.bootstrapBtn = bootstrapButton // 為 $().bootstrapBtn 賦予 Bootstrap 的功能
版本號
每個 Bootstrap 插件都可以通過其構造函數上的 VERSION 屬性進行訪問。例如，以工具提示（tooltip）插件為例：
bootstrap.Tooltip.VERSION // => "5.0.0-beta3"
JavaScript被禁用無反饋
當禁用JavaScript時，Bootstrap的插件不會有特別回饋。若你擔心此等情況中的使用者體驗，使用<noscript>以向你的用戶解釋此情形（以及如何重啟JavaScript的方式）和/或添加你自己定義的回饋。
第三方工具庫
Bootstrap 不對第三方工具庫提供支持，例如 Prototype 或 jQuery UI。盡管存在 .noConflict 和基于命名空間的事件，但仍可能需要您自行解決兼容性問題。
清理工具
工具提示（tooltip）和彈出框（popover）可以接受 HTML 代碼作為參數，但會使用 Bootstrap 內置的清理程序對 HTML 代碼進行清理。
The default allowList value is the following:
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
// 添加 table 元素
myDefaultAllowList.table = []
// 添加 td 元素以及 td 元素的 data-bs-option 屬性
myDefaultAllowList.td = ['data-bs-option']
// 你可以添加自定義的正則表達式來對屬性進行校驗。
// 請提防過于寬松的正則表達式
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultAllowList['*'].push(myCustomRegex)
如果你因為喜歡使用專用的工具庫（例如 DOMPurify）并想繞過 Bootstrap 的清理程序，則可以這樣操作：
var yourTooltipEl = document.getElementById('yourTooltip')
var tooltip = new bootstrap.Tooltip(yourTooltipEl, {
sanitizeFn: function (content) {
return DOMPurify.sanitize(content)
}
})