JavaScript

使用我们基于 jQuery 构建的可选 JavaScript 插件将 Bootstrap 带入生活。了解每个插件、我们的数据和编程 API 选项等。

单独或编译

插件可以单独包含（使用 Bootstrap 的 individual js/dist/*.js），或者使用bootstrap.js或缩小后的所有插件bootstrap.min.js（不要同时包含两者）。

如果您使用捆绑器（Webpack、Rollup…），您可以使用/js/dist/*.js已准备好 UMD 的文件。

依赖项

一些插件和 CSS 组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖项。另请注意，所有插件都依赖于 jQuery（这意味着 jQuery 必须包含在插件文件之前）。请咨询我们package.json以了解支持的 jQuery 版本。

我们的下拉菜单、弹出框和工具提示也依赖于Popper.js。

数据属性

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

但是，在某些情况下，可能需要禁用此功能。要禁用数据属性 API，请取消绑定命名空间的文档上的所有事件，data-api如下所示：

$(document).off('.data-api')

或者，要针对特定​​插件，只需将插件的名称作为命名空间与 data-api 命名空间一起包含，如下所示：

$(document).off('.alert.data-api')

活动

Bootstrap 为大多数插件的独特操作提供自定义事件。通常，这些以不定式和过去分词形式出现 - 其中不定式（例如show）在事件开始时触发，其过去分词形式（例如shown）在动作完成时触发。

所有不定式事件都提供preventDefault()功能。这提供了在动作开始之前停止执行的能力。从事件处理程序返回 false 也会自动调用preventDefault().

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

程序化 API

我们也相信您应该能够纯粹通过 JavaScript API 使用所有 Bootstrap 插件。所有公共 API 都是单一的、可链接的方法，并返回所操作的集合。

$('.btn.danger').button('toggle').addClass('fat')

所有方法都应该接受一个可选的选项对象，一个针对特定方法的字符串，或者什么都没有（它启动一个具有默认行为的插件）：

$('#myModal').modal()                      // initialized with defaults
$('#myModal').modal({ keyboard: false })   // initialized with no keyboard
$('#myModal').modal('show')                // initializes and invokes show immediately

每个插件还在一个Constructor属性上公开其原始构造函数：$.fn.popover.Constructor. 如果您想获取特定的插件实例，请直接从元素中检索它：$('[rel="popover"]').data('popover')。

异步函数和转换

所有编程 API 方法都是异步的，并在转换开始但在结束之前返回给调用者。

为了在转换完成后执行一个动作，您可以监听相应的事件。

$('#myCollapse').on('shown.bs.collapse', function (e) {
  // Action to execute once the collapsible area is expanded
})

此外，对过渡组件的方法调用将被忽略。

$('#myCarousel').on('slid.bs.carousel', function (e) {
  $('#myCarousel').carousel('2') // Will slide to the slide 2 as soon as the transition to slide 1 is finished
})

$('#myCarousel').carousel('1') // Will start sliding to the slide 1 and returns to the caller
$('#myCarousel').carousel('2') // !! Will be ignored, as the transition to the slide 1 is not finished !!

默认设置

您可以通过修改插件的Constructor.Default对象来更改插件的默认设置：

$.fn.modal.Constructor.Default.keyboard = false // changes default for the modal plugin's `keyboard` option to false

没有冲突

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

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

版本号

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

$.fn.tooltip.Constructor.VERSION // => "4.2.1"

禁用 JavaScript 时没有特殊的回退

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

实用程序

所有 Bootstrap 的 JavaScript 文件都依赖于util.js并且必须与其他 JavaScript 文件一起包含。如果您使用的是已编译（或缩小）bootstrap.js的，则无需包含它——它已经存在。

util.js包括实用功能和事件的基本帮助程序transitionEnd以及 CSS 转换模拟器。其他插件使用它来检查 CSS 过渡支持并捕获悬挂过渡。