zoukankan      html  css  js  c++  java
  • 玩转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">&times;</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>
  • 相关阅读:
    20080531 Windows 下安装 Bugzilla
    20080823 windows + apache + mod_python 的安装
    20080519 在 Windows Server 2003 下安装 SQL Server 2000 提示“无法验证产品密钥”
    20080508 Borland CodeGear 卖了
    20080520 Javascript 随机数产生办法
    20090613 批量操作 Windows Live Mail 邮件的办法
    20080726 Castle项目创始人加入微软
    20080511 php send_mail()
    20080618 ASP.NET Ajax clientside framework failed to load
    20081105 Microsoft Word 2007 中鼠标操作失效的解决办法
  • 原文地址:https://www.cnblogs.com/jun1019/p/7828530.html
Copyright © 2011-2022 走看看