BootStrap插件
站点引用 Bootstrap 插件的方式有两种：
- 单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。
- 编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。
不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。
所有的插件依赖于 jQuery。所以必须在插件文件之前引用 jQuery。请访问 bower.json 查看 Bootstrap 当前支持的 jQuery 版本。
某些时候 Bootstrap 插件可能需要与其他 UI 框架一起使用。在这种情况下，可能会发生命名空间冲突。如果不幸发生了这种情况，你可以通过调用插件的 .noConflict 方法恢复其原始值。
如果您想要单独引用该插件的功能，那么除了其他的 JS 文件，您还需要引用 transition.js。
Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
如果您想要单独引用该插件的功能，那么您需要引用 modal.js。
您可以切换模态框（Modal）插件的隐藏内容：
- 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
- 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
| 类 | 默认值 | 描述 |
| backdrop | boolean或string static 默认值：true | 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框 |
| keyborad | boolean：true | 按下escape键时关闭模态框，设置位false时则无效 |
| show | boolean：true | 初始化显示模态框 |
| remote | path：false | 如果添加一个有效的url的href，则会加载其中的内容 |
与modal()一起使用的有用的方法
| 方法 | 描述 | 实例 |
| Options：modal(options) | 把内容作为模态框激活 | $('#identifier').modal({keyboard:false}) |
| Toggle:modal('toggle') | 切换模态框 | $('#identifier').modal('toggle') |
| Show：modal（'show'） | 手动打开模态框 | $('#identifier').modal('show') |
| Hide:modal('hide') | 手动隐藏模态框 | $('#identifier').modal('hide') |
事件，在函数中当钩子使用
| 事件 | 描述 | 实例 |
| show.bs.modal | 在调用show方法后触发 | $('#identifier').on('show.bs.modal',function（）｛｝) |
| shown.bs.modal | 当模态框对用户触发可见时 | $('#identifier').on('show.bs.modal',function（）｛｝) |
| hide.bs.modal | 当调用hide实例方法时触发 | $('#identifier').on('hide.bs.modal',function（）｛｝ |
| hidden.bs.modal | 当模态框完全对用户隐藏时触发 | $('#identifier').on('hidden.bs.modal',function（）｛｝ |
下拉菜单（Dropdown）插件的隐藏内容：通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单
如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替 href="#"：
下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单$(data-toggle).dropdown('toggle')
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。
通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。
通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：
$('body').scrollspy({ target: '.navbar-example' })
.scrollspy('refresh')：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh 方法来更新 DOM
activate.bs.scrollspy每当一个新项目被滚动监听激活时，触发该事件
激活各个标签：
// 通过名称选取标签页 $('#myTab a[href="#profile"]').tab('show') // 选取第一个标签页 $('#myTab a:first').tab('show') // 选取最后一个标签页 $('#myTab a:last').tab('show') // 选取第三个标签页（从 0 开始索引） $('#myTab li:eq(2) a').tab('show')
如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。
.$().tab：该方法可以激活标签页元素和内容容器。
当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。
需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。
弹出框（Popover）：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。
折叠：
- data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
- href 或 data-target 属性添加到父组件，它的值是子组件的 id。
- data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。
