jQuery+Ajax+Bootstrap学习干货（二）

最新推荐文章于 2024-04-17 05:11:02 发布
最新推荐文章于 2024-04-17 05:11:02 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： javascript JavaScript知识点

 这里对jQuery中的一些实际运用的例子再进行讲解一下，然后再简单的说一下关于Ajax这个方面的应用，还有一个前端框架Bootstrap的使用！！！都比较基础，想了解的可以进行更深入的学习哦！！

jQuery的实例运用

（1）jQuery实现下拉列表选项

[html]  view plain  copy
  1. <title>下拉列表左右选择</title>  
  2.         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>  
  3.         <script>  
  4.             $(function(){  
  5.                 /*1.选中单击去右边*/  
  6.                 $("#selectOneToRight").click(function(){  
  7.                     $("#left option:selected").appendTo($("#right"));  
  8.                 });  
  9.                   
  10.                 /*2.单击全部去右边*/  
  11.                 $("#selectAllToRight").click(function(){  
  12.                     $("#left option").appendTo($("#right"));  
  13.                 });  
  14.                   
  15.                 /*3.选中双击去右边*/  
  16.                 $("#left option").dblclick(function(){  
  17.                     $("#left option:selected").appendTo($("#right"));  
  18.                 });  
  19.             });  
  20.         </script>  
[html]  view plain  copy
  1. <body>  
  2.         <table border="1" width="600" align="center">  
  3.             <tr>  
  4.                 <td>  
  5.                     分类名称  
  6.                 </td>  
  7.                 <td>  
  8.                     <input type="text" name="cname" value="手机数码"/>  
  9.                 </td>  
  10.             </tr>  
  11.             <tr>  
  12.                 <td>  
  13.                     分类描述  
  14.                 </td>  
  15.                 <td>  
  16.                     <textarea name="cdesc" rows="4" cols="20">手机数码类商品</textarea>  
  17.                 </td>  
  18.             </tr>  
  19.             <tr>  
  20.                 <td>  
  21.                     分类商品  
  22.                 </td>  
  23.                 <td>  
  24.                     <span style="float: left;">  
  25.                         <font color="green" face="宋体">已有商品</font><br/>  
  26.                         <select multiple="multiple" style="width: 100px;height: 200px;" id="left">  
  27.                             <option>IPhone6s</option>  
  28.                             <option>小米4</option>  
  29.                             <option>锤子T2</option>  
  30.                         </select>  
  31.                         <p><a href="#" style="padding-left: 20px;" id="selectOneToRight">>></a></p>  
  32.                         <p><a href="#" style="padding-left: 20px;" id="selectAllToRight">>>></a></p>  
  33.                     </span>  
  34.                     <span style="float: right;">  
  35.                         <font color="red" face="宋体">未有商品</font><br/>  
  36.                         <select multiple="multiple" style="width: 100px;height: 200px;" id="right">  
  37.                             <option>三星Note3</option>  
  38.                             <option>华为6s</option>  
  39.                         </select>  
  40.                         <p><a href="#" ><<</a></p>  
  41.                         <p><a href="#" ><<<</a></p>  
  42.                     </span>  
  43.                 </td>  
  44.             </tr>  
  45.             <tr>  
  46.                 <td colspan="2">  
  47.                     <input type='submit' value="修改"/>  
  48.                 </td>  
  49.             </tr>  
  50.         </table>  
  51.     </body>  

（2）jQuery实现表单验证（重要，这个需要掌握下规则）

   案例1：validate入门

[html]  view plain  copy
  1. <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>  
  2.         <!--validate.js是建立在jquery之上的，所以得先导入jquery的类库-->  
  3.         <script type="text/javascript" src="../../js/jquery.validate.min.js" ></script>  
  4.         <!--引入国际化js文件-->  
  5.         <script type="text/javascript" src="../../js/messages_zh.js" ></script>  
  6.         <script>  
  7.             $(function(){  
  8.                 $("#checkForm").validate({  
  9.                     rules:{  
  10.                         username:{  
  11.                             required:true,  
  12.                             minlength:6  
  13.                         },  
  14.                         password:{  
  15.                             required:true,  
  16.                             digits:true,  
  17.                             minlength:6  
  18.                         }  
  19.                     },  
  20.                     messages:{  
  21.                         username:{  
  22.                             required:"用户名不能为空!",  
  23.                             minlength:"用户名不得少于6位！"  
  24.                         },  
  25.                         password:{  
  26.                             required:"密码不能为空!",  
  27.                             digits:"密码必须是整数!",  
  28.                             minlength:"密码不得少于6位!"  
  29.                         }  
  30.                     }  
  31.                 });  
  32.             });  
  33.         </script>  
  34.           
  35.     </head>  
  36.     <body>  
  37.         <form action="#" id="checkForm">  
  38.             用户名：<input type="text" name="username" /><br />  
  39.             密码：<input type="password" name="password"/><br />  
  40.             <input type="submit"/>  
  41.         </form>  
  42.     </body>  

案例2：实现表单内容的验证（其中的出生日期和验证码没有进行验证，这两个需要特别的进行处理）

[html]  view plain  copy
  1. <script>  
  2.             $(function(){  
  3.                 $("#registForm").validate({  
  4.                     rules:{  
  5.                         user:{  
  6.                             required:true,  
  7.                             minlength:3  
  8.                         },  
  9.                         password:{  
  10.                             required:true,  
  11.                             digits:true,  
  12.                             minlength:6  
  13.                         },  
  14.                         repassword:{  
  15.                             required:true,  
  16.                             equalTo:"[name='password']"  
  17.                         },  
  18.                         email:{  
  19.                             required:true,  
  20.                             email:true  
  21.                         },  
  22.                         username:{  
  23.                             required:true,  
  24.                             maxlength:5  
  25.                         },  
  26.                         sex:{  
  27.                             required:true  
  28.                         }  
  29.                     },  
  30.                     messages:{  
  31.                         user:{  
  32.                             required:"用户名不能为空!",  
  33.                             minlength:"用户名不得少于3位!"  
  34.                         },  
  35.                         password:{  
  36.                             required:"密码不能为空!",  
  37.                             digits:"密码必须是整数!",  
  38.                             minlength:"密码不得少于6位!"  
  39.                         },  
  40.                         repassword:{  
  41.                             required:"确认密码不能为空!",  
  42.                             equalTo:"两次输入密码不一致!"  
  43.                         },  
  44.                         email:{  
  45.                             required:"邮箱不能为空!",  
  46.                             email:"邮箱格式不正确!"  
  47.                         },  
  48.                         username:{  
  49.                             required:"姓名不能为空!",  
  50.                             maxlength:"姓名不得多于5位!"  
  51.                         },  
  52.                         sex:{  
  53.                             required:"性别必须勾选!"  
  54.                         }  
  55.                     },  
  56.                     errorElement: "label", //用来创建错误提示信息标签,validate插件默认的就是label  
  57.                     success: function(label) { //验证成功后的执行的回调函数  
  58.                         //label指向上面那个错误提示信息标签label  
  59.                         label.text(" ") //清空错误提示消息  
  60.                             .addClass("success"); //加上自定义的success类  
  61.                     }  
  62.                 });  
  63.             });  
  64.         </script>  
[html]  view plain  copy
  1. <form action="#" method="get" id="registForm">  
  2.         <div id="father">  
  3.             <div id="form2">  
  4.                 <table border="0px" width="100%" height="100%" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">  
  5.                                 <tr>  
  6.                                     <td colspan="2" >  
  7.                                                     
  8.                                         <font size="5">会员注册</font>   USER REGISTER   
  9.                                     </td>  
  10.                                 </tr>  
  11.                                 <tr>  
  12.                                     <td width="180px">  
  13.                                                                                                                                          
  14.                                         <label for="user" >用户名</label>  
  15.                                     </td>  
  16.                                     <td>  
  17.                         <em style="color: red;">*</em>   <input type="text" name="user" size="35px" id="user"/>  
  18.                                     </td>  
  19.                                 </tr>  
  20.                                 <tr>  
  21.                                     <td>                                                                                        
  22.                                              
  23.                                         密码  
  24.                                     </td>  
  25.                                     <td>  
  26.                         <em style="color: red;">*</em>   <input type="password"  name="password" size="35px" id="password" />  
  27.                                     </td>  
  28.                                 </tr>  
  29.                                 <tr>  
  30.                                     <td>  
  31.                                                                                                                                      
  32.                                         确认密码  
  33.                                     </td>  
  34.                                     <td>  
  35.                         <em style="color: red;">*</em>   <input type="password" name="repassword" size="35px"/>  
  36.                                     </td>  
  37.                                 </tr>  
  38.                                 <tr>  
  39.                                     <td>  
  40.                                                 
  41.                                                 
  42.                                              
  43.                                         Email  
  44.                                     </td>  
  45.                                     <td>  
  46.                         <em style="color: red;">*</em>   <input type="text" name="email" size="35px" id="email"/>  
  47.                                     </td>  
  48.                                 </tr>  
  49.                                 <tr>  
  50.                                     <td>  
  51.      
  52.                                         姓名  
  53.                                     </td>  
  54.                                     <td>  
  55.                 <em style="color: red;">*</em>   <input type="text" name="username" size="35px"/>  
  56.                                     </td>  
  57.                                 </tr>  
  58.                                 <tr>  
  59.                                     <td>  
  60.                                                 
  61.                                                 
  62.                                              
  63.                                         性别  
  64.                                     </td>  
  65.                                     <td>  
  66.                         <span style="margin-right: 155px;">  
  67.                             <em style="color: red;">*</em>   <input type="radio" name="sex" value="男"/>男  
  68.                                 <input type="radio" name="sex" value="女"/>女<em></em>  
  69.                                 <label for="sex" class="error" style="display: none;"></label>  
  70.                                 </span>  
  71.                                           
  72.                                     </td>  
  73.                                 </tr>  
  74.                                 <tr>  
  75.                                     <td>  
  76. <span style="white-space:pre">  </span>         出生日期  
  77.                                     </td>  
  78.                                     <td>  
  79.                     <em style="color: red;">*</em>   <input type="text" name="birthday"  size="35px"/>  
  80.                                     </td>  
  81.                                 </tr>  
  82.                                 <tr>  
  83.                                     <td>  
  84.          
  85.                                         验证码  
  86.                                     </td>  
  87.                                     <td>  
  88.             <em style="color: red;">*</em>   <input type="text" name="yanzhengma" />  
  89.         <img src="../img/yanzhengma.png" style="height: 18px;width: 85px;"/>  
  90.                                     </td>  
  91.                                 </tr>  
  92.                                 <tr>  
  93.                                     <td colspan="2">                                                                                        
  94.                                 <input type="submit" value="注      册" height="50px"/>  
  95.                                     </td>  
  96.                                 </tr>  
  97.                             </table>  
  98.                         </div>  
  99.                     </div>  
  100.                 </form>  
Ajax知识点：

（1）：原生JS调用例子

[html]  view plain  copy
  1. <script type="text/javascript">   
  2. function fn1(){   
  3.     //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象   
  4.     var xmlHttp = new XMLHttpRequest();   
  5.     //2、绑定监听 ---- 监听服务器是否已经返回相应数据   
  6.     xmlHttp.onreadystatechange = function(){   
  7.         if(xmlHttp.readyState==4&&xmlHttp.status==200){   
  8.             //5、接受相应数据 var res = xmlHttp.responseText;   
  9.             document.getElementById("span1").innerHTML = res; }   
  10.         }   
  11.     //3、绑定地址   
  12.     xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);   
  13.     //true为异步 //4、发送请求 xmlHttp.send(); }   
  14.     function fn2(){   
  15.         //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象  
  16.         var xmlHttp = new XMLHttpRequest();   
  17.         //2、绑定监听 ---- 监听服务器是否已经返回相应数据   
  18.         xmlHttp.onreadystatechange = function(){  
  19.             if(xmlHttp.readyState==4&&xmlHttp.status==200){   
  20.                 //5、接受相应数据   
  21.                 var res = xmlHttp.responseText;   
  22.                 document.getElementById("span2").innerHTML = res; }   
  23.             }   
  24.         //3、绑定地址   
  25.         xmlHttp.open("POST","/WEB22/ajaxServlet",false);   
  26.         //false为同步   
  27.         //4、发送请求   
  28.         xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");   
  29.         xmlHttp.send("name=wangwu"); }   
  30.     </script>  
[html]  view plain  copy
  1. <body>  
  2.     <input type="button" value="异步访问服务器端" onclick="fn1()">  
  3.     <span id="span1"></span>  
  4.     <br>  
  5.     <input type="button" value="同步访问服务器端" onclick="fn2()">  
  6.     <span id="span2"></span>  
  7.     <br>  
  8.     <input type="button" value="测试按钮" onclick="alert()">  
  9. </body>  

原生的方法大概就是上面的五个步骤，然后可以看到异步和同步之间的区别，这是首先要明白的内容

（2）GET 和 POST 和 jQuery结合aJax进行的使用
[html]  view plain  copy
  1. <script type="text/javascript">   
  2.     function fn1(){   
  3.         //get异步访问  
  4.         $.get( "/WEB22/ajaxServlet2", //url地址   
  5.                 {"name":"张三","age":25}, //请求参数  
  6.                 function(data){ //执行成功后的回调函数 //{\"name\":\"tom\",\"age\":21}   
  7.                 alert(data.name); }, "json" ); }   
  8.     function fn2(){ //post异步访问   
  9.         $.post( "/WEB22/ajaxServlet2", //url地址   
  10.                 {"name":"李四","age":25}, //请求参数   
  11.                 function(data){ //执行成功后的回调函数   
  12.                     alert(data.name); }, "json" ); }   
  13.     function fn3(){   
  14.         $.ajax({   
  15.             url:"/WEB22/ajaxServlet2",   
  16.             async:true,   
  17.             type:"POST",   
  18.             data:{"name":"lucy","age":18},   
  19.             success:function(data){   
  20.                 alert(data.name);   
  21.                 },   
  22.                 error:function()  
  23.                 {   
  24.                     alert("请求失败");   
  25.                 },   
  26.                 dataType:"json"   
  27.                 });   
  28.         } </script>  

[html]  view plain  copy
  1. <body>  
  2.     <input type="button" value="get访问服务器端" onclick="fn1()">  
  3.     <span id="span1"></span>  
  4.     <br>  
  5.     <input type="button" value="post访问服务器端" onclick="fn2()">  
  6.     <span id="span2"></span>  
  7.     <br>  
  8.     <input type="button" value="ajax访问服务器端" onclick="fn3()">  
  9.     <span id="span2"></span>  
  10.     <br>  
  11. </body>  
  12. </html>  
（3）实例：用aJax使用360搜索的jsonp接口，然后当输入内容的时候，能够进行响应的反馈搜索内容（就是类似百度这样的）
[html]  view plain  copy
  1. <script type="text/javascript">  
  2.   
  3.     //实现一个简易版的搜索框事件  
  4.     $(function () {  
  5.         $('.inputkey').keyup(function() {  
  6.             var values = $('.inputkey').val();            
  7.             //用ajax请求公开的接口数据  
  8.             //该例子功能：通过360的一个搜索jsonp接口，然后当输入c的时候，获取360网页搜素框弹出来的内容  
  9.             $.ajax({  
  10.                 url:'http://sug.so.360.cn/suggest?',  
  11.                 type:'GET',  
  12.                 dataType:'jsonp',  
  13.                 data:{ word : values}           //这是设置一下关键字  
  14.             })  
  15.             //当请求成功执行下面：  
  16.             .done(function(data) {  
  17.                 $('.list').empty();  
  18.                 //将请求到的数据显示出来,jQuery知识中的添加节点  
  19.                 for(var i =0 ; i <data.s.length ; i++){  
  20.                     var $li = $('<li>'+data.s[i]+'</li>');  
  21.                     $li.appendTo($('.list'));  
  22.                 }  
  23.             })  
  24.             //请求失败执行下面：  
  25.             .fail(function() {  
  26.                 alert("fail");  
  27.             })  
  28.         })  
  29.     })  
  30. </script>  
[html]  view plain  copy
  1. <body>  
  2.     <input type="text" id ="inputkey" class="inputkey">  
  3.     <ul class="list" id="list">  
  4.     </ul>  
  5. </body>  

(4)Ajax提交form表单

[html]  view plain  copy
  1. <span style="font-size:14px;">$.post("<%=basePath%>customer/update.action",$("#edit_customer_form").serialize(),function(data){  
  2.                 alert("客户信息更新成功！");  
  3.                 window.location.reload();  
  4.             });</span>  
备注：参数1：访问地址

   参数2：需要传送的表单，并进行序列化

   参数3：访问成功后，返回处理函数

Bootstrap知识点：

（1）实例：响应式改变页面布局（随不同屏幕尺寸进行改变）

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>Bootstrap</title>  
  6. </head>  
  7. <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>  
  8. <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  9. <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link>  
  10. <style type="text/css">  
  11. body {  
  12.     background-color: #e8fcfd;  
  13. }  
  14.   
  15. .pic {  
  16.     max-width: 200px;  
  17.     border: 1px solid red;  
  18.     height: 200px;  
  19.     margin: 15px auto;  
  20.     background-color: yellow;  
  21. }  
  22.   
  23. .picture {  
  24.       
  25. }  
  26. </style>  
  27. <script type="text/javascript">  
  28.     $(function() {  
  29.         $('#dis').children().click(function() {  
  30.             alert($(this).index());  
  31.             return false;  
  32.         })  
  33.     })  
  34. </script>  
  35. <body>  
  36.     <div class="container">  
  37.         <div class="row" id="dis">  
  38.             <div class="col-log-3 col-md-4 col-sm-6">  
  39.                 <div class="pic" id="di">个人信息修改</div>  
  40.             </div>  
  41.             <div class="col-log-3 col-md-4 col-sm-6">  
  42.                 <div class="pic" id="di">密码修改</div>  
  43.             </div>  
  44.             <div class="col-log-3 col-md-4 col-sm-6">  
  45.                 <div class="pic" id="di">功能三</div>  
  46.             </div>  
  47.             <div class="col-log-3 col-md-4 col-sm-6">  
  48.                 <div class="pic" id="di">功能四</div>  
  49.             </div>  
  50.             <div class="col-log-3 col-md-4 col-sm-6">  
  51.                 <div class="pic" id="di">功能五</div>  
  52.             </div>  
  53.             <div class="col-log-3 col-md-4 col-sm-6">  
  54.                 <div class="pic" id="di">功能六</div>  
  55.             </div>  
  56.             <div class="col-log-3 col-md-4 col-sm-6">  
  57.                 <div class="pic" id="di">功能七</div>  
  58.             </div>  
  59.         </div>  
  60.     </div>  
  61. </body>  
  62. </html>  
总结：其中主要就是属性class ="container"  和class="col-log-N"   其中这个需要符合12的倍数才行，否则布局会存在问题。比如上面的例子，大家应该就能看出来关系。然后其中这个参数可以为col-lg-N    ,,col-md-N,,,,,,,,col-sm-N,,,,,col-xs-N  （含义就是对于不同的尺寸屏幕进行适配）

（2）关于Bootstrap中的主要内容，用下面的这个例子来进行演示，大家可以运行看看

[html]  view plain  copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <meta name="viewport" content="width=device-width , user-scalable=no , initial-scale=1.0   
  6.         ,maximum-scale=1.0, minimum-scale=1.0"  >  
  7. <title>Bootstrap</title>  
  8. </head>  
  9. <script type="text/javascript" src = "js/jquery-1.12.4.min.js"></script>  
  10. <script type="text/javascript" src = "js/bootstrap.min.js"></script>  
  11. <link rel="stylesheet" href = "css/bootstrap.min.css" type="text/css"></link>  
  12.   
  13.   
  14. <style type="text/css">  
  15.     hr{  
  16.     color: green;  
  17.     }  
  18.       
  19.     body{  
  20.      background-color: #e8fcfd;  
  21.     }  
  22.   
  23.     .pic{  
  24.         max-width: 200px;  
  25.         border: 1px solid red;  
  26.         height: 200px;  
  27.         margin: 15px auto;  
  28.         background-color: yellow;  
  29.     }  
  30.       
  31.     .navbar-default .navbar-nav>li>a {  
  32.     color: #ff0000;  
  33.     }  
  34.       
  35.     .fclass{  
  36.             width: 500px;  
  37.             background-color: #f5f5f5;  
  38.     }  
  39.     .zclass{  
  40.             width:20px;  
  41.             background-color: blue;  
  42.             text-align: center;  
  43.     }  
  44.     .val{color: white;}  
  45. </style>  
  46.   
  47. <script type="text/javascript">  
  48.     $(function () {  
  49.         $('#dis').children().click(function() {  
  50.             alert($(this).index());  
  51.             return false;  
  52.         })  
  53.           
  54.           
  55.         //JS控制模态框  
  56.         $('#btn1').click(function() {  
  57.             $('#modal01').modal('show');  
  58.         });  
  59.           
  60.           
  61.           
  62.         //进度条的控制  
  63.         var timer = null;  //计时器  
  64.         $('.fclass').click(function() {  
  65.             alert("开始加载，请稍后!");  
  66.             //每500毫秒一次  
  67.             timer = setInterval(jindutiaomove , 500);  
  68.             $('.fclass').unbind("click");//移除点击事件，防止多次点击  
  69.         })  
  70.         //进度条的控制  
  71.         function jindutiaomove() {  
  72.             //获取进度当前的数值  
  73.             var con = $('#val').text();  
  74.             //得到当前的进度  
  75.             var sub =parseInt(con.substring(0,con.length-1));  
  76.             //进度+1  
  77.             sub = sub + 1;  
  78.             //判断是否等于或超过100%,表示完成  
  79.             if(sub == 100){  
  80.                 //隐藏标签  
  81.                 $('.fclass').hide();  
  82.                 alert("加载成功");  
  83.                 //让进度条消失                  
  84.                 //定时器关闭  
  85.                 clearInterval(timer);             
  86.                 return ;  
  87.             }  
  88.             //否则设置显示内容  
  89.             $('#val').html(sub+"%");   
  90.             var wid = parseInt($('.zclass').width());  
  91.             //因为父div标签有500的宽  
  92.             wid = wid + 5;  
  93.             if(wid > 20){  
  94.                 //设置css内容，来表示进度条再变化  
  95.                 $('.zclass').css({width:wid});  
  96.             }         
  97.         }     
  98.     })  
  99. </script>  
  100.   
  101. <body>  
  102.     <!-- 巨幕效果 -->  
  103.     <div class="jumbotron">  
  104.         <div class="container">  
  105.             <h1>欢迎访问</h1>  
  106.             <p>欢迎正文</p>  
  107.         </div>  
  108.     </div>  
  109.   
  110.     <!-- 导航条的制作 -->  
  111.     <div class="navbar navbar-default navbar-static-top">  
  112.         <div class="container">  
  113.         <!-- 导航头 -->  
  114.             <div class="navbar-header">  
  115.                 <button class="navbar-toggle" data-toggle="collapse"  
  116.                     data-target="#togglemenu">  
  117.                     <span class="icon-bar"></span> <span class="icon-bar"></span> <span  
  118.                         class="icon-bar"></span>  
  119.                 </button>  
  120.                 <a href="#" class="navbar-brand">CSAPP</a>  
  121.             </div>  
  122.   
  123.             <!-- 制订导航栏菜单内容 -->  
  124.             <div class="collapse navbar-collapse" id="togglemenu">  
  125.                 <ul class="nav navbar-nav ">  
  126.                     <li class="active"><a href="#" class="changecolor">首页</a></li>  
  127.                     <li><a href="#" class="changecolor">个人信息修改</a></li>  
  128.                     <li><a href="#" class="changecolor">密码修改</a></li>  
  129.                     <li><a href="#" class="changecolor">其他功能1</a></li>  
  130.                     <li><a href="#" class="changecolor">其他功能2</a></li>  
  131.                     <li><a href="#" class="changecolor">其他功能3</a></li>  
  132.                     <li><a href="#" class="changecolor">其他功能4</a></li>  
  133.                     <li><a href="#">其他功能5</a></li>  
  134.                 </ul>  
  135.   
  136.                 <form class="navbar-form navbar-right">  
  137.                     <div class="form-group">  
  138.                         <div class="input-group">  
  139.                             <input type="text" name="" class="form-control"> <span  
  140.                                 class="input-group-btn">  
  141.                                 <button class="btn btn-default">  
  142.                                     <span class="glyphicon glyphicon-search"></span>  
  143.                                     搜索  
  144.                                 </button>  
  145.                             </span>  
  146.                         </div>  
  147.                     </div>  
  148.                 </form>  
  149.             </div>  
  150.         </div>  
  151.     </div>  
  152.   
  153.     <!--栅格系统 -->  
  154.     <div class="container">  
  155.         <div class="row" id="dis">  
  156.             <div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">个人信息修改</div></div>  
  157.             <div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">密码修改</div></div>  
  158.             <div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能三</div></div>  
  159.             <div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能四</div></div>  
  160.             <div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能五</div></div>  
  161.             <div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能六</div></div>  
  162.             <div class="col-log-3 col-md-4 col-sm-6" ><div class="pic" id="di">功能七</div></div>            
  163.         </div>      
  164.     </div>  
  165.       
  166.     <!-- 具有按钮的样式使用 -->  
  167.     <button class="btn btn-success">我是Button</button>  
  168.     <a class = "btn btn-warning" href="#">我是带有button效果的超链</a>  
  169.     <button class="btn btn-info btn-block">我是满屏的按钮</button>  
  170.     <button class="btn btn-danger btn-lg">我是变大的按钮</button>  
  171.     <button class="btn btn-danger btn-sm">我是中等的按钮</button>  
  172.     <button class="btn btn-danger btn-xs">我是最小的按钮</button>  
  173.       
  174.     <br>  
  175.     <hr>  
  176.     <!-- 按钮组的使用，就是将多个按钮设置为一组 ,也可以调整大小，通过btn-group-lg和sm和xs-->  
  177.     <div class="btn-group btn-group-sm">  
  178.     <button class="btn btn-info ">我是按钮1</button>  
  179.     <button class="btn btn-default ">我是按钮2</button>  
  180.     <button class="btn btn-danger ">我是按钮3</button>  
  181.     </div>  
  182.     <br>  
  183.     <hr>    
  184.     <!-- 占满屏的按钮组 -->  
  185.     <div class="btn-group btn-group-justified">  
  186.         <div class="btn-group">  
  187.             <button class="btn btn-info ">我是按钮1</button>  
  188.         </div>  
  189.         <div class="btn-group">  
  190.             <button class="btn btn-default ">我是按钮2</button>  
  191.         </div>  
  192.         <div class="btn-group">  
  193.             <button class="btn btn-danger ">我是按钮3</button>  
  194.         </div>  
  195.     </div>  
  196.   
  197.     <br><hr>  
  198.     <!-- 表单的样式 -->  
  199.     <form action="hello.html" method="post">  
  200.         <div class="form-group">  
  201.             <label for="exampleInputEmail1">Email address</label> <input  
  202.                 type="email" class="form-control" id="exampleInputEmail1"  
  203.                 placeholder="Email">  
  204.         </div>  
  205.         <div class="form-group">  
  206.             <label for="exampleInputPassword1">Password</label> <input  
  207.                 type="password" class="form-control" id="exampleInputPassword1"  
  208.                 placeholder="Password">  
  209.         </div>  
  210.         <div class="form-group">  
  211.             <label for="exampleInputFile">File input</label> <input type="file"  
  212.                 id="exampleInputFile">  
  213.             <p class="help-block">Example block-level help text here.</p>  
  214.         </div>  
  215.         <div class="checkbox">  
  216.             <label> <input type="checkbox"> Check me out  
  217.             </label>  
  218.         </div>  
  219.         <button type="submit" class="btn btn-default">Submit</button>  
  220.     </form>  
  221.       
  222.       
  223.     <br><br><hr style="color: black;">  
  224.     <!-- 按钮带图标 -->  
  225.     <button class="btn btn-success"><span class="glyphicon glyphicon-music"></span>音乐</button>  
  226.   
  227.     <!-- 多种模态框的使用 -->  
  228.     <div class="container">  
  229.         <h1>模态框</h1>  
  230.         <button class="btn btn-success" id="btn1">js控制弹出</button>  
  231.   
  232.         <button class="btn btn-primary" data-toggle="modal" data-target="#modal01">大摸态框</button>  
  233.   
  234.         <button class="btn btn-primary" data-toggle="modal" data-target="#modal02">一般摸态框</button>  
  235.   
  236.         <button class="btn btn-primary" data-toggle="modal" data-target="#modal03">小摸态框</button>  
  237.     </div>  
  238.       
  239.         <!--大模态框 -->  
  240.     <div class="modal fade" id="modal01">  
  241.         <div class="modal-dialog modal-lg"> <!-- 在这里设置大小就可以了 -->  
  242.             <div class="modal-content">  
  243.   
  244.                 <div class="modal-header">  
  245.                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>                 
  246.                     弹框的标题  
  247.                 </div>  
  248.   
  249.                 <div class="modal-body">  
  250.                     弹框主体<br><br>  
  251.                     主体文字  
  252.   
  253.                 </div>  
  254.   
  255.                 <div class="modal-footer">  
  256.                     <button class="btn btn-primary">确定</button>  
  257.                     <button class="btn btn-warning" data-dismiss="modal">取消</button>  
  258.                 </div>  
  259.             </div>  
  260.         </div>  
  261.     </div>  
  262.     <!--中等模态框 -->  
  263.     <div class="modal fade" id="modal02">  
  264.         <div class="modal-dialog">  
  265.             <div class="modal-content">  
  266.   
  267.                 <div class="modal-header">  
  268.                     弹框的标题  
  269.                 </div>  
  270.   
  271.                 <div class="modal-body">  
  272.                     弹框主体  
  273.                 </div>  
  274.   
  275.                 <div class="modal-footer">  
  276.                     <button class="btn btn-primary">确定</button>  
  277.                     <button class="btn btn-warning" data-dismiss="modal">取消</button>  
  278.                 </div>  
  279.   
  280.             </div>  
  281.         </div>  
  282.     </div>  
  283.   
  284.     <!-- 小模态框 -->  
  285.     <div class="modal fade" id="modal03">  
  286.         <div class="modal-dialog modal-sm">  
  287.             <div class="modal-content">  
  288.   
  289.                 <div class="modal-header">  
  290.                     弹框的标题  
  291.                 </div>  
  292.   
  293.                 <div class="modal-body">  
  294.                     弹框主体  
  295.                 </div>  
  296.   
  297.                 <div class="modal-footer">  
  298.                     <button class="btn btn-primary">确定</button>  
  299.                     <button class="btn btn-warning" data-dismiss="modal">取消</button>  
  300.                 </div>  
  301.   
  302.             </div>  
  303.         </div>  
  304.     </div>  
  305.       
  306.     <!-- 自己用jquery写的进度条 -->  
  307.     <div class ="fclass">  
  308.         <div class="zclass">  
  309.             <p id="val" class ="val">0%</p>           
  310.         </div>  
  311.     </div>  
  312.   
  313.     <!-- Bootstrop自带的进度条 (静态的，自己可以根据我上面写的进行变化就可以了)-->  
  314.     <div class="progress">  
  315.         <div class="progress-bar progress-bar-striped active"  
  316.             role="progressbar" aria-valuenow="45" aria-valuemin="0"  
  317.             aria-valuemax="100" style="width: 45%">  
  318.             <span class="sr-only">45% Complete</span>  
  319.         </div>  
  320.     </div>  
  321. </body>  
  322. </html>  

大家如果对Bootstrap中的内容很感兴趣，可以直接百度Bootstrap中文网官网，里面有很多的例子，可以进行参考

（3）会持续进行更新哦！！！！！！！！！
Alvin_扣扣953821815
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5期末大作业：基于html+css+javascript+jquery+bootstarp响应式图书电商HTML模板网上书店(25页)
qq_38515380的博客
04-07 71
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
Springboot+SSM+security+ajax+bootstrap+jquery+mysql
06-17
【标题】"Springboot+SSM+security+ajax+bootstrap+jquery+mysql"是一个综合性的Java Web项目，它集成了多种技术以构建高效、现代化的Web应用。此项目的核心是Spring Boot框架，它简化了Spring应用程序的初始设置和...
JQuery & HTML5 & Bootstrap
weixin_44705725的博客
07-01 378
一、 JQuery概述&工厂函数 什么是JQuery？ 快速简洁的第三方js库，JQuery的核心理念是write less,do more 工厂函数 二、JQuery增删改查 2.内容 3.样式 4.添加 2.删除 $("...").remove() 三、JQuery事件 1.事件绑定 五、HTML5 音频audio(支持mp3,wav,ogg) <audio s...
Ajax的实例以及bootstrap的使用
weixin_67235801的博客
05-04 3590
省市联动与分页面板
Ajax和Bootstrap
qq_46214241的博客
03-16 1636
此文章是平时上课的一些笔记，希望能帮上各位。
Bootstrap进度条与AJAX后端数据传递结合使用_bootstrap进度条怎么和后端交互的(1)
2401_83947353的博客
04-17 222
控制器Controller。
基于jQuery+bootstrap的评论回复代码
03-17
**二、Bootstrap简介** Bootstrap是由Twitter开发的开源前端框架，它提供了响应式布局、移动设备优先的Web设计方法，包含一系列预先设计的CSS和JavaScript组件，如导航栏、按钮、表单、模态框等，帮助开发者快速构建...
HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip
06-04
本文将深入探讨这些技术，并基于"HTML+CSS+JavaScript+jQuery+Bootstrap等前端框架实现的前端案例.zip"这个压缩包中的webdemo-master项目...通过学习和研究这个示例，开发者可以加深对前端开发的理解，提升自己的技能。
spring+jquery+bootstrap+mybatis
最新发布
07-11
完成图书管理和人员的相关操作，适合初学者使用
jquery+bootstrap+layui前端框架三件套
08-03
本资源包含的"jQuery+Bootstrap+Layui"三件套是前端开发者常用的三大工具，分别针对JavaScript库、UI设计和组件化开发。 **jQuery：JavaScript的简化者** jQuery，版本1.9.1，是一个轻量级的JavaScript库，它的...
spring+spring-mvc+mybatis+bootstrap+ajax详细项目案例
04-24
spring+spring-mvc+mybatis+bootstrap+ajax详细项目案例
jQ和ajax+Bootstrap
兄弟我先抛块砖,有玉的尽管砸过来
03-24 699
一、AJAX 1.jQuery和ajax 1.1load 代码演示： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3...
如何用Jquery+BootStrap+Ajax实现异步加载整个Table页面
meghost990823的博客
11-26 697
【代码】如果Jquery+BootStrap+Ajax实现异步加载整个页面。
jQuery ajax bootstrap layui
kaiven_的博客
08-07 248
jQuery 概述： jQuery是一个快速、简洁的javaScript代码库。 jQuery设计宗旨是“Write less,do more”。 提供一种简便的javaScript操作方式。 优化HTML文档操作、事件处理、动画设计和Ajax交互。 总的来说jQuery是在javaScript的基础上，把很多JavaScript的操作封装起来，然后我们使用他封装好的语句。 具体使用方法： 我们需要在HTML页面引入一个jQuery.js文件，也可以是引用一个cdn（内容分发网络），引用的位置写在hea
ajax和bootstrap
zangshuge的博客
08-16 1847
1、ajax ajax是什么？Asynchronous Javascript And XML 实现网页的局部刷新 注册时候，显示用户名已经注册 如何使用？ ajax其实就是js中的一个对象 通过这个对象的一些方法就可以和服务器直接交互，服务端给ajax数据，然后通过js动态的将数据添加到网页中即可 ...
BootStrap 和JQuery 实现分页效果
vengu733的博客
07-22 1477
BootStrap 和JQuery 实现分页效果 基于Ajax 实现前后端分离 ，分别在两个服务器进行数据交互 ，前端框架BootStrap ,简端脚本框架JQuery 。 后端用servlet简单获取数据库数据 ，利用filter过滤器实现跨域请求。主要功能有 分页、多选框选择 新增 批量删除 更新 单个删除 分页： 多选：当前页面选择编号 为全选，下面选框都会打钩，取消全选，下面选框全不选，下面选框选满满多选会自动勾选，反之不选。 更新 ：点击更新显示用户基本信息，编号无法改变。 后端sevl
bootstrap ajax分页,Jquery+Ajax+Bootstrap Paginator实现分页的拼接
weixin_42181319的博客
08-05 239
效果图如下jsp页面引入bootstrap样式，jquery和bootstrap-paginator.jsjsp页面代码，页面两个div，一个用于拼接html，一个放分页按钮代码js代码：// 初始化页面getPageOfMemo(1);// 分页函数function getPageOfMemo(page) {// 获取请求参数(input里面的时间人员参数可忽略注释)var beginTime ...
You辉编程-BootStrap+jQuery快速上手
You辉编程的博客
09-16 875
bootstrap,jquery
jquery+bootstrap+html5 源码
09-03
jQuery是一个功能强大的JavaScript库，它简化了JavaScript在网页开发中的使用。jQuery提供了许多用于操作HTML元素、处理事件和动画效果、发送网络请求等常用操作的方法，使得开发者能够更高效地编写交互性的网页应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值