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" 便可。
折叠：

1. data-toggle="collapse" 添加到您想要展开或折叠的组件的连接上。
2. href 或 data-target 属性添加到父组件，它的值是子组件的 id。
3. data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的连接

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。