bbbb $(function () { $().tooltip() })

tooltip

 

弹出框

源文件：popover.js

弹出框其实就是一种特殊的提示框，相比来说只是多了一个title标题而已

 

使用

（弹出框插件的用法和提示框组件几乎一模一样），唯一不一样的就是插件名称以及多余的content字段。而关于自动初始化，也和提示框插件一样，需要手动初始化

bbbb

popover

 

警告框

源文件：alert.js

就是在警告框组件的基础上，提供了 单击x号关闭警告框的功能

 

使用

警告标题警告内容警告内容关闭

alert

 

默认情况下，如果不设置data-target属性，则会关闭x号按钮元素所在的父元素容器，即外部的div元素。只需要保证设置了data-dismiss="alert"即可.

 

按钮

源文件：button.js

按钮插件提供了一组可以控制按钮多种状态的功能，比如，一个按钮有禁用状态、正在加载状态、正常状态等

 

使用

禁用状态在这里不再赘述。

正在加载和加载完成控制与显示

提交 $('#aa').dblclick(function() { $('#aa').button('loading'); setTimeout(function () { $('#aa').button('complete'); }, 2000); }); $('#aa').click(function() { $('#aa').button('reset'); });

btn

 

 

折叠

源文件：collapse.js

当单击一个触发元素时，在另外一个可折叠区域进行显示（或隐藏），再次单击时可以反转显示状态。（经典的手风琴风格）

 

使用

<!-- 默认显示折叠区域--> <a data-toggle="collapse" data-target="#demo">触发改变</a> <div>折叠区域...</div>

<!-- 默认隐藏折叠区域--> <button data-toggle="collapse" data-target="#demo">按钮</button> <div>折叠区域...</div>

 

 

轮播

源文件：carousel.js

旋转轮播（Carousel）这个插件有很多种译法，有人叫轮播，有人叫传送带

<div data-ride="carousel"> <!-- 图片容器 --> <div> <div> <img alt="第一张图" src="A" /> </div> <div> <img alt="第二张图" src="B" /> </div> <div> <img alt="第三张图" src="C" /> </div> </div> <!-- 圆圈指示符 --> <ol> <li data-slide-to="0" data-target="#carousel-container"></li> <li data-slide-to="1" data-target="#carousel-container"></li> <li data-slide-to="2" data-target="#carousel-container"></li> </ol> <!-- 左右控制按钮 --> <a data-slide="prev" href="#carousel-container"> <span></span> </a> <a data-slide="next" href="#carousel-container"> <span></span> </a> </div>

带有data-ride="carousel"的div就是轮播插件的容器，容器id为carousel-container，稍后会用到。

还有两个样式，其中carousel样式做样式容器，而slide样式和fade类似，用来定义轮播图片的时候是否有特效.

 

针对图片，轮播插件还提供了一个字幕说明样式（carousel-caption），紧接着img元素定义即可。示例如下

标题描述...

 

定位浮标

源文件：affix.js

 

Affix的效果就像其官方网站左边的导航链接一样。

<!—或者分开设置offset -- >

<div data-spy="affix" data-offset-top="60" data-offset-bottom="100" >导航内容 </div>

<!—合并设置offset -- >

<div data-spy="affix" data-offset="60" >导航内容</div>

 

data-offset-top表示一个完整的新网页，从顶部向下拖动滚动条（也就是网页向上滚动）这个像素以后,

而data-offset-bottom则表示距离最底部还有多少距离（本例60像素）以后，就要开始继续滚动了.