|
1.什么是bootstrap（重点）？ 框架:能够快速的实现项目需求 前端框架: Bootstrap JS框架: JQuery nodejs express...... 后端框架: ThinkPHP Laravel ci yii zf(zend framework) wordpress..., bootstrap框架: 是html+css的一款前端框架。 简洁、直观、强悍、(移动设备优先的前端开发框架)，让web开发更迅速、简单，使网页更加的美观。快速的适应不同的设备，手机，平板 电脑 pc 等等。 2.bootstrap的搭建（重点） 导入文件: <link rel="stylesheet" href="bs/css/bootstrap.min.css"> <script src="bs/js/jquery.min.js"></script> <script src="bs/js/bootstrap.min.js"></script> <script src="bs/js/holder.min.js"></script> 原理:通过元素的类名 可以调用导入的css文件样式 类名都是固定,(如果有多个类名，写在同一个class里)符合bootstrap的规范。 3.css样式 （1）栅格系统(重点): .row 行 .col-md-3 每个里面分为几列 .col-md-offset-1 偏移 .col-xs-6 手机移动端 防止列堆叠在一块 （2）排版： <1>标题标签:h .page-header 页面主体 p标签:.lead <2>强调: Small strong em code标签: <code></code> <small></small> <3>pre标签: <pre></pre> <4>文本对齐: .text-left .text-center .text-right <5>强调class (给div) .text-muted .text-primary .text-success .text-info .text-warning .text-danger <6>缩略语：abbr <7>地址:address <8>引用:blockquote <9>块对齐（漂浮）: .pull-left .pull-right 清除浮动:.clearfix (3)table标签（重点）: .table 具有表格形式 .table-striped 斑马条纹样式 .table-bordered 单元格的边框 .table-hover 鼠标悬浮 .table-condensed 表格紧缩 校验状态: .success .danger .warning (4)表单（重点）: .form-control 设置宽度为100% 校验状态 .has-sucess .has-error .has-warning (5)按钮样式（重点）: button|a|submit 颜色-> .btn-primary .btn-success .btn-info .btn-warning .btn-danger 大小-> .btn-xs .btn-sm .btn-lg (6)图片（重点）: .img-circle .img-rounded .img-thumbnail .img-responsive响应式 4.组件 5.JavaScript 插件（重点） 6.Ajax结合Jquery 城市级联（重点） 添加收货地址 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框</title> <link rel="stylesheet" type="text/css" href="./bs/css/bootstrap.min.css"> <script src="./bs/js/jquery.min.js"></script> <script src="./bs/js/bootstrap.min.js"></script> <script src="./bs/js/holder.min.js"></script> </head> <body> <div class="container"> <button class="btn btn-success" data-toggle="modal" data-target="#md">添加地址</button> <div id="md" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <!-- modal 头部--> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title text-center" id="myModalLabel">添加收货地址</h4> </div> <!-- modal body --> <div class="modal-body"> <form action="" method=""> <div class="form-group has-success"> <label>会员姓名</label> <!-- form-control 使表单宽度变为100%--> <input type="text" name="name" class="form-control" placeholder="请输入收货人姓名"> </div> <div class="form-group has-error"> <label>联系方式</label> <!-- form-control 使表单宽度变为100%--> <input type="text" name="phone" class="form-control" placeholder="请输入电话"> </div> <div class="form-group has-warning"> <label>收货地址</label> <!-- form-control 使表单宽度变为100%--> <select id="cid"> <option value="">--请选择--</option> </select> </div> <input type="submit" class="btn btn-success" value="提交"> </form> </div> <!-- modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div> </div> </body> <script type="text/javascript"> // alert(o); //第一级别数据获取 //Ajax请求 $.ajax({ 'type':'get',//请求的方式 'data':{upid:0},//附加参数 'async':true,//异步操作 'url':"01.php",//服务器端页面 'dataType':"json",//响应数据类型 //接受响应数据的匿名函数 success: function(data){ // alert(data); //遍历 for(var i=0;i<data.length;i++){ // alert(data[i].upid); //把遍历的数据 添加到option var info='<option value="'+data[i].id+'">'+data[i].name+'</option>'; // alert(info); //把带有数据的option 内部添加到第一个select $("#cid").append(info); } }, //Ajax 发送失败 error: function(){ alert("Ajax 响应失败"); } }); // change 文本区发生改变的时候 触发当前事件 $("select").live('change',function(){ // alert('ssss'); //获取父级id o=$(this); //清除 下一个所有的select //nextAll 清除当前元素之后所有同辈元素 o.nextAll("select").remove(); s=o.val(); // alert(s); $.ajax({ 'type':'get',//请求的方式 'data':{upid:s},//附加参数 'async':true,//异步操作 'url':"01.php",//服务器端页面 'dataType':"json",//响应数据类型 //接受响应数据的匿名函数 success: function(data){ // alert(data); //创建select select=$("<select></select>");//= JS document.createElement //内部插入option select.append($("<option value=''>--请选择--</option>")); //判断 if(data.length>0){ //遍历 for(var i=0;i<data.length;i++){ // alert(data[i].upid); //把遍历的数据 添加到option var info='<option value="'+data[i].id+'">'+data[i].name+'</option>'; // alert(info); //把带有数据的option 内部添加到创建select select.append(info); } //把创建好的select 外部插入到上一个select 后面 o.after(select); } }, //Ajax 发送失败 error: function(){ alert("Ajax 响应失败"); } }); }); //给button 绑定单击事件 $("button").click(function(){ //存储当前选中的数据 arr=[]; //遍历所有的select $("select").each(function(){ //获取选中的数据 m=$(this).find("option:selected").html(); // alert(m); arr.push(m); }); // alert(arr); //把选中的数据 arr 赋值给当前隐藏域 $("input[name='address']").val(arr); }); </script> </html> <?php // echo $_POST['name']; //获取upid $upid=isset($_GET['upid'])?$_GET['upid']:''; //连数据库 $pdo=new PDO("mysql:host=localhost;dbname=sss","root",""); //设置字符集 $pdo->exec("set names utf8"); //准备sql $sql="select * from district where upid={$upid}"; //执行 $list=$pdo->query($sql); //获取结果集 $info=$list->fetchAll(PDO::FETCH_ASSOC); //php 数据是不能直接在 js脚本里解析的 //将php数据转换为 json字符串 json_encode（json对象格式） echo json_encode($info); ?> |
|
|
