Bootstrap 使用基于jQuery构建的可选JavaScript插件,用以实现某些功能。
插件可以单独包含 js/dist/*.js
), 也可以使用完整的已编译版本 bootstrap.js
或压缩版本 bootstrap.min.js
(不要两个同时使用).
如果你使用包管理器 (Webpack, Rollup…), 到这里来查找所需的文件 /js/dist/*.js
。
一些插件和 CSS 组件依赖于其他插件。 如果单独包含插件,请确保在文档中检查这些依赖项。 另请注意,所有插件都依赖 于jQuery(这意味着必须在插件文件之前包含 jQuery)。 请参阅我们的package.json以了解支持哪些版本的jQuery。
下拉菜单,气泡提示,弹窗依赖 Popper.js.
几乎所有的 Bootstrap 插件都可以通过 HTML 单独使用 Data 属性(我们使用JavaScript功能的首选方式)来启用和配置。 确保只在一个元素上使用一组 Data 属性(例如,你不能从同一个按钮触发工具提示和模态。)
但是,在某些情况下,可能需要禁用此功能。 要禁用 Data 属性API,请使用data-api
取消绑定DOM的所有事件,如下所示:
$(document).off('.data-api')
或者,要定位特定的插件,只需将插件的名称作为命名空间以及 data-api 命名空间包含在内:
$(document).off('.alert.data-api')
如果你使用特殊选择器,例如collapse:Example
,请务必将它们转义,因为它们将通过jQuery传递。
Bootstrap 为大多数插件的独特操作提供自定义事件。
所有不定式事件都提供preventDefault()
功能。 这提供了在动作开始之前停止执行的能力。 从事件处理程序返回false也会自动调用 preventDefault()
。
$('#myModal').on('show.bs.modal', function (e) {
if (!data) return e.preventDefault() // stops modal from being shown
})
你能够纯粹通过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"
没有用户体验可言。禁用 JavaScript 时,Bootstrap 的插件不会特别优雅。 如果你关心这种情况下的用户体验,请使用 <noscript>
向用户解释情况(以及如何重新启用JavaScript),或添加自己的自定义后备方案。
Bootstrap不正式支持Prototype或jQuery UI等第三方JavaScript库。你可能需要自行修复兼容性问题。
所有 Bootstrap 的 JavaScript 文件都依赖于util.js,它必须与其他 JavaScript 文件一起包含在内。 如果你正在使用编译的(或缩小的)bootstrap.js,则不需要包含它 - 它已经存在。
util.js
包含工具函数和 transitionEnd 事件的基本辅助程序以及CSS转换模拟器。 其他插件使用它来检查CSS调用支持并捕获挂起调用。