JavaScript脚本

Bootstrap 包括一些 JavaScript 帮助用户做出更加充满生机、活动的项目。欢迎学习更多关于如何去调用动态事件、灵活展示的数据和编程性的API选项等。

单个引用或者编译

一个页面只要使用一个Boostrap的单个*.js文件,一次性使用bootstrap.js或压缩精简的bootstrap.min.js(不要两个都调用),单个JS插件可以被包含调用之。

依赖关系

一些插件和CSS组件依赖于其它插件,这在系统中是被允许的。如果你要单个调用插件,请先在文档中检查它们的依赖关系。还要注意,所有插件都依赖于jQuery(即jQuery必须在所有JS插件文件之前调用)。参考 Consult our package.json可以以了解哪些详尽版本的jQuery是被支持的。
比如下拉菜单dropdowns、提示组件popovers、冒泡组件等都提依赖于Popper.js

数据属性

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

在某些情况下,可能需要禁用此功能。要禁用数据属性API,可用下面的方法在文档中解绑所有的带data-api命名空间的事件:

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

如需要指向特定的插件,只需要在调用插件的全名空间上拼接data-api作为命名空间,如下所示:

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

JS事件(Event)

Bootstrap为大多数插件的独一无二的行为提供了自定义事件。通常情况下,这里会有动词不定式和过去分词形式—如果在事件的开始触发了它的动词不定式(如show),而shown在完成某个动作后触发其过去分词形式(如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')

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

$('#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')

异步函数和转换

All programmatic API methods are asynchronous and returns to the caller once the transition is started but before it ends.

所有编程化的API方法均为异步,一旦转换开始并在结束之前返回给调用者。如果需要在转换完成后执行动作,您可以收听相应的事件(进行侦听并作出下一步的编程):

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

另外,transition过渡组件上的方法调用将被忽略:

$('#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插件的构造函数的属性访问。如对于tooltip工具提示插件:

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

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

Bootstrap插件在JavaScript被禁用时没有特殊的回调方式。如果你比较关心用户体验的话,可用<noscript>向你的用户解释情况(以及指引如何重新开启 JavaScript),然后/或者添加自定义回调机制。

第三方库

Bootstrap并不正式支持第三方的JavaScript库,比如Prototype或者jQuery UI。尽管有系统中.noConflic和命名空间事件,但如果混合引用可能会带来兼容性问题(高手不怕脏和累、并自行修复BUG条件下,请自便:)。

Util方法

默认bootstrap.js(预编译与精简版)都已经包含了util.js,因为Bootstrap所有JavaScript行为都依赖于util.js函数。

util.js包括效用函数和transitionEnd事件的基本帮助器以及CSS转换仿真器。它被其他插件用于检查CSS过渡支持并捕获挂起的过渡。