Bootstrap 插件概述

前面章节中布局组件部分讨论的组件仅仅是个开始。Bootstrap 内置了 12 个 jQuery 插件，这些插件扩展了功能，并可以为您的网站添加更多交互性。要开始使用 Bootstrap 的 JavaScript 插件，您不需要成为高级 JavaScript 开发人员。通过利用 Bootstrap 数据 API，大多数插件无需编写任何代码即可触发。

Bootstrap 插件可以通过两种形式包含在您的网站中：

单独 - 使用 Bootstrap 的单个 *.js 文件。某些插件和 CSS 组件依赖于其他插件。如果您单独包含插件，请务必在文档中检查这些依赖项。
或编译（一次全部） - 使用 bootstrap.js 或最小化版本的 bootstrap.min.js。不要尝试同时包含两者，因为 bootstrap.js 和 bootstrap.min.js 都将所有插件包含在一个文件中。

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

数据属性

所有 Bootstrap 插件都可以使用包含的数据 API 访问。因此，您不需要编写任何 JavaScript 代码即可调用任何插件功能。
在某些情况下，可能需要关闭数据 API 的此功能。如果您需要关闭数据 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 为大多数插件的独特操作提供自定义事件。通常，这些事件有两种形式：

动词不定式形式 - 这在事件开始时触发。例如：show。不定式事件提供 preventDefault 功能。这提供了在操作开始之前停止其执行的能力。

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

过去分词形式 - 这在操作完成时触发。例如：shown.

打印页面