JavaScript

Bootstrap 包括一些 JavaScript 能帮助我们让组件更加充满生机。欢迎学习更多关于如何去调用它、我们的数据和编程性的API选项，等等。

单用或者编译

插件可以单个被调用进来（使用Boostrap的单个*.js文件）或者一次性使用bootstrap.js或瘦身版的bootstrap.min.js（不要两个都调用）。

依赖关系

一些插件和CSS组件依赖于其它插件。如果你要单个调用插件，请先在文档中检查它们的依赖关系。同时还需注意所有的插件都依赖于jQuery（这意味着jQuery必须在所有插件文件之前调用）。参考bower.json 以了解哪些版本的jQuery是被支持的。

数据属性

通过HTML的数据属性几乎能启用并配置所有的Bootstrap插件（我们更倾向于函数化地使用JavaScript）。记住只能在单个元素上使用一套数据属性（例如，你不能从同一个按钮触发一个工具提示和一个模态框。）

然而，在一些情况下，禁用这个功能更好。为了禁用数据属性API，可以用下面的方法在文档中解绑所有的带data-api命名空间的事件：

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

另外，为了指向特定的插件，只需要调用插件的名再加上data-api作为命名空间，如下所示：

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

编程化的API

我们还相信，你能够纯粹通过JavaScript API来使用所有的Bootstrap插件。所有的公共的API是单一的、可连缀的方法，并会返回对之起作用的集合。

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

所有的方法都能够接收一个可取舍的options对象、一个指向特定方法的字符串，或者不接收参数。（不带参数地调用这个方法将用默认行为初始化一个插件）：

$('#myModal').modal()                      // 用默认值初始化插件
$('#myModal').modal({ keyboard: false })   // 用无键盘初始化插件
$('#myModal').modal('show')                // 初始化并立即引用show

每个插件都需会在Constructor属性上曝露它的原始构造函数$.fn.popover.Constructor。如果你想获得一个特定的插件实例，可以从一个元素中直接获得它：$('[rel="popover"]').data('popover')。

默认设置

修改插件的Constructor.DEFAULTS对象，就可以修改插件的默认设置。

$.fn.modal.Constructor.DEFAULTS.keyboard = false // 把模态窗口插件的`keyboard`选项的默认值设置为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为大多数插件的独一无二的行为提供了自定义事件。通常情况下，这里会有动词不定式和过去分词形式——如果在事件的开始触发了它的动词不定式（例如：show），然后在动作完成时就会触发它的过分分词（例如：shown）。

所有的不定式事件都提供了preventDefault功能。它让你能够在一个动作开始之前就终止它的执行。

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

版本号

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

$.fn.tooltip.Constructor.VERSION // => "4.0.0-alpha"

当JavaScript被禁用时，没有特殊的回调机制。

Bootstrap插件在JavaScript被禁用时没有特殊的回调方式。如果你比较关心用户体验的话，可用<noscript>向你的用户解释情况（即如何重新开启 JavaScript），然后/或者添加你自己的回调机制。

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。