JavaScript 插件

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

1、概览

1.1 JavaScript 插件的引入

1.1.1 单个引入

  • JavaScript 插件只单个引入需要用的js文件（使用 Bootstrap 提供的单个 *.js 文件）
  • 注意插件之间的依赖关系（某些插件和 CSS 组件依赖于其它插件。如果你是单个引入每个插件的，请确保在文档中检查插件之间的依赖关系。注意，所有插件都依赖 jQuery （也就是说，jQuery必须在所有插件之前引入页面）。 bower.json 文件中列出了 Bootstrap 所支持的 jQuery 版本）

1.1.2 全部引入（推荐）

  • 一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）
  • 建议使用压缩版的 JavaScript 文件

1.2 JavaScript 插件的使用

1.2.1 通过设置data属性

 例如：使用模态框插件

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

解除以 data-api 为命名空间并绑定在文档上的事件

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

1.2.2 通过编程方式的 API

我们为所有 Bootstrap 插件提供了纯 JavaScript 方式的 API。所有公开的 API 都是支持单独或链式调用方式，并且返回其所操作的元素集合（注：和jQuery的调用形式一致）。

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

1.3 JavaScript事件

  • Bootstrap 为大部分插件所具有的动作提供了自定义事件。一般来说，这些事件都有不定式和过去式两种动词的命名形式，例如，不定式形式的动词（例如 show）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动作执行完毕之后被触发。
  • 从 3.0.0 版本开始，所有 Bootstrap 事件的名称都采用命名空间方式。
  • 所有以不定式形式的动词命名的事件都提供了 preventDefault 功能。这就赋予你在动作开始执行前将其停止的能力。
$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // 阻止模态框的展示
})