boostrap插件

2022-11-01 11:05:14

第一章：模态弹出框

一、导入JavaScript插件

Bootstrap的JavaScript插件可以单独导入到页面中，也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库，所以不论是单独导入还一次性导入之前必须先导入jQuery库。

1.一次性导入：

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

具体使用如下：

<!—导入jQuery版本库，因为Bootstrap的JavaScript插件依赖于jQuery -->

<!—- 一次性导入所有Bootstrap的JavaScript插件（压缩版本） -->

2.单独导入：

为方便单独导入特效文件，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）

Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

☑ 调用统一编译的bootstrap.js；

☑ 调用单一的过渡动画的JavaScript插件文件transition.js。

transition.js文件为Bootstrap具有过渡动画效果的组件提供了动画过渡效果。不过需要注意的是，这些过渡动画都是采用CSS3来实现的，所以IE6-8浏览器是不具备这些过渡动画效果。

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

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

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

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

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

三、模态弹出框（Modals）

这一小节我们先来讲解一个“模态弹出框”，插件的源文件：modal.js。

样式代码：

☑ LESS版本：modals.less

☑ Sass版本：_modals.scss

☑ 编译后的Bootstrap：对应 bootstrap.css 文件第5375行～第5496行

在 Bootstrap 框架中把模态弹出框统一称为 Modal 。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框，弹出的框可能是一段文件描述，也可能带有按钮操作，也有可能弹出的是一张图片。

四、模态弹出框--结构分析

Bootstrap框架中的模态弹出框，分别运用了“modal”、“modal-dialog”和“modal-content”样式，而弹出窗真正的内容都放置在“modal-content”中，其主要又包括三个部分：

☑ 弹出框头部，一般使用“modal-header”表示，主要包括标题和关闭按钮

☑ 弹出框主体，一般使用“modal-body”表示，弹出框的主要内容

☑ 弹出框脚部，一般使用“modal-footer”表示，主要放置操作按钮

模态弹出窗的结构如下：

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

<p>模态弹出窗主体内容</p>

</div>

</div>

</div>

</div>

</div>

五、模态弹出框--实现原理解析（一）

实现原理解析：

bootstrap中的“模态弹出框”有以下几个特点：

1、模态弹出窗是固定在浏览器中的。

2、单击右侧全屏按钮，在全屏状态下，模态弹出窗宽度是自适应的，而且modal-dialog水平居中。

3、当浏览器视窗大于768px时，模态弹出窗的宽度为600px。

六、模态弹出框--实现原理解析（二）

蒙板样式实现：在做模态弹出窗时，底部常常会有一个透明的黑色蒙层效果。在Bootstrap框架中为模态弹出窗也添加了一个这样的蒙层样式“modal-backdrop”，只不过他默认情况下是全屏黑色的。

两种尺寸选择：除此之外，Bootstrap框架还为模态弹出窗提供了不同尺寸，一个是大尺寸样式“modal-lg”，另一个是小尺寸样式“modal-sm”。其结构上稍做调整：

<divclass="modal-dialog modal-lg">

<divclass="modal-content"> ... </div>

</div>

<divclass="modal fade bs-example-modal-sm"tabindex="-1"role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

<divclass="modal-dialog modal-sm">

<divclass="modal-content"> ... </div>

</div>

例如：

大的模态弹出窗

</button>

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

<p>模态弹出窗主体内容</p>

</div>

</div>

小的模态弹出窗

</button>

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

<p>模态弹出窗主体内容</p>

</div>

</div>

七、模态弹出框--触发模态弹出窗2种方法

众所周知，模态弹出窗在页面加载完成时，是被隐藏在页面中的，只有通过一定的动作（事件）才能触发模态弹出窗的显示。在Bootstrap框架中实现方法有2种，接下来分别来介绍这2种触发模态弹出窗的使用方法。

1.声明式触发方法：

方法一：模态弹出窗声明，只需要自定义两个必要的属性：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>

注意以下事项：

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

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

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

<a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >点击我会弹出模态弹出窗</a>

</div>

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

八、模态弹出框--为弹出框增加过度动画效果

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

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

小的模态弹出窗

</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

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

<p>模态弹出窗主体内容</p>

</div>

</div>

九、模态弹出框--模态弹出窗的使用（data-参数说明）

除了通过data-toggle和data-target来控制模态弹出窗之外，Bootstrap框架针对模态弹出框还提供了其他自定义data-属性，来控制模态弹出窗。比如说:是否有灰色背景modal-backdrop，是否可以按ESC键关闭模态弹出窗。有关于Modal弹出窗自定义属性相关说明如下所示：

十、模态弹出框--模态弹出窗的使用（JavaScript触发）

2.JavaScript触发方法：

除了使用自定义属性触发模态弹出框之外，还可以通过JavaScript方法来触发模态弹出窗。通过给一个元素一个事件，来触发。比如说给一个按钮一个单击事件，然后触发模态弹出窗。如下面的一个简单示例：

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

<p>模态弹出窗主体内容</p>

</div>

</div>

</div>

</div>

</div>

JavaScript触发的弹出窗代码：

$(function(){

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

$("#mymodal").modal();

});

十一、模态弹出框--JavaScript触发时的参数设置（一）

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

1.属性设置

模态弹出窗默认支持的自定义属性主要有：

比如你不想让用户按ESC键关闭模态弹出窗，你就可以这样做：

$(function(){

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

$("#mymodal").modal({

keyboard:false

});

十二、模态弹出框--JavaScript触发时的参数设置（二）

2.参数设置

在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：

参数	使用方法	描述
toggle	$(“#mymodal”).modal(“toggle”)	触发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示
show	$(“#mymodal”).modal(“show”)	触发时，显示模态弹出窗
hide	$(“#mymodal”).modal(“hide”)	触发时，关闭模态弹出窗

3.事件设置：

模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

事件类型	描述
show.bs.modal	在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性
shown.bs.modal	该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件
hide.bs.modal	在hide方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal	该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发

第二章：下拉菜单与滚动监视器

一、下拉菜单（Dropdown）

插件对应的源文件：dropdown.js(使用单独引入的方法可使用下面链接)

（官方发布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js）

样式代码：

☑ LESS版本：对应的源文件dropdowns.less

☑ Sass版本：对应的源文件_dropdowns.scss

☑ 编译后的Bootstrap版本：对应bootstrap.css文件第3122行～第3251行

在介绍Bootstrap的组件的时候，只介绍了下拉菜单的结构和表现形式（样式风格），在这一节中主要介绍怎么结合JavaScript代码实现交互效果。

和模态弹出窗一样，触发下拉菜单方式有两种，一种是属性声明式用法，另一种是JavaScript方法。

二、下拉菜单--属性声明式方法（一）

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

<a href="##" class="navbar-brand">W3cplus</a>

</ul>

</li>

</ul>

</div>

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

</ul>

</li>

</ul>

三、下拉菜单--属性声明式方法（二）

从上一节的两个示例，我们可以知道，用户只需要点击有向下三角形的按钮链接或者直接点击三角形就会弹出下拉菜单。实现这个效果，都是依赖于HTML相关元素自定义的属性完成。所以在编写HTML结构的时候必须满足下面的规则：

☑ 按照制作菜单的结构编写结构，如前面“下拉菜单”一节(5-21)所介绍

☑ 被点击的菜单项链接或按钮需要添加自定义属性 data-toggle="dropdown"

<a href="##" class="navbar-brand">W3cplus</a>

...

</ul>

</li>

</ul>

</div>

实现下拉菜单原理：

Dropdown插件加载时，对所有带有“data-toggle=dropdown”样式的元素绑定了事件，用户单击带有“data-toggle=dropdown”样式的链接或按钮时，会触发JavaScript事件代码。当用户点击带有“data-toggle=dropdown”样式的链接或按钮时，下拉菜单的父容器（上面的示例是 “<li class="dropdown">”）会添加一个open类名，此时下拉菜单显示；再次单击时，JavaScript会删除刚添加的open类名，此时下拉菜单将隐藏。

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

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

</div>

如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用data-target="#"来替代href="#"：

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

</div>

四、下拉菜单--JavaScript触发方法

和模态弹出窗一样，Bootstrap框架中的下拉菜单也支持JavaScript方法触发下拉菜单显示。使用JavaScript触发下拉菜单和声明式原理是基本类似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者样式。同样用一个简单的示例来做演示：

</ul>

</li>

</ul>

使用JavaScript调用dropdown()方法后，单击激活按钮，会弹出下拉菜单，再次单击的时候会收起下拉菜单。

$(function(){

$(".dropdown-toggle").dropdown();

})

还可以使用参数“toggle”。当下拉菜单隐藏时，调用dropdown(“toggle”)方法可以显示下拉菜单，反之，如果下拉菜单显示时，调用dropdown(“toggle”)方法可以让下拉菜单隐藏。

$(function(){

$(".dropdown-toggle").dropdown("toggle");

})

不过使用该参数，每次单击都要两次toggle，就会一直是一个不变的状态。所以，一般情况下，使用示例中不带参数的方法。就算你需要使用参数“toggle”，也建议使用jQuery的one方法：

$(".dropdown-toggle").one("click",function(){

$(this).dropdown("toggle");

})

五、滚动监控器

插件源文件：scrollspy.js

（官方发布引用地址：http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-scrollspy.js）

滚动监控器是Bootstrap提供的非常实用的JavaScript插件，被广泛应用到Web开发中。其表现形式是：

1、当用户鼠标滚动时，滚动条的位置会自动更新导航条中相应的导航项。

2、用户拖动滚动条，当滚动到@mdo时，上面的@mdo导航项就会高亮显示。

这是因为该插件可以自动检测滚动条到达哪个位置，然后在需要高亮的菜单元素上加了一个“active”样式。

六、滚动监控器--滚动监控器的设计

在Web页面中实现Bootstrap滚动监控器其实非常简单，接下来我们一步一步来看滚动监控器是如何设计的。

第一步：使用滚动监控器，首要的条件是在页面中加载对应的插件。在这里你可以加载合并好的bootstrap.js或者其独立的插件文件scrollspy.js。这里以加载合并好的js为例：

第二步：设计一个带有下拉菜单的导航条。分别为导航条和下拉菜单项定义一个锚点链接，锚点分别为“#blog”,“html”,“#css”,“#sass”,“#js”,“php”,“#about”。同时为导航条定义一个id值“navbar-menu”（id名称可*定义），方便滚动监控。

第三步：设计监控对象。这里将监控对象内容都放置在一个div名为scrollspy（这个类名可*定义）的容器中，其中放了多个子内容框。每个子内容框有一个标题，而且每个标题的ID值与导航菜单项中的锚点链接名相对应，并且注意加入“data-target="#navbar-menu"”属性（这个属性值要与前面的nav标签的id名称保持一致）

<h4 id="js">JavaScript</h4>

<h4 id="about">About</h4>

</div>

第四步：为监控对象定义样式，设置容器scrollspy大小（设置高度目的是为了产生垂直滚动条）。

.scrollspy{

height:500px;

font-size:20px;

overflow:auto;

}

七、滚动监控器--声明属性触发滚动监控

为监控对象设置被监控的data属性：data-spy="scroll"，指定监控的导航条：data-target="#navbar-menu"。同时定义监控过程中滚动条偏移位置data-offset="60"。代码如下：

…

</div>

现在浏览器中预览，则可以看到当滚动div.scrollspy的滚动条时，导航条会实时监控并更新当前被激活的菜单项。如果导航里有下拉菜单，并且滚动区域的内容到达下拉菜单子项所对应的区域，除了菜单高亮以外，子菜单的父元素dropdown也会高亮。

八、滚动监控器--在body中加监控

除了这种方法之外，还可以直接在body上进行滚动条监控，此时要将滚动监控器移到body上，而且导航nav一定要在body内部。如下所示：

</div>

</body>

注意：导航条必须设置为顶部固定样式（navbar-fixed-top）。

九、滚动监控器--JavaScript方法触发滚动监控器

在Bootstrap框架中，使用JavaScript方法触发滚动监控器相对来说较为简单，只需要指定两个容器的名称即可。比如下面的结构：

…

</nav>

…

</div>

JavaScript触发可以这样写：

$(function(){

$("#scrollspy").scrollspy({

target: "#navbar-menu"

});

})

Bootstrap的滚动监控还提供了一个方法scrollspy("refresh")。当滚动监控所作用的DOM有增加或删除页面元素的操作时，需要调用下面的refresh方法：

$(function(){

$("[data-spy='scroll']").each(function(){

var $spy=$(this).scrollspy("refresh");

})

需要注意的是，这种refresh方法只对声明式用法有效。另外滚动监控除了options参数“target”之外，还提供了一个offset参数，此参数默认值为10。默认情况下，滚动内容距离滚动容器10px以内的话，就高一片面前显示所对应的菜单项。

第三章：选项卡、提示框和弹出框

一、选项卡（Tabs）

插件源文件：tab.js

插件引用地址：

选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容。

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

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

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

二、选项卡--选项卡的结构

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

</ul>

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

关键一点，选项卡中链接的锚点要与对应的面板内容容器的ID相匹配。

在Bootstrap框架中选项卡nav-tabs已带有样式，前面在介绍导航一节中有详细介绍。而对于面板内容tab-pane都是隐藏的，只有当前面板内容才是显示的：

/*bootstrap.css文件第3758行～第3763行*/

.tab-content > .tab-pane {

display: none;

}

.tab-content > .active {

display: block;

}

三、选项卡--触发切换效果

同样的，选项卡也定义data属性来触发切换效果。当然前提你也要先加载bootstrap.js或者是tab.js。声明式触发选项卡需要满足以下几点要求：

1、选项卡导航链接中要设置 data-toggle="tab"

2、并且设置 data-target="对应内容面板的选择符(一般是ID)";

如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"

主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。

3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。

代码如下所示：

</ul>

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

四、选项卡--为选择卡添加fade样式

为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。

在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到。如下面的示例所示。

</ul>

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

五、选项卡--胶囊式选项卡（nav-pills）

在Bootstrap除了可以让 nav-tabs 具有选项卡的切换功能之外，还可以对胶囊式 nav-pills 导航也具有选项卡的功能。我们只需要将 nav-tabs 换成 nav-pills，另外关键一点是将 data-toggle="tab"换成data-toggle="pill"。

下面的示例是将上面的 nav-tabs 换成 nav-pills：

</ul>

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

插件源文件：tooltip.js

引用地址：

样式文件：

LESS版本：对应源文件 tooltips.less

Sass版本：对应源文件 _tooltips.scss

编译出来的Bootstrap：对应bootstrap.css文件第5497行～第5594行

提示框(tooltiip)效果也是Web常见的一种效果。当用户鼠标悬浮在“当天13:00”上面时，就会出现浅黄色的提示信息框，常常把这种效果称之为提示框。

八、提示框--结构

在Bootstrap框架中的提示框，结构非常简单，常常使用的是按钮<button>标签或者链接<a>标签来制作。不管是使用按钮还是链接来制作提示框，他们都有一个共性：

通过 title 属性的值来定义提示信息(也可以使用自定义属性 data-original-title 来设置提示信息)。

通过 data-placement 自定义属性来控制提示信息框的位置，根据四种不同的位置，data-placement具有四个值：top、right、bottom和left，分别表示提示框出现的位置在顶部、右边、底部和左边。

还有一个最重要的参数不可缺少，data-toggle="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>

需要特别注意的是：

1、如果同时设置了 data-original-title 和 title 定义提示信息，那么 data-original-title 的优先级要高于 title。只有 data-original-title 值为空时，才会取 title 的值做为提示信息的内容。

2、Bootstrap框架中的提示框的触发方式和前面介绍的插件略有不同。不能直接通过自定义的属性 data- 来触发。必须得依赖于JavaScript的代码触发。（所以右侧代码是没有动画效果的，不要着急，后面小节会有讲解。）

九、提示框--JS触发提示框方法

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

最简单的触发方式如下：

$(function(){

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

});

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

$(function(){

$('#myTooltip').tooltip({

title:"我是一个提示框，我在顶部出现",

placement:'top'

});

十、提示框--其他的自定义属性

除此之外，提示框还有其他的自定义属性，每个自定义属性都具自身存在的意义，如下表所示：

十一、提示框--JS设置参数方法

除了在 html 代码中使用 data- 设置提示框参数，还可以使用 JavaScript 来设置提示框参数，主要包括：

表格中的任何属性，在使用 JavaScript 触发提示框时，都可以被调用。

例子：

$(function(){

$('#myTooltip1').tooltip({

title:"我是一个提示框，我在顶部出现",

placement:"top"

});

</script>

十二、弹出框（Popover）

插件源文件：popover.js

引用地址：

样式文件：

☑ LESS版本：对应的源文件是 popovers.less

☑ Sass版本：对应的源文件是 _popovers.scss

☑ 编译后的Bootstrap：对应bootstrap.css文件第5595行～第5714行

弹出框(Popover)仅从外表上看，和前面介绍的提示框（Tooltip）长得差不多。

不同的是：弹出框除了有标题 title 以外还增加了内容 content 部分。这个在提示框中是没有的。而对于两者有何区别呢？稍后我们会介绍，先来了解如何制作Bootstrap框架中的弹出框。

十三、弹出框--弹出框的结构

简单回忆一下，在制作提示框（tooltip）时，可以使用<button>或者<a>标签元素，而且通过 data- 属性来声明提示框的信息，如下所示：

<button type="button"

class="btnbtn-default"

data-toggle="tooltip"

data-placement="left"

data-original-title="我是一个提示框tooltip">

鼠标移上来

</button>

而弹出框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脚本。

最简单的触发方式如下：

html代码：

<button type="button"

class="btn btn-default"

data-toggle="popover"

data-placement="left"

title="提示框居左"

data-content="我是弹出框的内容">

猛击我吧

</button>

js代码：

$(function(){

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

});

注意：上面这种方法注意要使用 data- 设置弹出框的属性。

使用JS设置参数：

html代码：

<button type="button"

class="btn btn-default"

id="myPopover">

猛击我吧

</button>

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

$(function(){

$('#myPopover').popover({

title:"我是弹出框的标题",

content:"我是弹出框的内容",

placement:"top"

});

十五、弹出框--自定义结构属性

同样在弹出框制作时，可以在HTML中定义下表所列的自定义属性：

举例：

<button type="button"

class="btn btn-default"

data-toggle="popover"

data-placement="bottom"

title="提示框居左"

data-content="我是弹出框的内容"

data-trigger="hover"

data-dalay="600">

猛击我吧

</button>

十六、弹出框--提示框和弹出框的异同

从之前的学习可知，弹出框中HTML自定义的 data 属性和提示框中的自定义的 data 属性基本相同，只不过在其基础上增加了一个 data-content 属性，用来设置弹出框的内容。其实两插件也有略微的不同：

提示框 tooltip 的默认触发事件是 hover 和 focus，而弹出框 popover 是 click

提示框 tooltip 只有一个内容(title)，而弹出框不仅可以设置标题（title）还可以设置内容(content)

两个插件的显示模板不同：

提示框tooltip的模板：

</div>

弹出框popover的模板：

</div>

第四章：警告框、按钮

一、警告框（Alert）

插件源文件：alert.js

引用地址：

http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-alert.min.js

样式文件：

LESS版本:源文件 alerts.less

Sass版本:源文件 _alerts.scss

编译后的Bootstrap文件：源文件bootstrap.css第4611行～第4685行。

二、警告框--结构与样式

相比之下，唯一不同的区别正如前面开头所言，警告框插件就是在“警示框组件”基础上添加了一个关闭的按钮，外形上就是一个X。所以其结构只需要在警示框组件的基础上添加一个按钮即可：

<buttonclass="close" type="button" >×</button>

恭喜您操作成功！

</div>

除此差别之外，警告框插件与警示框没有其他的区别。所以样式部分，在此不做过多阐述，大家可以回头看看第3章中有关于警示框的内容。

三、警告框--使用声明式触发警告框

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

<p>恭喜您操作成功！</p>

</div>

其实关闭按钮，不一定非要用X号，也可以是普通的按钮元素或者链接元素，只需要保证关闭元素带有自定义属性data-dismiss="alert"即可，如下面示例所示：

<p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>

</div>

当用户点击“关闭”按钮就可以关闭整个警告框。

前面两个示例，操作关闭按钮时都是先查找 data-target 属性，再查找 href 属性，如果关闭按钮都没有定义这两个属性，就会操作其父元素。也就是说，关闭按钮不在 div.alert 容器内时，只要给关闭元素定义了data-target属性（如果是链接元素还可以通过href属性）,而且属性值与div.alert容器的id一致，关闭元素放在容器外也可以关闭警告框。来看一个简单的示例：

<p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>

</div>

四、警告框--JavaScript触发警告框

除了通过自定义data-dismiss="alert"属性来触发警告框关闭之外，还可以通过JavaScript方法。只需要在关闭按钮上绑定一个事件。如下所示：

html代码:

<p>请确认您转账的信息是你的亲朋好友，不要轻意相信不认识的人...</p>

</div>

通过下面的JavaScript代码来触发：

$(function(){

$("#close").on("click",function(){

$(this).alert("close");

});

五、按钮插件（Button）

插件源文件：button.js

引用地址：

样式文件：

☑ LESS版本：源文件buttons.less

☑ Sass版本：源文件_buttons.scss

☑ 编译后的Bootstrap版本：对应bootstrap.css文件第2723行～第3082行

首先要说的是这一节，讨论的不是按钮组件的制作，前面我们专门花了一节的篇幅介绍了Bootstrap框架中的“按钮Buttons”的制作。在此处我们要讨论的是Bootstrap框架中的“按钮插件”。

大家在平时制作Web页面时，或多或少碰到过下列这些情形：

☑ 点击按钮时，按钮文字变为“正在加载…”，一旦加载完之后又变回“获取数据”。简单点说就是控制按钮状态，比如禁用状态、正在加载状态、正常状态等；

☑ 按钮切换状态

☑ 按钮模仿单选按钮

☑ 按钮模仿复选按钮

如何使用Bootstrap框架中的按钮，在此不做过多阐述，接下来的内容，主要和大家一起探讨Bootstrap框架中“按钮插件”的使用。

六、按钮插件--按钮加载状态

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

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

$(function(){

$("#loaddingBtn").click(function () {

$(this).button("loading");

});

七、按钮插件--模拟单选择按钮

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

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

<input type="radio" name="options" id="options1">男

</label>

<input type="radio" name="options" id="options2">女

</label>

<input type="radio" name="options" id="options3">未知

</label>

</div>

八、按钮插件--模拟复选按钮

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

<input type="checkbox" name="options" id="options1">电影

</label>

<input type="checkbox" name="options" id="options2">音乐

</label>

<input type="checkbox" name="options" id="options3">游戏

</label>

<input type="checkbox" name="options" id="options4">摄影

</label>

</div>

九、按钮插件--按钮状态切换

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

十、按钮插件--JavaScript用法

除了上面介绍的属性声明使用方法之外，按钮插件还可以通过调用button函数，然后给button函数传入具体的参数，实现不同的效果。而其中有两个参数是固定不变的，即toggle和reset。其他的都可以随意定义：

1、切换按钮状态（得到焦点）：

$("#mybutton").button("toggle")

2、重新恢复按钮：

$("#mybutton").button("reset")

如下代码：

$(function() {

$("#mybutton").click(function(){

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

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

});

3、任意参数：

$("#mybutton").button("任意字符参数名")

上面代码作用：替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值”。如下代码：

html:

js代码：

$(function() {

$("#mybutton").click(function(){

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

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

});

第五章：手风琴、图片轮换和固定定位

一、手风琴（Collapse）

插件源文件：collapse.js

引用地址：

Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果。点击标题，可以让其对应的内容显示或隐藏。

二、手风琴--手风琴结构

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

</div>

<div class="panel-body">标题一对应的内容</div>

</div>

</div>

<div class="panel-body">标题二对应的内容</div>

</div>

</div>

<div class="panel-body">标题三对应的内容</div>

</div>

简单点就是一个触发器和一个折叠区：

三、手风琴--声明式触发手风琴（一）

触发手风琴可以通过自定义的 data-toggle 属性来触发。其中data-toggle值设置为 collapse，data-target="#折叠区标识符"。接下来我们来看一个简单的示例：（六步）

第一步：设计一个面板组合，里面有三个折叠区：

</div>

第二步：给面板添加内容，每个面板包括两个部分，第一个是面板标题 panel-heading，并且在这里面添加标题 panel-title。第二个部分是面板内容，也就是折叠区，使用 panel-collapse 样式。

</div>