整理关于Bootstrap过渡动画的慕课笔记


Posted in Javascript onMarch 29, 2017

整理自慕课笔记

动画过渡(Transitions): 源文件:transition.js

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

* 调用统一编译的bootstrap.js;
* 调用单一的过渡动画的JavaScript插件文件transition.js(右侧第29行引入Bootstrap上对外公布的transition.js的地址)。

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

默认情况之下,Bootstrap框架中以下组件使用了过渡动画效果:
* 模态弹出窗(Modal)的滑动和渐变效果;
* 选项卡(Tab)的渐变效果;
* 警告框(Alert)的渐变效果;
* 图片轮播(Carousel)的滑动效果。

下面举了一个“模态弹出窗(Modal)的滑动和渐变效果”源代码例子。

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

<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-modal.js"></script>
<script>
 $(function(){
 $(".btn").click(function(){
  $("#mymodal").modal("toggle");
 });
 });
</script>
</body>

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
浅谈javascript的调试
Jan 28 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
node.js实现博客小爬虫的实例代码
Oct 08 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
javascript异步编程的六种方式总结
May 17 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
Mar 29 #Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 #Javascript
jQuery插件之validation插件
Mar 29 #jQuery
Vue.js实现移动端短信验证码功能
Mar 29 #Javascript
Angular2入门--架构总览
Mar 29 #Javascript
整理关于Bootstrap表单的慕课笔记
Mar 29 #Javascript
AngularJS中$http的交互问题
Mar 29 #Javascript
You might like
9个PHP开发常用功能函数小结
2011/07/15 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
PHP实现发送邮件的方法(基于简单邮件发送类)
2015/12/17 PHP
Laravel用户授权系统的使用方法示例
2018/09/16 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
使两个iframe的高度与内容自适应,且相等
2006/11/20 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
Javascript中使用parseInt函数需要注意的问题
2015/04/02 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
2015/08/19 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
Vue项目中如何使用Axios封装http请求详解
2019/10/23 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python操作xml文件详细介绍
2014/06/09 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python实现二维数组输出为图片
2018/04/03 Python
Python实现的计算器功能示例
2018/04/26 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
Python XlsxWriter模块Chart类用法实例分析
2019/03/11 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
商场消防管理制度
2014/01/12 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
搞笑创意广告语
2014/03/17 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏