WEB02_Day02(上)-jQuery动画实现、BootStrap

一、jQuery动画实现（续）

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>jQuery动画案例</title>
     <style type="text/css">
     /* 
     图片标签在加载图片以后，当没有设置宽和高时，图片实现收缩和展开
     仍然会向左上角进行收放，这个并不是错误，原因是图片有个特点：
     为了让图片不变形，在没有设置宽高时会进行等比例的缩放，
     所以也就导致了当先的效果
     */
     img {
         height: 400px;
         width: 1000px;
     }
     </style>
 ​
 </head>
 <body>
     <input type="button" value="隐藏">
     <input type="button" value="显示">
     <input type="button" value="切换一">
     <input type="button" value="淡出">
     <input type="button" value="淡入">
     <input type="button" value="切换二">
     <input type="button" value="收缩">
     <input type="button" value="展开">
     <input type="button" value="切换三">
     <input type="button" value="自定义动画">
     <hr>
     <img src="../img/1.jpg">
 ​
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         //隐藏
         $("input:eq(0)").click(function () {
             $("img").hide(2000);
         });
         //显示
         $("input:eq(1)").click(function () {
             $("img").show(2000);
         });
         //切换一
         $("input:eq(2)").click(function () {
             $("img").toggle(2000);
         });
         //淡出
         $("input:eq(3)").click(function () {
             $("img").fadeOut(2000);
         });
 ​
         //淡入
         $("input:eq(4)").click(function () {
             $("img").fadeIn(2000);
         });
         //切换二
         $("input:eq(5)").click(function () {
             $("img").fadeToggle(2000);
         });
         //收缩
         $("input:eq(6)").click(function () {
             $("img").slideUp(2000);
         });
         //展开
         $("input:eq(7)").click(function () {
             $("img").slideDown(2000);
         });
        
         //切换三
         $("input:eq(8)").click(function () {
             $("img").slideToggle(2000);
         });
         //自定义动画
         $("input:eq(9)").click(function () {
             //修改img图片标签的位置为相对定位，原因是方便设置动画移动的效果
             $("img").css("position","relative");
             $("img").animate({
                 "width" : "250px","height" : "100px"
             },2000).animate({
                 "top" : "200px"
             },2000).animate({
                 "left" : "300px"
             },2000).animate({
                 "top" : "0px"
             },2000).slideUp(2000,function () {
                 //动画执行完毕以后，删除img标签
                 $("img").remove();  
             })
         });
     </script>
 ​
 </body>
 </html>

 

二、Bootstrap

2.1 定义

　　Bootstrap是在2011年八月份在GitHub上发布的一款开源产品，该产品是由推特公司的马克奥托和雅各布·桑顿开发的。该软件是一款使用简单，开发便捷的一款软件，使用它可以进行快速开发Web应用程序和网站的一款前端框架，该框架内部是基于HTML、CSS、JavaScript、jQuery进行封装实现的。

2.2 优点

  • 开源

  • 使用简单

　　使用该框架对页面的元素添加相关样式和动态效果时，只需要给对应元素标签设置一个class值即可，不需要编写其他的任何代码，Bootstrap内部完成了特效和样式的封装工作。

  • 浏览器的支持范围广

主流的浏览器都支持

  • 可以实现响应式布局

Bootstrap可以对相关元素进行CSS样式布局，然后可以在不同的终端设备上进行自适应当前的尺寸所需要显示的区域和内容

2.3 下载Bootstrap的模板

　　在群文件中下载bootstrap-3.3.7-start压缩包，解压以后有两个文件夹，一个文件夹名字为bootstrap3，里面是包含一些css样式文件，js脚本文件以及字体图标设置等，另一个文件夹template里面的html页面是已经帮助同学们引入好了相关文件，只需要在html页面中书写相关代码即可。

http://doc.canglaoshi.org/

2.4 查看官方文档

组件

　　Bootstrap 自带了大量可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

全局 CSS 样式

　　Bootstrap 将设置全局的 CSS 样式。HTML 的基本元素均可以通过 class 设置样式并得到增强效果。还有先进的栅格系统。

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Bootstrap Template</title>
 <!--视口/视觉窗口标签:meta, 宽度=设备宽度，初始化缩放比例1， 是否允许用户缩放页面:no -->
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <!-- 扩展对低版本IE支持,开启IE兼容模式-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap核心css -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
 <!-- 字体图标 -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
 ​
 </head>
 ​
 ​
 <body>
     <form>
         <div class="form-group">
           <label for="exampleInputEmail1">Email address</label>
           <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
         </div>
         <div class="form-group">
           <label for="exampleInputPassword1">Password</label>
           <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
         </div>
         <div class="form-group">
           <label for="exampleInputFile">File input</label>
           <input type="file" id="exampleInputFile">
           <p class="help-block">Example block-level help text here.</p>
         </div>
         <div class="checkbox">
           <label>
             <input type="checkbox"> Check me out
           </label>
         </div>
         <button type="submit" class="btn btn-default">Submit</button>
       </form>
 </body>
 <!-- jQuery 1.12.4 依赖 -->
 <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
 <!-- Bootstrap核心js -->
 <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
 <!-- 图片占位，解决低版本IE不支持圆角的问题-->
 <script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
 <!-- 引入T5和C3的js函数库，支持旧版浏览器-->
 <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
 </html>

2.5 按钮案例

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Bootstrap Template</title>
 <!--视口/视觉窗口标签:meta, 宽度=设备宽度，初始化缩放比例1， 是否允许用户缩放页面:no -->
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <!-- 扩展对低版本IE支持,开启IE兼容模式-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap核心css -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
 <!-- 字体图标 -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
 </head>
 <body>
   <div>div1</div>
   <div class="well">div2</div>
   <!-- 按钮标签 四种 -->
   <h3>按钮标签   4种</h3>
   <input type="button" value="按钮" class="btn btn-default">
   <input type="submit" value="提交" class="btn btn-default">
   <a class="btn btn-default" href="#">链接</a>
   <button class="btn btn-default">提交</button>
   <!-- 按钮样式 -->
   <h3>按钮样式</h3>
   <button class="btn btn-default">默认</button>
   <button class="btn btn-primary">主要</button>
   <button class="btn btn-success">成功</button>
   <button class="btn btn-info">信息</button>
   <button class="btn btn-warning">警告</button>
   <button class="btn btn-danger">错误</button>
   <button class="btn btn-link">链接</button>
 ​
   <!-- 按钮尺寸 -->
   <h3>按钮尺寸</h3>
   <button class="btn btn-primary btn-lg">大按钮</button>
   <button class="btn btn-primary">标准按钮</button>
   <button class="btn btn-primary btn-sm">小按钮</button>
   <button class="btn btn-success btn-xs">超小按钮</button>
 ​
 </body>
 <!-- jQuery 1.12.4 依赖 -->
 <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
 <!-- Bootstrap核心js -->
 <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
 <!-- 图片占位，解决低版本IE不支持圆角的问题-->
 <script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
 <!-- 引入T5和C3的js函数库，支持旧版浏览器-->
 <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
 </html>

2.6 字体图标案例

　　如图所示，在学子商城首页中可以看到如下圈中的图标内容，这些并不是图片，而是字体图标，使用字体图标可以使页面内容更加丰富，用户的体验感更好。

字体图标的网站：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Bootstrap Template</title>
 <!--视口/视觉窗口标签:meta, 宽度=设备宽度，初始化缩放比例1， 是否允许用户缩放页面:no -->
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <!-- 扩展对低版本IE支持,开启IE兼容模式-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap核心css -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
 <!-- 字体图标 -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
 <style type="text/css">
     .r {
         color: red;
     }
     .g {
         color: silver;
     }
 </style>
 ​
 </head>
 <body>
      <!-- 
       字体图标的class属性值当前可以从FA中文网和Bootstrap中进行获取
       当前如果在某一个标签中使用了字体图标的样式，但是还想在双标签中添加中文的话
       建议大家不要在字体图标的双标签中进行添加文本内容，需要再单独设置一个标签
      -->
      <div class="text-center">
         <span class="fa fa-battery-empty r"></span>
         <span>电量</span><br>
      </div>
      <span class="fa fa-subway g"></span>
      <span>地铁</span><br>
      <div class="text-right">
         <span class="glyphicon glyphicon-film"></span>
         <span>视频文件</span>
      </div>
 ​
 </body>
 <!-- jQuery 1.12.4 依赖 -->
 <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
 <!-- Bootstrap核心js -->
 <script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script>
 <!-- 图片占位，解决低版本IE不支持圆角的问题-->
 <script type="text/javascript" src="../bootstrap3/js/holder.js"></script>
 <!-- 引入T5和C3的js函数库，支持旧版浏览器-->
 <script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script>
 <script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script>
 </html>

2.7 导航组件案例

Bootstrap->中文文档中->组件->导航

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Bootstrap Template</title>
 <!--视口/视觉窗口标签:meta, 宽度=设备宽度，初始化缩放比例1， 是否允许用户缩放页面:no -->
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
 <!-- 扩展对低版本IE支持,开启IE兼容模式-->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- Bootstrap核心css -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/css/bootstrap.css">
 <!-- 字体图标 -->
 <link rel="stylesheet" type="text/css" href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
 </head>
 <body>
     <!-- 组件->导航->标签页 -->
     <ul class="nav nav-tabs">
         <li role="presentation" class="active"><a href="#">首页</a></li>
         <li role="presentation"><a href="#">线上班(VIP)</a></li>
         <li role="presentation"><a href="#">我的课程</a></li>
     </ul>
 ​
     <!-- 组件->导航->胶囊式标签页 -->
     <ul class="nav nav-pills">
         <li role="presentation"><a href="#">2010</a></li>
         <li role="presentation"><a href="#">2011</a></li>
         <li role="presentation"><a href="#">2012</a></li>
         <li role="presentation"><a href="#">2101</a></li>
         <li role="presentation"><a href="#">2102</a></li>
         <li role="presentation" class="active"><a href="#">2103</a></li>
         <li role="presentation"><a href="#">2104</a></li>
         <li role="presentation"><a href="#">2105</a></li>
         <li role="presentation"><a href="#">2106</a></li>
         <li role="presentation"><a href="#">2107</a></li>
     </ul>
 ​
 ​
     <!-- 组件 -> 导航 -> 带下拉菜单的标签页-->
     <ul class="nav nav-tabs">
         
         <li role="presentation" class="dropdown">
           <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
             2103班级 <span class="caret"></span>
           </a>
           <ul class="dropdown-menu">
               <li>叶弈铭</li>
               <li>孟滕滕</li>
               <li>韦振康</li>
               <li>顾友鹏</li>
               <li>刘想</li>
 ​
           </ul>
         </li>
 ​
         <li role="presentation" class="dropdown">
             <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
               2107班级 <span class="caret"></span>
             </a>
             <ul class="dropdown-menu">
                 <li>张同学</li>
                 <li>李同学</li>
                 <li>赵同学</li>
                 <li>钱同学</li>
                 <li>孙同学</li>
   
             </ul>
           </li>
        
       </ul>
 </body>
 <!-- jQuery 1.12.4 依赖 -->
 <script type="text/javascript" src="../bootstrap3/jquery.min.js"></script>
 <!-- Bootstrap核心js --> 
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js"></script> 
<!-- 图片占位，解决低版本IE不支持圆角的问题--> 
<script type="text/javascript" src="../bootstrap3/js/holder.js"></script> 
<!-- 引入T5和C3的js函数库，支持旧版浏览器--> 
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js"></script> 
<script type="text/javascript" src="../bootstrap3/js/css3-mediaqueries.js"></script> 
<script type="text/javascript" src="../bootstrap3/js/respond.min.js"></script> 
​ 
<script type="text/javascript"> 
    $("li").click(function () { 
         $(this).attr("class","active"); 
         $(this).siblings().attr("class",""); 
    }); 
​ 
</script> 
</html>

 

posted @ 2021-08-27 09:05  Coder_Cui  阅读(49)  评论(0)  编辑  收藏  举报