整理关于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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
JS控制输入框内字符串长度
May 21 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
Aug 02 Javascript
JS中动态创建元素的三种方法总结(推荐)
Oct 20 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 Javascript
js动态生成表格(节点操作)
Jan 12 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
php 中英文语言转换类
2011/09/07 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
PHP获取本周第一天和最后一天示例代码
2014/02/24 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
禁止你的左键复制实用技巧
2013/01/04 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
微信小程序链接传参并跳转新页面
2016/11/29 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
微信小程序实现同时上传多张图片
2020/02/03 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
php使用递归与迭代实现快速排序示例
2014/01/23 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
Python中pass的作用与使用教程
2020/11/13 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
StubHub德国:购买和出售门票
2017/09/06 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
新员工培训个人的自我评价
2013/10/09 职场文书
临床专业自荐信
2014/06/22 职场文书
早读课迟到检讨书
2014/09/25 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js