玩转Bootstrap（JS插件篇）

模态弹出框

一次性导入：

Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。

具体使用如下（或见右侧代码编辑器28-29行）：

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<!—- 一次性导入所有<
4000
span class="hljs-attribute">Bootstrap的JavaScript插件（压缩版本） -->
<script src="js/bootstrap.min.js"></script>
特别声明：jQuery版本库也可以加载你本地的jQuery版本。

单独导入：

为方便单独导入特效文件，Bootstrap V3.2中提供了12种JavaScript插件，他们分别是：

☑ 动画过渡（Transitions）:对应的插件文件“transition.js”

☑ 模态弹窗（Modal）:对应的插件文件“modal.js”

☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”

☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”

☑ 选项卡（Tab）：对应的插件文件“tab.js”

☑ 提示框（Tooltips）：对应的插件文件“tooltop.js”

☑ 弹出框（Popover）：对应的插件文件“popover.js”

☑ 警告框（Alert）：对应的插件文件“alert.js”

☑ 按钮（Buttons）：对应的插件文件“button.js”

☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”

☑ 图片轮播Carousel：对应的插件文件“carousel.js”

☑ 自动定位浮标Affix：对应的插件文件“affix.js”

上述单独插件的下载可到github去下载（https://github.com/twbs/bootstrap）。



（一）动画过渡（Transitions）

<button class="btn btn-primary" type="button">点击我</button>
<div class="modal fade" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</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 -->
</div><!-- /.modal -->

默认情况之下，Bootstrap框架中以下组件使用了过渡动画效果：

☑ 模态弹出窗（Modal）的滑动和渐变效果；

☑ 选项卡（Tab）的渐变效果；

☑ 警告框（Alert）的渐变效果；

☑ 图片轮播（Carousel）的滑动效果。

右侧举了一个“模态弹出窗（Modal）的滑动和渐变效果”源代码例子。

（二）模态弹出框–触发模态弹出窗2种方法

声明式触发方法：

方法一：模态弹出窗声明，只需要自定义两个必要的属性：data-toggle和data-target（bootstrap中声明式触发方法一般依赖于这些自定义的data-xxx 属性。比如data-toggle=”” 或者 data-dismiss=”“）。例如：

<!-- 触发模态弹出窗的元素 -->
<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>
<!-- 模态弹出窗 -->
<div class="modal fade" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态弹出窗内容 -->
</div>
</div>
</div>

注意以下事项：

1、data-toggle必须设置为modal(toggle中文翻译过来就是触发器)；

2、data-target可以设置为CSS的选择符，也可以设置为模态弹出窗的ID值，一般情况设置为模态弹出窗的ID值，因为ID值是唯一的值。

方法二：触发模态弹出窗也可以是一个链接元素，那么可以使用链接元素自带的href属性替代data-target属性，如：

<!-- 触发模态弹出窗的元素 -->
<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>
<!-- 模态弹出窗 -->
<div class="modal fade"  id="mymodal" >
<div class="modal-dialog" >
<div class="modal-content" >
<!-- 模态弹出窗内容 -->
</div>
</div>
</div>

不过建议还是使用统一使用data-target的方式来触发。

（三）模态弹出框–为弹出框增加过度动画效果

为模态弹出框增加过度动画效果：

可通过给“.modal”增加类名“fade”为模态弹出框增加一个过渡动画效果。

(四）模态弹出框–模态弹出窗的使用（data-参数说明）



（五）模态弹出框–模态弹出窗的使用（JavaScript触发）

<!-- 触发模态弹出窗元素 -->
<button class="btn btn-primary" type="button">点击我</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</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 -->
</div><!-- /.modal -->

JavaScript触发的弹出窗代码：

$(function(){
$(".btn").click(function(){
$("#mymodal").modal();
});
});

使用JavaScript触发模态弹出窗时，Bootstrap框架提供了一些设置，主要包括属性设置、参数设置和事件设置。







下拉菜单与滚动监视器

下拉菜单（Dropdown）

（一）下拉菜单–属性声明式方法（一）

属性声明式方法：

一般下拉菜单都是出现在导航条中，比如下图的一个效果，用户点击带有三角形的菜单项都会弹出下拉菜单项：

<div class="navbar navbar-default" id="navmenu">
<a href="##" class="navbar-brand">W3cplus</a>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">CSS3</a></li>
<li role="presentation"><a href="##">HTML5</a></li>
<li role="presentation"><a href="##">Sass</a></li>
</ul>
</li>
<li><a href="##">前端论坛</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>

除了这种导航条之外，在胶囊式导航中也具有下拉菜单，其结构如：

<ul class="nav nav-pills">
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">CSS3</a></li>
<li role="presentation"><a href="##">HTML5</a></li>
<li role="presentation"><a href="##">Sass</a></li>
</ul>
</li>
<li class="active"><a href="##">前端论坛</a></li>
<li><a href="##">关于我们</a></li>
</ul>

（二）下拉菜单–属性声明式方法（二)

简单的说，要制作下拉菜单，其结构基本如下：

<div class="dropdown">
<a data-toggle="dropdown" href="#">下拉菜单触发器</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"> ... </ul>
</div>

如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用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触发方法

<ul class="nav nav-pills">
<li class="dropdown">
<a href="##"  class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">CSS3</a></li>
<li role="presentation"><a href="##">HTML5</a></li>
<li role="presentation"><a href="##">Sass</a></li>
</ul>
</li>
<li class="active"><a href="##">前端论坛</a></li>
<li><a href="##">关于我们</a></li>
</ul>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<!--下面是代码任务区-->

<script>
$(function(){
$(".dropdown-toggle").dropdown();
})
</script>

选项卡、提示框和弹出框

Bootstrap框架中的选项卡主要有两部分内容组成：

选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）

底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示

（一）选项卡–选项卡的结构

一个选项卡主要包括两个部分，其一是菜单项，其二是内容面板。拿下面的示例来做演示。其HTML结构如下：

<!-- 选项卡组件（菜单项nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#bulletin" role="tab">公告</a></li>
<li><a href="#rule" role="tab">规则</a></li>
<li><a href="#forum" role="tab">论坛</a></li>
<li><a href="#security" role="tab">安全</a></li>
<li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 选项卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告内容面板</div>
<div class="tab-pane fade" id="rule">规则内容面板</div>
<div class="tab-pane fade" id="forum">论坛内容面板</div>
<div class="tab-pane fade" id="security">安全内容面板</div>
<div class="tab-pane fade" id="welfare">公益内容面板</div>
</div>

（二）选项卡–JavaScript触发方法

除了在HTML设置 data-toggle 来触发选项卡之外，还可以通过JavaScript直接调用。

调用方法:

在每个链接的单击事件中调用tab(“show”)方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的 data-toggle=”tab” 或 data-toggle=”pill” 的属性，然后通过下面的脚本来调用：

$(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})

（三）提示框(Tooltip)

<button type="button"
class="btnbtn-default"
data-toggle="tooltip"
data-placement="left"
data-original-title="提示框居左">
提示框居左
</button>
<button type="button"
class="btnbtn-default"
data-toggle="tooltip"
data-placement="top"
data-original-title="提示框在顶部">
提示框在顶部
</button>
<button type="button"
class="btnbtn-default"
data-toggle="tooltip"
data-placement="bottom"
data-original-title="提示框在底部">
提示框在底部
</button>
<button type="button"
class="btnbtn-default"
data-toggle="tooltip"
data-placement="right"
data-original-title="提示框居右">
提示框居右
</button>

提示框–JS触发提示框方法

Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。

最简单的触发方式如下：

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

除此之外，也可以单独指定一个元素，在该元素上调用提示框，并且可能通过JavaScript的各种参数来实现，无需定义一些 data 属性，如：

$(function(){
$('#myTooltip').tooltip({
title:"我是一个提示框，我在顶部出现",
placement:'top'
});
});

提示框–其他的自定义属性

提示框–JS设置参数方法

（四）弹出框（Popover）

弹出框(Popover)仅从外表上看，和前面介绍的提示框（Tooltip）长得差不多，不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click

而弹出框Popover和提示框tooltip相比，就多了一个content内容，那么在此使用 data-content 来定义弹出框中的内容。同样可以使用

<button>

或者

<a>

标签来制作，如下：

<button type="button"
class="btnbtn-default"
data-container="body"
data-placement="bottom"
data-toggle="popover"
data-original-title="Bootstrap弹出框标题"
data-content="Bootstrap弹出框的内容" >
猛击我吧
</button>
<a href="#" class="btnbtn-default"
data-container="body"
data-placement="right"
data-toggle="popover"
title="Bootstrap弹出框标题"
data-content="Bootstrap弹出框的内容">
猛击我吧
</a>

弹出框–触发弹出框的方法

Bootstrap框架中触发弹出框和提示框一样不能直接通过HTML的自定义data属性来触发。需要依赖于JavaScript脚本。

最简单的触发方式如下：

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

$(function(){
$('#myPopover').popover({
title:"我是弹出框的标题",
content:"我是弹出框的内容",
placement:"top"
});
});

弹出框–自定义结构属性

警示框和按钮

（一）警告框–结构与样式

警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮，外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可：

<div class="alert " role="alert">
<buttonclass="close" type="button" >×</button>
恭喜您操作成功！
</div>

（二）警告框–使用声明式触发警告框

如果通过自定义的HTML属性（声明式）来触发警告框，需要在关闭按钮上设置自定义属性data-dismiss=”alert”，如下所示：

<div class="alert alert-success" role="alert">
<button class="close"  data-dismiss="alert" type="button" >×</button>
<p>恭喜您操作成功！</p>
</div>

（三）警告框–JavaScript触发警告框

$(function(){
$("#close").on("click",function(){
$(this).alert("close");
});
});

（四）按钮插件–按钮加载状态

通过按钮可以设计状态提示，当单击按钮时，会显示loading状态信息。例如，点击“加载”按钮，会触发按钮的加载的状态。如下所示：

<button class="btnbtn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button>

通过data-loading-text属性定义加载的文本信息，然后通过JavaScript给按钮绑定一个事件，并给按钮添加一个button(“loading”)方法来激活按钮的加载状态行为。如下所示：

$(function(){
$("#loaddingBtn").click(function () {
$(this).button("loading");
});
});

（五）按钮插件–模拟单选择按钮

模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组。

在Bootstrap框架中按钮插件中，可以通过给按钮组自定义属性data-toggle=”buttons”，如下所示：

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="radio" name="options" id="options1">男
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options2">女
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="options3">未知
</label>
</div>

（六）按钮插件–模拟复选按钮

使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义data-toggle=”buttons”来实现。唯一不同的是，将input[type=”radio”]换成input[type=”checkbox”]，如下所示：

<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options1">电影
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options2">音乐
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options3">游戏
</label>
<label class="btn btn-primary">
<input type="checkbox" name="options" id="options4">摄影
</label>
</div>

（七）按钮插件–按钮状态切换

使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。例如，下面代码可以激活按钮行为特性，单击时将按钮激活，再单击可以让按钮恢复到默认状态：

<button type="button" data-toggle="button" class="btn btn-primary">确认</button>

手风琴（Collapse）

引用地址：

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-collapse.min.js"></script>

手风琴最关键的部分，就是每个标题对应有一个内容，在Bootstrap框架中将这两个部分组合起来称为一个panel页板，如右边效果所示，他就有三个panel面板，将这三个面板组合在一起，就是一个面板组合 panel-group，也就是手风琴的结构。如：

<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">标题一</a></h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">标题一对应的内容</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">标题二</a></h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">标题二对应的内容</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse"data-parent="#accordion"href="#collapseThree">标题三</a></h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">标题三对应的内容</div>
</div>
</div>
</div>

图片轮播（Carousel）

引用地址：

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-carousel.min.js"></script>

<div id="myCarousel" class="carousel slide">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="http://images3.c-ctrip.com/rk/201407/ll580x145.jpg" alt="">
<div class="carousel-caption">
<h4>标题一</h4>
<p>图片一内容简介</p>
</div>
</div>
<div class="item">
<img src="http://images3.c-ctrip.com/dj/201408/zj/zj_580145.jpg" alt="">
<div class="carousel-caption">
<h4>标题二/h4>
<p>图片二内容简介</p>
</div>
</div>
<div class="item">
<img src="http://images3.c-ctrip.com/rk/201403/yfdd580145a.png" alt="">
<div class="carousel-caption">
<h4>标题三</h4>
<p>图片三内容简介</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<script>
$('.carousel').carousel()
</script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

图片轮播–声明式触轮播图的播放

触发轮播图的播放方法也有两种，一种是声明式，另外一种是JavaScript方式。首先来看声明式方法。

声明式方法是通过定义 data 属性来实现，data 属性可以很容易地控制轮播的位置。其主要包括以下几种：

data-ride 属性：取值 carousel，并且将其定义在 carousel 上。

data-target 属性：取值 carousel 定义的 ID 名或者其他样式识别符，如前面示例所示，取值为“#slidershow”，并且将其定义在轮播图计数器的每个 li 上。

data-slide 属性：取值包括 prev，next，prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上，同时设置控制器 href 值为容器 carousel 的 ID 名或其他样式识别符。

data-slide-to 属性：用来传递某个帧的下标，比如 data-slide-to=”2”，可以直接跳转到这个指定的帧（下标从0开始计），同样定义在轮播图计数器的每个 li 上。

基于上例，设置了自定义的 data 属性之后如下：

<div id="slidershow" class="carousel" data-ride="carousel">
<!-- 设置图片轮播的顺序 -->
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0"></li>
<li data-target="#slidershow" data-slide-to="1"></li>
<li data-target="#slidershow" data-slide-to="2"></li>
<li data-target="#slidershow" data-slide-to="3"></li>
<li data-target="#slidershow" data-slide-to="4"></li>
<li data-target="#slidershow" data-slide-to="5"></li>
</ol>
<!-- 设置轮播图片 -->
<div class="carousel-inner">
…
</div>
<!-- 设置轮播图片控制器 -->
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
在这里需要注意可以为 #slidershow 层添加 slide 样式，使用图片与图片切换效果有平滑感。

<div id="slidershow" class="carousel slide" data-ride="carousel">
...
</div>

除了data-ride=”carousel”、data-slide、data-slide-to 以外，轮播组件还支持其他三个自定义属性：



如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
......
</div>

上面三个属性可以在容器元素上定义，也可以在标示符（或左右控制链接）上定义，但是后者定义的优先级比较高。

图片轮播–JavaScript触发方法

默认情况之下，如果 carousel 容器上定义了 data-ride=”carousel” 属性，页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性，可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下：

$(".carousel").carousel();

也可以通过容器的 ID 来指定：

$("#slidershow").carousel();

固定定位（Affix）

地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-affix.js

固定定位–声明式触发固定定位

Affix 插件可以对任何元素进行固定定位，其中比较简单的方法，就是通过自定义属性 data 来触发。其主要包括两个参数：

1、data-spy：取值 affix，表示元素固定不变的。

2、data-offset：整数值，比如 90，表示元素 top 和 bottom 的值都是 90px，其包括两种方式：data-offset-top 和 data-offset-bottom。

data-offset-top 用来设置元素距离顶部的距离。比如 90，表示元素距离顶部 90px，当用户从顶部向下拖动滚动条，当滚动的距离大于 90px 时，affix 元素不再滚动，就会固定在浏览器窗口顶部。

data-offset-bottom 刚好与 data-offset-top 相反。

具体使用如下：

<div data-spy="affix" data-offset="90">affix元素</div>

分开设置 data-offset 值方式：

<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>

<nav class="navbar navbar-default" role="navigation">
…
</nav>
<div class="container">
<div class="row">
<div class="col-md-3" id="sidebarMenu">
<ul class="navnav-pills nav-stacked" data-spy="affix" data-offset-top="20">
…
</ul>
</div>
<div class="col-md-9">
…
</div>
</div>
</div>

注意，在 body 要声明滚动监控。

<body data-spy="scroll" data-target="sidebarMenu">