Bootstrap插件使用详细介绍

Bootstrap插件概览 站点引用 Bootstrap 插件的方式有两种： 单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。 编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。 （API:应用程序接口） data 属性： 通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。首选方式 关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。`(document).off(‘.data?api′)‘关闭一个特定的插件，只需要在data?api命名空间前加上该插件的名称作为命名空间即可。‘(document).off(‘.alert.data-api’)` 编程方式的 API 避免命名空间冲突：可以通过调用插件的 .noConflict 方法恢复其原始值。

var bootstrapButton = $.fn.button.noConflict() // 返回 $.fn.button 之前所赋的值
$.fn.bootstrapBtn = bootstrapButton// 为 $().bootstrapBtn 赋予 Bootstrap 功能

事件两种形式： 动词不定式：这会在事件开始时被触发。动词不定式事件提供了 preventDefault 功能。这使得在事件开始前可以停止操作的执行。

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

过去分词形式：这会在动作执行完毕之后被触发。例如 ex: shown。 一、过渡效果（Transition）插件 1、模态框（Modal）插件 模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 切换模态框（Modal）插件的隐藏内容： 通过 data 属性： 在控制器元素（比如按钮或者链接）上设置属性 data-toggle=”modal”，同时设置 data-target=”#identifier” 或 href=”#identifier” 来指定要切换的特定的模态框（带有 id=”identifier”）。 通过 JavaScript： 使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id=”identifier” 的模态框：

$('#identifier').modal(options)

选项 backdrop boolean 或 string ‘static’ 默认值：true data-backdrop 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。 keyboard boolean 默认值：true data-keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。 show boolean 默认值：true data-show 当初始化时显示模态框。 remote path 默认值：false data-remote 使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 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 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。

$('#identifier').on('shown.bs.modal', function () {
  // 执行一些动作...
})

hide.bs.modal 当调用 hide 实例方法时触发。

$('#identifier').on('hide.bs.modal', function () {
  // 执行一些动作...
})

hidden.bs.modal 当模态框完全对用户隐藏时触发。

$('#identifier').on('hidden.bs.modal', function () {
  // 执行一些动作...
})

2、标签页（Tab）插件 启用标签页： 通过 data 属性：您需要添加 data-toggle=”tab” 或 data-toggle=”pill” 到锚文本链接中。 添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

Home ... 通过 JavaScript：您可以使用 Javscript 来启用标签页 淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容 方法 `.$().tab`：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。 事件 show.bs.tab 该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

shown.bs.tab 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // 激活的标签页
  e.relatedTarget // 前一个激活的标签页
})

3、警告框（Alert）插件 启用警告框的可取消（dismissal）功能： 通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss=”alert”，就会自动为警告框添加关闭功能。

    ×

通过 JavaScript：`$(“.alert”).alert()` 方法 .alert() 该方法让所有的警告框都带有关闭功能。

$('#identifier').alert();

Close Method .alert(‘close’) 关闭所有的警告框。

$('#identifier').alert('close');

如需在关闭时启用动画效果，请确保添加了 .fade 和 .in class。 事件 close.bs.alert 当调用 close 实例方法时立即触发该事件。

$('#myalert').bind('close.bs.alert', function () {
  // 执行一些动作...
})

closed.bs.alert 当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。

$('#myalert').bind('closed.bs.alert', function () {
    // 执行一些动作...
})

4、轮播（Carousel）插件 为了实现轮播，您只需要添加带有该标记的代码即可。不需要使用 data 属性，只需要简单的基于 class 的开发即可。 可选的标题 您可以通过 .item 内的 .carousel-caption 元素向幻灯片添加标题。只需要在该处放置任何可选的 HTML 即可，它会自动对齐并格式化。 用法 通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to=”2” 将把滑块移动到一个特定的索引，索引从 0 开始计数。 data-ride=”carousel” 属性用于标记轮播在页面加载时就开始动画播放。 通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：

$('.carousel').carousel()

选项 有一些选项是通过 data 属性或 JavaScript 来传递的。 interval number 默认值：5000 data-interval 自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。 pause string 默认值：”hover” data-pause 鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。 wrap boolean 默认值：true data-wrap 轮播是否连续循环。 方法： .carousel(options) 初始化轮播为可选的 options 对象，并开始循环项目。

$('#identifier').carousel({
    interval: 2000
})

.carousel(‘cycle’) 从左到右循环轮播项目。

$('#identifier').carousel('cycle')

.carousel(‘pause’) 停止轮播循环项目。

$('#identifier').carousel('pause')

.carousel(number) 循环轮播到某个特定的帧（从 0 开始计数，与数组类似）。

$('#identifier').carousel(number)

.carousel(‘prev’) 循环轮播到上一个项目。

$('#identifier').carousel('prev')

.carousel(‘next’) 循环轮播到下一个项目。

$('#identifier').carousel('next')

事件： slide.bs.carousel 当调用 slide 实例方法时立即触发该事件。

$('#identifier').on('slide.bs.carousel', function () {
    // 执行一些动作...
})

slid.bs.carousel 当轮播完成幻灯片过渡效果时触发该事件。

$('#identifier').on('slid.bs.carousel', function () {
    // 执行一些动作...
})

下拉菜单（Dropdown）插件 切换下拉菜单（Dropdown）插件的隐藏内容： 通过 data 属性： 向链接或按钮添加 data-toggle=”dropdown” 来切换下拉菜单 如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target=”#” 属性代替 href=”#” 通过 JavaScript： 通过 JavaScript 调用下拉菜单切换，请使用下面的方法：

$('.dropdown-toggle').dropdown()

实例 在导航栏内、在标签页内 方法 下拉菜单切换有一个简单的方法用来显示或隐藏下拉菜单。

$().dropdown('toggle')

滚动监听（Scrollspy）插件
基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。
您可以向顶部导航添加滚动监听行为：
通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy=”scroll”。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。

...

...

...

通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：

$('body').scrollspy({ target: '.navbar-example' })

选项：
offset number 默认值：10 data-offset 当计算滚动位置时，距离顶部的偏移像素。

方法：
.scrollspy(‘refresh’)：当通过 JavaScript 调用 scrollspy 方法时，您需要调用 .refresh 方法来更新 DOM。这在 DOM 的任意元素发生变更（即，您添加或移除了某些元素）时非常有用。

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

事件
activate.bs.scrollspy 每当一个新项目被滚动监听激活时，触发该事件。

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // 执行一些动作...
})

更多实例：
创建水平滚动监听、垂直滚动监听

提示工具（Tooltip）插件：

用法：默认情况下是把提示工具（tooltip）放在它们的触发元素后面。
通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle=”tooltip” 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

请悬停在我的上面

通过 JavaScript：通过 JavaScript 触发提示工具（tooltip）：

$('#identifier').tooltip(options)

注：提示工具不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

$(function () { $("[data-toggle='tooltip']").tooltip(); });

选项
有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。
animation boolean 默认值：true data-animation 提示工具使用 CSS 渐变滤镜效果。
html boolean 默认值：false data-html 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement string|function 默认值：top data-placement 规定如何定位提示工具（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 “auto left”，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector string 默认值：false data-selector 如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title string | function 默认值：” data-title 如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger string 默认值：’hover focus’ data-trigger 定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。
content string | function 默认值：” data-content 如果未指定 data-content 属性，则使用默认的 content 值。
delay number | object 默认值：0 data-delay 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：
delay:{ show: 500, hide: 100 }
container string | false 默认值：false data-container 向指定元素追加提示工具。

方法：
Options: .tooltip(options) 向元素集合附加提示工具句柄。

$().tooltip(options)

Toggle: .tooltip(‘toggle’) 切换显示/隐藏元素的提示工具。

$('#element').tooltip('toggle')

Show: .tooltip(‘show’) 显示元素的提示工具。

$('#element').tooltip('show')

Hide: .tooltip(‘hide’) 隐藏元素的提示工具。

$('#element').tooltip('hide')

Destroy: .tooltip(‘destroy’) 隐藏并销毁元素的提示工具。

$('#element').tooltip('destroy')

事件：
show.bs.tooltip 当调用 show 实例方法时立即触发该事件。

$('#myTooltip').on('show.bs.tooltip', function () {
  // 执行一些动作...
})

shown.bs.tooltip 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。

$('#myTooltip').on('shown.bs.tooltip', function () {
  // 执行一些动作...
})

hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。

$('#myTooltip').on('hide.bs.tooltip', function () {
  // 执行一些动作...
})

hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

$('#myTooltip').on('hidden.bs.tooltip', function () {
  // 执行一些动作...
})

弹出框（Popover）插件
用法：
通过 data 属性：如需添加一个弹出框（popover），只需向一个锚/按钮标签添加 data-toggle=”popover” 即可。锚的 title 即为弹出框（popover）的文本。默认情况下，插件把弹出框（popover）设置在顶部。

    请悬停在我的上面

通过 JavaScript：通过 JavaScript 启用弹出框（popover）：$('#identifier').popover(options)
注：弹出框（Popover）插件不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

$(function () { $("[data-toggle='popover']").popover(); });

选项：
animation boolean 默认值：true data-animation 向弹出框应用 CSS 褪色过渡效果。
html boolean 默认值：false data-html 向弹出框插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement string|function 默认值：top data-placement 规定如何定位弹出框（即 top|bottom|left|right|auto）。
当指定为 auto 时，会动态调整弹出框。例如，如果 placement 是 “auto left”，弹出框将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector string 默认值：false data-selector 如果提供了一个选择器，弹出框对象将被委派到指定的目标。
title string | function 默认值：” data-title 如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger string 默认值：’hover focus’ data-trigger 定义如何触发弹出框： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。
delay number | object 默认值：0 data-delay 延迟显示和隐藏弹出框的毫秒数
delay:{ show: 500, hide: 100 }
container string | false 默认值：false data-container 向指定元素追加弹出框。

方法 ：
Options: .popover(options) 向元素集合附加弹出框句柄。

$().popover(options)

Toggle: .popover(‘toggle’) 切换显示/隐藏元素的弹出框。

$('#element').popover('toggle')

Show: .popover(‘show’) 显示元素的弹出框。

$('#element').popover('show')

Hide: .popover(‘hide’) 隐藏元素的弹出框。

$('#element').popover('hide')

Destroy: .popover(‘destroy’) 隐藏并销毁元素的弹出框。

$('#element').popover('destroy')

事件：
show.bs.popover 当调用 show 实例方法时立即触发该事件。

$('#mypopover').on('show.bs.popover', function () {
  // 执行一些动作...
})

shown.bs.popover 当弹出框对用户可见时触发该事件（将等待 CSS 过渡效果完成）。

$('#mypopover').on('shown.bs.popover', function () {
  // 执行一些动作...
})

hide.bs.popover 当调用 hide 实例方法时立即触发该事件。

$('#mypopover').on('hide.bs.popover', function () {
  // 执行一些动作...
})

hidden.bs.popover 当工具提示对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

$('#mypopover').on('hidden.bs.popover', function () {
  // 执行一些动作...
})

按钮（Button）插件
加载状态：如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text=”Loading…” 作为其属性即可
单个切换：如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle=”button” 作为其属性即可
复选框：创建复选框组，通过向 btn-group 添加 data 属性 data-toggle=”buttons” 来添加复选框组的切换。
单选按钮（Radio）：您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle=”buttons” 来添加单选按钮组的切换。
用法：通过 JavaScript 启用按钮（Button）插件，$('.btn').button()

方法：
button(‘toggle’) 切换按压状态。赋予按钮被激活的外观。您可以使用data-toggle属性启用按钮的自动切换。

$().button('toggle')

.button(‘loading’) 当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。

$().button('loading')

.button(‘reset’) 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。

$().button('reset')

.button(string) 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。

$().button(string)

折叠（Collapse）插件：
创建可折叠的分组或折叠面板
1、data-toggle=”collapse” 添加到您想要展开或折叠的组件的链接上。
2、href 或 data-target 属性添加到父组件，它的值是子组件的 id。
3、data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。

创建不带 accordion 标记的简单的可折叠组件
用法：列出了折叠（Collapse）插件用于处理繁重的伸缩的 class：
.collapse 隐藏内容。 尝试一下
.collapse.in 显示内容。 尝试一下
.collapsing 当过渡效果开始时被添加，当过渡效果完成时被移除。

用法：
通过 data 属性：向元素添加 data-toggle=”collapse” 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。
为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent=”#selector”。
通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：

$('.collapse').collapse()

选项：
parent selector 默认值：false data-parent 如果提供了一个选择器，当可折叠项目显示时，指定父元素下的所有可折叠的元素将被关闭。这与创痛的折叠面板（accordion）的行为类似 - 这依赖于 accordion-group 类。
toggle boolean 默认值：true data-toggle 切换调用可折叠元素。

方法：
Options: .collapse(options) 激活内容为可折叠元素。接受一个可选的 options 对象。

$('#identifier').collapse({
    toggle: false
})

Toggle: .collapse(‘toggle’) 切换显示/隐藏可折叠元素。

$('#identifier').collapse('toggle')

Show: .collapse(‘show’) 显示可折叠元素。

$('#identifier').collapse('show')

Hide: .collapse(‘hide’) 隐藏可折叠元素。

$('#identifier').collapse('hide')

事件
show.bs.collapse 在调用 show 方法后触发该事件。

$('#identifier').on('show.bs.collapse', function () {
    // 执行一些动作...
})

shown.bs.collapse 当折叠元素对用户可见时触发该事件（将等待 CSS 过渡效果完成）。

$('#identifier').on('shown.bs.collapse', function () {
    // 执行一些动作...
})

hide.bs.collapse 当调用 hide 实例方法时立即触发该事件。

$('#identifier').on('hide.bs.collapse', function () {
    // 执行一些动作...
})

hidden.bs.collapse 当折叠元素对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

$('#identifier').on('hidden.bs.collapse', function () {
    // 执行一些动作...
})

附加导航（Affix）插件

附加导航（Affix）插件允许某个

固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。

用法：
通过 data 属性：如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy=”affix” 即可。请使用偏移来定义何时切换元素的锁定和移动。
通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix）。

通过 CSS 定位：
在上面两种使用附加导航（Affix）插件的方式中，您都必须通过 CSS 定位内容。附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态： .affix、.affix-top 和 .affix-bottom。请按照下面的步骤，来为这三种状态设置您自己的 CSS（不依赖此插件）。
在开始时，插件添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。
当滚动经过添加了附加导航（Affix）的元素时，应触发实际的附加导航（Affix）。此时 .affix 会替代 .affix-top，同时设置 position: fixed;（由 Bootstrap 的 CSS 代码提供）。
如果定义了底部偏移，当滚动到达该位置时，应把 .affix 替换为 .affix-bottom。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS。在这种情况下，请在必要的时候添加 position: absolute;。

选项：
offset number | function | object 默认值：10 data-offset 当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移，则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移，请使用函数。