插件可以单个被调用进来(使用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')
我们还相信,你能够纯粹通过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"
Bootstrap插件在JavaScript被禁用时没有特殊的回调方式。如果你比较关心用户体验的话,可用<noscript>
向你的用户解释情况(即如何重新开启 JavaScript),然后/或者添加你自己的回调机制。
Bootstrap并不正式支持第三方的JavaScript库比如Prototype或者jQuery UI。尽管有.noConflic
和命名空间事件,但仍然可能有兼容性问题,需要靠你自己修复。
对于简单的过渡效果,包含在transition.js
和其他JS文件中。如果你正在使用编译版的(或者瘦身过的)bootstrap.js
,就不需要再调用这个文件了,因为已经有了。
Transition.js是一个基本的辅助工具,用于transitionEnd
事件,以及CSS过渡仿真。其它插件用它来检查CSS的过渡支持,并捕获挂起的过渡。