在bs3.X中，提供了12种JavaScript插件，分别是：动画过渡（Transition）、模态弹窗（Modal）、下拉菜单（Dropdown）、滚动侦测（Scrollspy）、选项卡（Tab）、提示 框（Tooltip）、弹出框（Popover）、警告框（Alert）、按钮（Button）、折叠（Collapse）、旋转轮播（Carousel）、定位浮标（Affix）。
由于各种加班,身心疲惫...
动画过渡
源文件：transition.js
使用的动画过渡效果全部使用了 CSS3的语法，所以IE6、IE7、IE8是不能用动画过渡效果。
默认带过渡效果的
源码
js源码
function transitionEnd() { ) var transEndEventNames = { WebkitTransition: , MozTransition: , OTransition: , transition: } for (var name in transEndEventNames) { if (el.style[name] !== undefined) { return { end: transEndEventNames[name] } } } }
transition.js部分源码通过以上代码判断是否支持动画过渡效果。
CSS源码
.fade { opacity: -webkit-transition: transition: opacity .15s linear; } .fade.in { opacity:} .modal.fade .modal-dialog { -webkit-transition: -moz-transition: -moz-transform .3s ease-out; -o-transition: -o-transform .3s ease-out; transition: transform .3s ease-out; -webkit-transform: -ms-transform: translate(0, -25%); transform: translate(0, -25%); } .modal.in .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }
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 Title This is body. 关闭保存
modal
js会控制在弹出modal之前，会加一个.modal-backdrop 用来设为灰色背景。
下拉菜单
源文件：dropdown.js
一般下拉菜单都是在导航条（navbar）和选项卡（tab）上实现。
实现原理：
使用：
使用data-target
启动下拉框启动下拉框菜单1菜单2
dropdown
滚动侦测
源文件：scrollspy.js
滚动侦测（ScrollSpy）插件是根据滚动的位置自动更新导航 条中相应的导航项
使用：
body上用data-spy
@fat@mdoDropdownonetwothree@fat具体内容@mdo具体内容one具体内容two具体内容three具体内容
data-spy
注意：
子菜单虽然会高亮，但不会打开，为了展示效果，需要手 动打开下拉菜单查看。
该插件所需要的导航条只能在拥有.nav样式的ul/li元素上起 作用
选项卡
源文件：tab.js
就像我们平时使用的Windows操作系统里的选项卡设置一样，单击一个选项，下面就显示对应的选项卡面板
使用：
homeconcactHomeconcact
nav-tabs
提示框
源文件：tooltip.js
鼠标移动到特定的元素上时，显示相关的提示语。类似于abbr的title功能，不过效果更加漂亮实用。
使用
相关文章
精彩导读
热门资讯
关注我们
