玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-2 动画过渡
2023-09-27 14:25:06 时间
动画过渡(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>
相关文章
- Bootstrap 的模态框类
- 机器学习-有监督学习-集成学习方法(五):Bootstrap->Boosting(提升)方法->eXtremeGradientBoosting算法--+决策树-->XGBoost提升树
- .Net MVC&&datatables.js&&bootstrap做一个界面的CRUD有多简单
- Create Dynamic Modal Dialog Form in AdminLTE Bootstrap template
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类 [转]
- bootstrap -- 一个标签中,同时有 col-xs , col-sm , col-md , col-lg
- bootstrap easyUI 的选型
- BootStrap让两个控件在一行显示
- 玩转Bootstrap(JS插件篇)-第1章 模态弹出框 :1-3 模态弹出框
- Bootstrap 模态框(Modal)插件
- 关于BOOTSTRAP的整理和理解
- bootstrap+jquery+ajax跨域实现短信验证码登录
- node.js+express+socket.io+jquery+ajax+bootstrap搭建一个聊天室
- 【笔记】《Bootstrap实战》——第6章 单页营销网站
- JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化
- JS组件系列——再推荐一款好用的bootstrap-select组件,亲测还不错
- JS组件系列——自己动手封装bootstrap-treegrid组件
- JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐
- JS组件系列——不容错过的两款Bootstrap Icon图标选择组件
- JS组件系列——Bootstrap 树控件使用经验分享
- JS组件系列——两种bootstrap multiselect组件大比拼
- 解决bootstrap-table表头filter-control select控件被遮挡显示不全的问题
- JavaScript(JS) 移动端使用Bootstrap重写alert()和confirm()去掉关闭网页按钮
- Error: Bootstrap's JavaScript requires jQuery错误 boostrap下拉菜单无效Angular is running in the development
- JS组件系列——自己动手封装bootstrap-treegrid组件