标签：control clear contract com .com 提示框 dismiss 显示 下拉菜单
在bs3.X中，提供了12种JavaScript插件，分别是：动画过渡（Transition）、模态弹窗（Modal）、下拉菜单（Dropdown）、滚动侦测（Scrollspy）、选项卡（Tab）、提示 框（Tooltip）、弹出框（Popover）、警告框（Alert）、按钮（Button）、折叠（Collapse）、旋转轮播（Carousel）、定位浮标（Affix）。
由于各种加班,身心疲惫...
动画过渡
源文件：transition.js
使用的动画过渡效果全部使用了 CSS3的语法，所以IE6、IE7、IE8是不能用动画过渡效果。
默认带过渡效果的
源码
js源码
transition.js部分源码通过以上代码判断是否支持动画过渡效果。
CSS源码
fade css
模态弹窗
源文件：modal.js
模态弹窗（也叫popup，Bootstrap里称为Modal）是绝大部分交互式网站都需要的一种功能，一般有以下几种用法：
使用
弹窗组件使用了3层 div容器元素，其分别应用了modal、modal-dialog、modalcontent样式。然后在真正的内容容器modal-content内包括了弹窗 的头（header）、内容（body）、尾（footer）3个部分，分别应用了3个样式：modal-header、modal-body、modal-footer。
使用data-target
modal
js会控制在弹出modal之前，会加一个.modal-backdrop 用来设为灰色背景。
下拉菜单
源文件：dropdown.js
一般下拉菜单都是在导航条（navbar）和选项卡（tab）上实现。
实现原理：
使用：
使用data-target
dropdown
滚动侦测
源文件：scrollspy.js
滚动侦测（ScrollSpy）插件是根据滚动的位置自动更新导航 条中相应的导航项
使用：
body上用data-spy
data-spy
注意：
子菜单虽然会高亮，但不会打开，为了展示效果，需要手 动打开下拉菜单查看。
该插件所需要的导航条只能在拥有.nav样式的ul/li元素上起 作用
选项卡
源文件：tab.js
就像我们平时使用的Windows操作系统里的选项卡设置一样，单击一个选项，下面就显示对应的选项卡面板
使用：
nav-tabs
提示框
源文件：tooltip.js
鼠标移动到特定的元素上时，显示相关的提示语。类似于abbr的title功能，不过效果更加漂亮实用。
使用
tooltip
弹出框
源文件：popover.js
弹出框其实就是一种特殊的提示框，相比来说只是多了一个title标题而已
使用
（弹出框插件的用法和提示框组件几乎一模一样），唯一不一样的就是插件名称以及多余的content字段。而关于自动初始化，也和提示框插件一样，需要手动初始化
popover
警告框
源文件：alert.js
就是在警告框组件的基础上，提供了 单击x号关闭警告框的功能
使用
alert
默认情况下，如果不设置data-target属性，则会关闭x号按钮元素所在的父元素容器，即外部的div元素。只需要保证设置了data-dismiss="alert"即可.
按钮
源文件：button.js
按钮插件提供了一组可以控制按钮多种状态的功能，比如，一个按钮有禁用状态、正在加载状态、正常状态等
使用
禁用状态在这里不再赘述。
正在加载和加载完成控制与显示
btn
折叠
源文件：collapse.js
当单击一个触发元素时，在另外一个可折叠区域进行显示（或隐藏），再次单击时可以反转显示状态。（经典的手风琴风格）
使用
|
1
2
3
|
<!-- 默认显示折叠区域--><a class="btn btn-danger" data-toggle="collapse" data-target="#demo">触发改变</a><div id="demo" class="collapse in">折叠区域...</div> |
|
1
2
3
|
<!-- 默认隐藏折叠区域--> <button class="btn btn-danger collapsed" data-toggle="collapse" data-target="#demo">按钮</button> <div id="demo" class="collapse ">折叠区域...</div> |
轮播
源文件：carousel.js
旋转轮播（Carousel）这个插件有很多种译法，有人叫轮播，有人叫传送带
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div data-ride="carousel" class="carousel slide" id="carousel-container"> <!-- 图片容器 --> <div class="carousel-inner"> <div class="item"> <img alt="第一张图" src="A" /> </div> <div class="item active"> <img alt="第二张图" src="B" /> </div> <div class="item"> <img alt="第三张图" src="C" /> </div> </div> <!-- 圆圈指示符 --> <ol class="carousel-indicators"> <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" class="active"></li> </ol> <!-- 左右控制按钮 --> <a data-slide="prev" href="#carousel-container" class="left carouselcontrol"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a data-slide="next" href="#carousel-container" class="right carouselcontrol"> <span class="glyphicon glyphicon-chevron-right"></span> </a></div> |
带有data-ride="carousel"的div就是轮播插件的容器，容器id为carousel-container，稍后会用到。
还有两个样式，其中carousel样式做样式容器，而slide样式和fade类似，用来定义轮播图片的时候是否有特效.
针对图片，轮播插件还提供了一个字幕说明样式（carousel-caption），紧接着img元素定义即可。示例如下
<div class="item active">
<img src="..." alt="..." />
<div class="carousel-caption">
<h3>标题</h3>
<p>描述...</p>
</div>
</div>
定位浮标
源文件：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像素）以后，就要开始继续滚动了.
标签：control clear contract com .com 提示框 dismiss 显示 下拉菜单
原文地址：http://www.cnblogs.com/zxz-zxz/p/6235345.html
