Bootstrap 自带组件

Bootstrap 自带组件

 

插件概览

在前面《布局组件》章节中所讨论到的组件仅仅是个开始。

Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。

利用Bootstrap数据API，大部分的插件可以在不编写任何代码的情况被触发。

 

站点引用 Bootstrap 插件的方式有两种：

单独引用：使用 Bootstrap 的个别的 *.js 文件。

编译（同时）引用：使用 bootstrap.js 或压缩版的 bootstrap.min.js。

不要尝试同时引用这两个文件，因为 bootstrap.js 和 bootstrap.min.js 都包含了所有的插件。

 

data 属性

你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件，无需写一行 JavaScript 代码。这是 Bootstrap 中的一等 API，也应该是你的首选方式。

话又说回来，在某些情况下可能需要将此功能关闭。因此，我们还提供了关闭 data 属性 API 的方法，即解除以 data-api 为命名空间并绑定在文档上的事件。就像下面这样：

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

如需关闭一个特定的插件，只需要在 data-api 命名空间前加上该插件的名称作为命名空间即可，如下所示：

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

 

编程方式的 API

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

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

所有的方法都可以接受一个可选的选项对象作为参数，或者一个代表特定方法的字符串，或者不带任何参数（这种情况下，将会初始化插件为默认行为），如下所示：

// 初始化为默认行为

$("#myModal").modal()    

 // 初始化为不支持键盘               

$("#myModal").modal({ keyboard: false })  // 初始化并立即调用 show

$("#myModal").modal('show')                

每个插件在 Constructor 属性上也暴露了其原始的构造函数：$.fn.popover.Constructor。如果您想获取某个特定插件的实例，可以直接通过页面元素获取：

 $('[rel=popover]').data('popover').

 

避免命名空间冲突

某些时候 Bootstrap 插件可能需要与其他 UI 框架一起使用。在这种情况下，可能会发生命名空间冲突。如果不幸发生了这种情况，你可以通过调用插件的 .noConflict 方法恢复其原始值。

// 返回 $.fn.button 之前所赋的值

var bootstrapButton = $.fn.button.noConflict()

// 为 $().bootstrapBtn 赋予 Bootstrap 功能

$.fn.bootstrapBtn = bootstrapButton         

 

1.过渡效果（Transition）插件，淡入淡出

使用.fade的class

 

2.模态框（Modal）插件，弹出框

2.1基本模态框

触发button：data-toggle="modal"  data-target="#myModal"

模态框div：class="modal fade"  id="myModal"

aria-labelledby="myModalLabel"，该属性引用模态框的标题。

aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。

 

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

开始演示模态框

</button>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

    <div class="modal-content">模态框</div>

    </div>

</div>

2.2模态框结构

<div class="modal-dialog">

  <div class="modal-content">

    <div class="modal-header">

      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

      <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>

    </div>

    <div class="modal-body">在这里添加一些文本</div>

    <div class="modal-footer">

       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

       <button type="button" class="btn btn-primary">提交更改</button>

    </div>

  </div><!-- /.modal-content -->

</div><!-- /.modal-dialog -->

2.3选项

选项名称	类型/默认值	Data 属性名称	描述
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，则会加载其中的内容。如下面的实例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

2.4方法

下面是一些可与 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')

范例：

<script>

$(function() {

    $('#myModal').modal({

        keyboard: true

    })

});

</script>

2.5事件

下表列出了模态框中要用到事件。这些事件可在函数中当钩子使用。

事件	描述	实例
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 () {   // 执行一些动作...})

 

3.切换下拉菜单（Dropdown）

通过 data 属性：向链接或按钮添加 data-toggle="dropdown" 来切换下拉菜单，如下所示：

<div class="dropdown">

  <a data-toggle="dropdown" href="#">下拉菜单（Dropdown）触发器</a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    ...

  </ul></div>

 

如果您需要保持链接完整（在浏览器不启用 JavaScript 时有用），请使用 data-target 属性代替href="#"：

<div class="dropdown">

  <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">

    下拉菜单（Dropdown） <span class="caret"></span>

  </a>

  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

    ...

  </ul></div>

 

通过 JavaScript：通过 JavaScript 调用下拉菜单切换，请使用下面的方法：

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

 

4.滚动监听（Scrollspy）插件

向您想要监听的元素（通常是 body）添加 data-spy="scroll"和 data-target

为滚动时触发添加父<div>，有名为data-target的class或id

<body data-spy="scroll" data-target=".navbar-example">

<div class="navbar-example">

<ul class="nav nav-tabs">

...

</ul></div>

</body>

4.1事件

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

事件	描述	实例
activate.bs.scrollspy	每当一个新项目被滚动监听激活时，触发该事件。	$('#myScrollspy').on('activate.bs.scrollspy', function () {   // 执行一些动作...})

 

5.标签页（Tab）插件

5.1通过 data 属性：

<ul class="nav nav-tabs">

<li><a href="#identifier" data-toggle="tab">Home</a></li>

</ul>

通过 JavaScript：

$('#myTab a').click(function (e) {

  e.preventDefault()

  $(this).tab('show')

})

5.2淡入淡出效果

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

<div class="tab-content">

<div class="tab-pane fade in active" id="home">...</div>

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

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

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

</div>

5.3事件

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

事件	描述	实例
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 // 前一个激活的标签页})

 

6.提示工具（Tooltip）插件

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

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

 

6.1通过 data 属性：

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

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

通过 JavaScript：

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

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

 

6.2选项

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

选项名称	类型/默认值	Data 属性名称	描述
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	向指定元素追加提示工具。 实例： container: 'body'

 

6.3方法

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

方法	描述	实例
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')

 
6.4事件

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

事件	描述	实例
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 () {   // 执行一些动作...})

 

7.弹出框（Popover）插件

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

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

 

7.1通过 data 属性：

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

<a href="#" data-toggle="popover" title="Example popover">

请悬停在我的上面</a>

 

通过 JavaScript：

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

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

 

7.2选项

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

选项名称	类型/默认值	Data 属性名称	描述
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	延迟显示和隐藏弹出框的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay:{ show: 500, hide: 100 }
container	string | false 默认值：false	data-container	向指定元素追加弹出框。 实例： container: 'body'

 

7.3方法

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

方法	描述	实例
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')

 

7.4事件

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

事件	描述	实例
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 () {   // 执行一些动作...})

 

8.警告框（Alert）插件

8.1通过 data 属性：

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

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">

&times;</a>

 

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

$(".alert").alert()

 

8.2方法

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

方法	描述	实例
.alert()	该方法让所有的警告框都带有关闭功能。	$('#identifier').alert();
Close Method.alert('close')	关闭所有的警告框。	$('#identifier').alert('close');

 

8.3事件

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

事件	描述	实例
close.bs.alert	当调用 close 实例方法时立即触发该事件。	$('#myalert').bind('close.bs.alert', function () {   // 执行一些动作...})
closed.bs.alert	当警告框被关闭时触发该事件 （将等待 CSS 过渡效果完成）。	$('#myalert').bind('closed.bs.alert', function () { // 执行一些动作...})

 

9.按钮

9.1加载状态

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..." type="button"> 加载状态

</button>

<script>

    $(function() {

        $(".btn").click(function(){

            $(this).button('loading').delay(1000).queue(function() {

               $(this).button('reset');

               $(this).dequeue();

            });

        });

    });  

</script>

 

9.2单个切换

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

<button type="button" class="btn btn-primary" data-toggle="button"> 单个切换 </button>

 

9.3复选框

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

实例

<div class="btn-group" data-toggle="buttons">

   <label class="btn btn-primary"> <input type="checkbox"> 选项 1 </label>

   <label class="btn btn-primary"> <input type="checkbox"> 选项 2 </label>

   <label class="btn btn-primary"> <input type="checkbox"> 选项 3 </label>

 </div>

 

9.4单选按钮

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

实例

<div class="btn-group" data-toggle="buttons">

<label class="btn btn-primary"><input type="radio" name="options" id="option1">1 </label>

<label class="btn btn-primary"><input type="radio" name="options" id="option2">2 </label>

<label class="btn btn-primary"><input type="radio" name="options" id="option3">3 </label>

 </div>

 

9.5方法

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

方法	描述	实例
button('toggle')	切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。	$().button('toggle')
.button('loading')	当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。	$().button('loading')
.button('reset')	重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。	$().button('reset')
.button(string)	该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。	$().button(string)

 

10.折叠（Collapse）插件

10.1通过 data 属性：

向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。

请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

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

 

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

$('.collapse').collapse()

 

10.2创建可折叠的分组或折叠面板（accordion）

<div class="panel-group" id="accordion">

    <div class="panel panel-default">

        <div class="panel-heading">

            <h4 class="panel-title">

                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

                点击我进行展开，再次点击我进行折叠。第 1 部分

                </a>

            </h4>

        </div>

        <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.

            </div>

        </div>

</div>

<div class="panel panel-default"></div>......

</div>

 

10.2创建不带data-parent的简单的可折叠组件（collapsible），如下所示：

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">

    简单的可折叠组件

</button>    

<div id="demo" class="collapse in">

    Nihil anim keffiyeh helvetica, craft beer labore wes anderson

    cred nesciunt sapiente ea proident. Ad vegan excepteur butcher

    vice lomo.

</div>

 

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

Class	描述
.collapse	隐藏内容。
.collapse.in	显示内容。
.collapsing	当过渡效果开始时被添加，当过渡效果完成时被移除。

 

10.4选项

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

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

 

10.5方法

下面是一些折叠（Collapse）插件中有用的方法：

方法	描述	实例
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')

 

10.6事件

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

事件	描述	实例
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 () { // 执行一些动作...})

 

11.轮播（Carousel）插件

实例

<div id="myCarousel" class="carousel slide" data-ride="carousel">

    <!-- 轮播（Carousel）指标 -->

    <ol class="carousel-indicators">

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

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

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

    </ol>   

    <!-- 轮播（Carousel）项目 -->

    <div class="carousel-inner">

        <div class="item active">

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

        </div>

        <div class="item">

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

        </div>

        <div class="item">

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

        </div>

    </div>

    <!-- 轮播（Carousel）导航 -->

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹ </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">› </a>

</div>

 

11.1通过 data 属性：

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

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

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

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

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

$('.carousel').carousel()

 

11.2选项

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

选项名称	类型/默认值	Data 属性名称	描述
interval	number 默认值：5000	data-interval	自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环。
pause	string 默认值："hover"	data-pause	鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环。
wrap	boolean 默认值：true	data-wrap	轮播是否连续循环。

 

11.3方法

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

方法	描述	实例
.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')

 

11.4事件

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

事件	描述	实例
slide.bs.carousel	当调用 slide 实例方法时立即触发该事件。	$('#identifier').on('slide.bs.carousel', function () { // 执行一些动作...})
slid.bs.carousel	当轮播完成幻灯片过渡效果时触发该事件。	$('#identifier').on('slid.bs.carousel', function () { // 执行一些动作...})

 

12.附加导航（Affix）插件

附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。

12.1通过 data 属性：

如需向元素添加附加导航（Affix）行为，只需要向需要监听的元素添加 data-spy="affix"即可。

通过 JavaScript：您可以通过 JavaScript 手动为某个元素添加附加导航（Affix），如下所示：

$('#myAffix').affix({

   offset: {

 top: 100, bottom: function () {

return (this.bottom =

$('.bs-footer').outerHeight(true))

}

}})

 

12.2使用附加导航（Affix）插件，您都必须通过 CSS 定位内容。

附加导航（Affix）插件在三种 class 之间切换，每种 class 都呈现了特定的状态： .affix、.affix-top 和 .affix-bottom。

请按照下面的步骤，来为这三种状态设置您自己的 CSS（不依赖此插件）。

①在开始时，插件自己添加 .affix-top 来指示元素在它的最顶端位置。这个时候不需要任何的 CSS 定位。

②当滚动经过添加了附加导航（Affix）的元素时，应触发实际的附加导航（Affix）。此时 .affix 会替代 .affix-top，同时设置 position: fixed;（由 Bootstrap 的 CSS 代码提供，可以自己重置：

ul.nav-tabs.affix{

    top: 300px; /* Set the top position of pinned element */

}）。

③如果定义了底部偏移，当滚动到达该位置时，应把 .affix 替换为 .affix-bottom。由于偏移是可选的，假如设置了该偏移，则要求同时设置适当的 CSS。在这种情况下，请在必要的时候添加 position: absolute;。

 

12.3选项

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

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