玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡
动画过渡(Transitions)
这一小节我们先来讲“动画过渡(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)的滑动和渐变效果”源代码例子。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导入JavaScript插件</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <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> </html>
转载于:https://www.cnblogs.com/jun1019/p/7828530.html
玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡相关推荐
- html 原生弹出框,html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果...
模态框: html部分: 弹出框 hhhhh 取消 确认 css部分: #box{ width: 80px; height: 40px; background: #fd7430; border:non ...
- bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的话 在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
- html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
- bootstrap js插件篇——提示框、弹出框、警告框
六.提示框.弹出框.警告框 6.1提示框 6.1.1基本结构 注: 1.提示框的触发方式和前面介绍的插件略有不同,不能直接通过自定义的属性 data- 来触发,必须得依赖于JavaScript的代码触 ...
- 常用的JS插件介绍:5、fancybox——弹出图片展示
一.官网: http://www.fancybox.net/ 文档: http://fancyapps.com/fancybox/#examples 注意:经测试该插件在jQuery2.0不能正常使用 ...
- JavaScript:原生js写的一个多按钮Popover 弹出框
效果如图 需求:点击按钮弹出,如果不进行其他操作则弹出层延时消失,点击另一个按钮时清楚其他弹窗 思路:先完成一个具有弹出层的按钮的样式,使用伪元素定位到按钮上方,加入定时器使其自动消失,当点击另一个按 ...
- html、css和js原生写一个模态弹出框,顺便解决父元素半透明子元素不透明效果...
模态框: html部分: <!-- 按钮 --><button id="box" onclick="pop_box()">弹出框< ...
- 玩转Bootstrap(JS插件篇)
模态弹出框 一次性导入: Bootstrap提供了一个单一的文件,这个文件包含了Bootstrap的所有JavaScript插件,即bootstrap.js(压缩版本:bootstrap.min.js ...
- 第二百四十六节,Bootstrap弹出框和警告框插件
Bootstrap弹出框和警告框插件 学习要点: 1.弹出框 2.警告框 本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件. 一.弹出框 弹出框即点击一个元素弹出一个包含标题和内容的 ...
最新文章
- [转]MySQL修改时区的方法小结
- Requirejs2.0笔记
- ADSL断流问题分析
- win7查看电脑ip地址的方法
- 导出合并小文件_关于微信语音导出,这个方法强烈建议~
- 盒马员工因工资单意外被同事看到,遭强制开除;微博被传大面积裁员、员工被要求主动离职,官方否认;豆瓣在截图中添加盲水印|雷峰早报...
- 面试官:你说对 MySQL 事务很熟?那我问你 10 个问题
- OpenDDS简单示例
- 【分享】“飞鹅打印机“ 在集简云平台集成应用的常见问题与解决方案
- MATLAB拟合函数
- orcad16.3下载
- 查看电脑安装的Office是32位还是64位的
- 计算机前沿讲座题目论文,计算机技术前沿讲座论文
- vue关于时间顺序排序
- FMM和BMM的python代码实现
- 查看linux服务器的品牌和型号
- pikachu RCE
- Linux系统性能监测工具——CPU
- 神气蹦蹦 - 我原创可爱游戏
- python opencv的函数cv2.LUT(src, lut, dst=None)的具体使用(LUT:查找表)