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

（2）、选项

通过 data 属性或 JavaScript 来传递。下表列出了这些选项：

（3）、方法

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

（4）、事件

下表列出了滚动监听中要用到事件。这些事件可在函数中当钩子使用。

5、Bootstrap 标签页（Tab）插件

标签页（Tab）在 Bootstrap 导航元素 一章中介绍过。通过结合一些 data 属性，您可以轻松地创建一个标签页界面。通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中。

（1）、用法

您可以通过以下两种方式启用标签页：

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

• data-toggle="tab">Home

...

B、通过 JavaScript：您可以使用 Javscript 来启用标签页，如下所示：

下面的实例演示了以不同的方式来激活各个标签页：

（2）、淡入淡出效果

如果需要为标签页设置淡入淡出效果，请添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容，如下面实例所示：

<div class="tab-pane fade" id="svn">...

（3）、方法

.$().tab：该方法可以激活标签页元素和内容容器。标签页需要用一个 data-target 或者一个指向 DOM 中容器节点的 href。

.....

（4）、事件

下表列出了标签页（Tab）插件中要用到的事件。这些事件可在函数中当钩子使用。

6、Bootstrap 提示工具（Tooltip）插件

当您想要描述一个链接的时候，提示工具（Tooltip）就显得非常有用。提示工具（Tooltip）插件是受 Jason Frame 写的 jQuery.tipsy 的启发。提示工具（Tooltip）插件做了很多改进，例如不需要依赖图像，而是改用 CSS 实现动画效果，用 data 属性存储标题信息。

（1）、用法

提示工具（Tooltip）插件根据需求生成内容和标记，默认情况下是把提示工具（tooltip）放在它们的触发元素后面。您可以有以下两种方式添加提示工具（tooltip）：

A、通过 data 属性：如需添加一个提示工具（tooltip），只需向一个锚标签添加 data-toggle="tooltip" 即可。锚的 title 即为提示工具（tooltip）的文本。默认情况下，插件把提示工具（tooltip）设置在顶部。

data-toggle="tooltip"

title="Example tooltip"

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

提示工具（Tooltip）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的提示工具（tooltip）：

（2）、选项

有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：

（3）、方法

下面是一些提示工具（Tooltip）插件中有用的方法：

（4）、事件

下表列出了提示工具（Tooltip）插件中要用到的事件。这些事件可在函数中当钩子使用。

7、Bootstrap 弹出框（Popover）插件

弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API（Bootstrap Data API）来填充。该方法依赖于工具提示（tooltip）。如果您想要单独引用该插件的功能，那么您需要引用 popover.js，它依赖于 工具提示（Tooltip）插件。

（1）、用法

弹出框（Popover）插件根据需求生成内容和标记，默认情况下是把弹出框（popover）放在它们的触发元素后面。您可以有以下两种方式添加弹出框（popover）：

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

data-toggle="popover"title="Example popover">

B、通过 JavaScript：通过 JavaScript 启用弹出框（popover）：

弹出框（Popover）插件不像之前所讨论的下拉菜单及其他插件那样，它不是纯 CSS 插件。如需使用该插件，您必须使用 jquery 激活它（读取 javascript）。使用下面的脚本来启用页面中的所有的弹出框（popover）：

data-container="body" data-toggle="popover" data-placement="left" data-content="左侧的 Popover 中的一些内容"

>左侧的 Popover

（2）、选项

有一些选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用的。下表列出了这些选项：

（3）、方法

下面是一些弹出框（Popover）插件中有用的方法：

（4）、事件

下表列出了弹出框（Popover）插件中要用到的事件。这些事件可在函数中当钩子使用。

8、Bootstrap 警告框（Alert）插件

警告框（Alert）消息大多是用来想终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。

（1）、用法

您可以有以下两种方式启用警告框的可取消（dismissal）功能：

A、通过 data 属性：通过数据 API（Data API）添加可取消功能，只需要向关闭按钮添加 data-dismiss="alert"，就会自动为警告框添加关闭功能。

data-dismiss="alert"href="#"

aria-hidden="true"

B、通过 JavaScript：通过 JavaScript 添加可取消功能：

（2）、方法

下面是一些警告框（Alert）插件中有用的方法：

（3）、事件

下表列出了警告框（Alert）插件中要用到的事件。这些事件可在函数中当钩子使用。

9、Bootstrap 按钮（Button）插件

通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。

（1）、加载状态

如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可，

（2）、单个切换

如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可。

（3）、复选框（Checkbox）

您可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换。

（4）、单选按钮（Radio）

类似地，您可以创建单选按钮组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换。

（5）、方法

下面是一些按钮（Button）插件中有用的方法：

10、Bootstrap 折叠（Collapse）插件

折叠（Collapse）插件可以很容易地让页面区域折叠起来。无论您用它来创建折叠导航还是内容面板，它都允许很多内容选项。

（1）、创建可折叠的分组或折叠面板（accordion），如下所示：

<div id="collapSEOne" class="panel-collapse collapse in">

<div class="panel-body">

Nihil anim keffiyeh helvetica,craft beer labore wes anderson

cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

vice lomo.

A、data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。

B、href 或 data-target 属性添加到父组件，它的值是子组件的 id。

C、data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上

（2）、创建不带 accordion 标记的简单的可折叠组件（collapsible），如下所示：

（3）、用法

下表列出了折叠（Collapse）插件用于处理繁重的伸缩的 class：

您可以通过以下两种方式使用折叠（Collapse）插件：

A、通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。

B、通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：

11、Bootstrap 轮播（Carousel）插件

Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

<div class="jb51code">
<pre class="brush:xhtml;">
<div id="myCarousel" class="carousel slide">

<ol class="carousel-indicators">

<li data-target="#myCarousel" data-slide-to="0" class="active">

<li data-target="#myCarousel" data-slide-to="1">

<li data-target="#myCarousel" data-slide-to="2">

<div class="carousel-inner">

<div class="item active">

<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">

<div class="carousel-caption">标题 1

<div class="item">

<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">

<div class="carousel-caption">标题 2

<div class="item">

<img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">

<div class="carousel-caption">标题 3

<a class="carousel-control left" href="#myCarousel"

data-slide="prev">‹

<a class="carousel-control right" href="#myCarousel"

data-slide="next">›

（1）、用法

A、通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。

属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。

使用 data-slide-to 来向轮播床底一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。

data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

B、通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：

（2）、选项

有一些选项是通过 data 属性或 JavaScript 来传递的。下表列出了这些选项：

（3）、方法

下面是一些轮播（Carousel）插件中有用的方法：

（4）、事件

下表列出了轮播（Carousel）插件中要用到的事件。这些事件可在函数中当钩子使用。

12、Bootstrap 附加导航（Affix）插件

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