JavaScript

Bootstrap 使用基于jQuery构建的可选JavaScript插件,用以实现某些功能。

定制或已编译版本

插件可以单独包含 js/dist/*.js), 也可以使用完整的已编译版本 bootstrap.js 或压缩版本 bootstrap.min.js (不要两个同时使用).

如果你使用包管理器 (Webpack, Rollup…), 到这里来查找所需的文件 /js/dist/*.js

依赖关系

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

下拉菜单,气泡提示,弹窗依赖 Popper.js.

Data 属性

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

但是,在某些情况下,可能需要禁用此功能。 要禁用 Data 属性API,请使用data-api取消绑定DOM的所有事件,如下所示:

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

或者,要定位特定的插件,只需将插件的名称作为命名空间以及 data-api 命名空间包含在内:

$(document).off('.alert.data-api')
转义选择器

如果你使用特殊选择器,例如collapse:Example,请务必将它们转义,因为它们将通过jQuery传递。

事件(Events)

Bootstrap 为大多数插件的独特操作提供自定义事件。

所有不定式事件都提供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

版本号

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

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

浏览器禁用 JS 时的用户体验

没有用户体验可言。禁用 JavaScript 时,Bootstrap 的插件不会特别优雅。 如果你关心这种情况下的用户体验,请使用 <noscript> 向用户解释情况(以及如何重新启用JavaScript),或添加自己的自定义后备方案。

第三方库

Bootstrap不正式支持Prototype或jQuery UI等第三方JavaScript库。你可能需要自行修复兼容性问题。

Util.js

所有 Bootstrap 的 JavaScript 文件都依赖于util.js,它必须与其他 JavaScript 文件一起包含在内。 如果你正在使用编译的(或缩小的)bootstrap.js,则不需要包含它 - 它已经存在。

util.js 包含工具函数和 transitionEnd 事件的基本辅助程序以及CSS转换模拟器。 其他插件使用它来检查CSS调用支持并捕获挂起调用。