上一章中“布局组件”下讨论的组件仅仅是个开始。 Bootstrap随附有12个jQuery插件，这些插件可扩展功能并可以向您的站点添加更多交互。要开始使用Bootstrap的JavaScript插件，您无需成为高级JavaScript开发人员。通过使用Bootstrap Data API，无需编写任何代码即可触发大多数插件。

Bootstrap插件可以两种形式包含在您的站点中-

• 单独-使用Bootstrap的单独* .js文件。一些插件和CSS组件依赖于其他插件。如果您单独包含插件，请确保在文档中检查这些依赖项。

• 或编译（一次全部） -使用bootstrap.js或缩小的bootstrap.min.js 。不要尝试同时包含两者，因为bootstrap.js和bootstrap.min.js都将所有插件都包含在一个文件中。

所有插件都依赖jQuery。因此，必须在插件文件之前包含jQuery。检查bower.json以查看支持哪些版本的jQuery。

数据属性

• 所有Bootstrap插件均可使用随附的Data API访问。因此，您无需包含一行JavaScript即可调用任何插件功能。

• 在某些情况下，可能需要关闭Data API的此功能。如果您需要关闭Data API，则可以通过添加以下JavaScript行来取消绑定属性-

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

• 要关闭特定/单个插件，只需将插件名称作为名称空间以及像这样的data-api名称空间包括在内-

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

程序化API

Bootstrap的开发人员认为您应该能够完全通过JavaScript API使用所有插件。所有公共API都是单个可链接的方法，并返回按声明操作的集合，例如-

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

所有方法都接受一个可选的options对象，一个针对特定方法的字符串，或者不接受任何内容（使用默认行为初始化一个插件），如下所示-

// initialized with defaults
$("#myModal").modal()    

 // initialized with no keyboard                  
$("#myModal").modal({ keyboard: false })  

// initializes and invokes show immediately
$("#myModal").modal('show')                

每个插件还将其原始构造函数公开在Constructor属性上： $ .fn.popover.Constructor 。如果您想获取特定的插件实例，请直接从元素中检索它-

$('[rel = popover]').data('popover').

没有冲突

Bootstrap插件有时可以与其他UI框架一起使用。在这些情况下，名称空间冲突有时会发生。为了克服对插件的.noConflict调用，您希望恢复其值。

// return $.fn.button to previously assigned value
var bootstrapButton = $.fn.button.noConflict()

// give $().bootstrapBtn the Bootstrap functionality
$.fn.bootstrapBtn = bootstrapButton            

大事记

Bootstrap为大多数插件的唯一操作提供自定义事件。通常，这些事件有两种形式-

• 不定式-在事件开始时触发。例如显示。不定式事件提供preventDefault功能。这提供了在动作开始之前停止执行的能力。

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

• 过去分词形式-在动作完成时触发。如所示。