Loading... # 黑马视频 (7/11) ## BootStrap ----------- ### day05 BootStrap * 使用JQuery发送请求局部刷新页面 * 数据交换格式: * json * xml * 什么是JSON [JSON](http://baike.baidu.com/view/136475.htm)([JavaScript](http://baike.baidu.com/view/16168.htm) Object Notation) 是一种轻量级的数据交换格式。它基于[ECMAScript](http://baike.baidu.com/view/810176.htm)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括[C](http://baike.baidu.com/subview/10075/6770152.htm)、C++、[C#](http://baike.baidu.com/view/6590.htm)、[Java](http://baike.baidu.com/subview/29/12654100.htm)、JavaScript、[Perl](http://baike.baidu.com/view/46614.htm)、[Python](http://baike.baidu.com/view/21087.htm)等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。 - JSON格式 * JSON对象 ```json { key1:value} {"username":"zhangsan","password":"123"} ``` * JSON数组 ```json [{ key1:value},{ key1:value},{ key1:value}] ``` - 什么是响应式页面 - 适应不同的分辨率显示不同样式,提高用户的体验 * BootStrap的中文网 - http://www.bootcss.com - 下载BootStrap - BootStrap结构 - 全局CSS - bootStrap中已经定义好了一套CSS的样式表 - 组件 - BootStrap定义的一套按钮,导航条等组件 - JS插件 - BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果 * BootStrap的入门开发 ```html <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="../css/bootstrap.css" /> <!--需要引入JQuery--> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script type="text/javascript" src="../js/bootstrap.js" ></script> <meta name="viewport" content="width=device-width, initial-scale=1"> ``` - BootStrap的布局容器 `.container` 类用于固定宽度并支持响应式布局的容器。 ``` <div class="container"> ... </div> ``` `.container-fluid` 类用于 100% 宽度,占据全部视口(viewport)的容器。 ``` <div class="container-fluid"> ... </div> ``` - row Bootstrap 栅格系统的工作原理: - “ 行(row)”必须包含在 `.container` (固定宽度)或 `.container-fluid` (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。 - 通过“行(row)”在水平方向创建一组“列(column)”。 - 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。 - 类似 `.row` 和 `.col-xs-4` 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。 - 通过为“列(column)”设置 `padding` 属性,从而创建列与列之间的间隔(gutter)。通过为 `.row` 元素设置负值 `margin` 从而抵消掉为 `.container` 元素设置的 `padding`,也就间接为“行(row)”所包含的“列(column)”抵消掉了`padding` - BootStrap的栅格系统 - 响应式设计: 这种设计依赖于CSS3中的媒体查询 - 栅格样式: - 设备分辨率大于1200 使用lg样式 - 设备分辨率大于992 < 1200 使用md样式 - 设备分辨率大于768 < 992 使用sm样式 - 设备分辨率小于768使用xs样式 - BootStrap的全局CSS - 定义了一套CSS - 对页面中的元素进行定义 - 列表元素,表单,按钮,图片... - 栅格系统: - 将屏幕划分成12个格子,12列 - class='row' 当前是行 - 行里面放的是列 col-屏幕分辨率-数字 (每一种分辨率后的数字总和必须是等于12,如果超过12,另起一行) - col-lg-数字: 在超宽屏幕上使用 - col-md-数字: 在中等屏幕上,PC电脑 - col-sm-数字: 在平板电脑上 - col-xs-数字: 在手机上 * - 组件: 导航条 , 进度条, 字体 - javascript插件 : 轮播图 - 复制粘贴 - 什么是响应式: 会根据不同的分辨率去显示不同页面结构,提高用户体验 ```javascript <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="../css/bootstrap.css" /> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <script type="text/javascript" src="../js/bootstrap.js" ></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div class="container"> <!--logo 部分--> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-6"> <img src="../img/logo2.png"/> </div> <div class="col-md-4 hidden-sm hidden-xs"> <img src="../img/header.png" /> </div> <div class="col-md-4 col-sm-6 col-xs-6" style="line-height: 50px;"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <!--导航栏 部分--> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">首頁</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">手機數碼 <span class="sr-only">(current)</span></a> </li> <li> <a href="#">電腦辦公</a> </li> <li> <a href="#">鞋靴箱包</a> </li> <li> <a href="#">香煙酒水</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">全部分類 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li> <a href="#">手機數碼</a> </li> <li> <a href="#">電腦辦公</a> </li> <li> <a href="#">Something else here</a> </li> <li class="divider"></li> <li> <a href="#">Separated link</a> </li> <li class="divider"></li> <li> <a href="#">One more separated link</a> </li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <!--輪播圖 部分--> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> <li data-target="#carousel-example-generic" data-slide-to="3"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="../img/4.jpg" alt="..." style=""> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/5.jpg" alt="..." style=""> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/8.jpg" alt="..." style=""> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/1.jpg" alt="..." style=""> <div class="carousel-caption"> ... </div> </div> ... </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!--最新商品 部分--> <div class="row"> <div class="col-md-12"> <h3>最新商品<img src="../images/../img/title2.jpg" /></h3> </div> </div> <!--商品 部分--> <div class="row"> <!--左边大图--> <div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;"> <img src="../products/hao/big01.jpg" /> </div> <!--右边商品部分--> <div class="col-md-10"> <div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;"> <img src="../products/hao/middle01.jpg"/> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> </div> </div> <!--logo 部分--> <div class="row"> <div class="col-md-12"> <img src="../products/hao/ad.jpg" width="100%"/> </div> </div> <!--复制 部分--> <div class="row"> <!--左边大图--> <div class="col-md-2 hidden-sm hidden-xs" style="height: 480px;"> <img src="../products/hao/big01.jpg" /> </div> <!--右边商品部分--> <div class="col-md-10"> <div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;"> <img src="../products/hao/middle01.jpg"/> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> <div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center; height: 240px;"> <img src="../products/hao/small07.jpg" /> <p>盒子</p> <p style="color: red;">$299</p> </div> </div> </div> <!--footer 部分--> <div class="row"> <div class="col-md-12"> <img src="../img/footer.jpg" width="100%"/> </div> </div> <div class="col-md-12 " style="text-align: center;"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">法律声明</a> <a href="#">关于我们</a> <a href="#">关于我们</a> <a href="#">关于我们</a> </div> </div> </body> </html> ``` -------------- ```javascript <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> </style> <link rel="stylesheet" href="../css/laohuangli.css" /> <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script> <!-- 编程开发的过程遇到问题 达不到预期效果 1.检查自己代码 2.使用断点调试工具 javascript 3.百度 or 问同学 or 问同事 4.问老师 5.老师问总监 --> <script> $(function(){ //文档加载事件 //涉及到请求链接, 动态显示数据 var url = "http://127.0.0.1:8020/day05-bootStrap/data.json"; //ajax 最简单异步请求网络 // jsonArr 对应 url 返回的数据,是一个数组 $.get(url,function(jsonArr){ // console.log(jsonArr); // var obj = jsonArr[4]; // JSONObject var goodCount = Math.floor(Math.random()*3+3) // 随机数可能有小数,向上取整 while(goodCount > 0){ //取几条数据,决定循环几次 //随机去取一条数据 var index = Math.floor(Math.random()*jsonArr.length) ; //随机数和 数组长度相乘,求得当前要取出数据索引 var obj = jsonArr[index]; // 取出来数据 // 获取适合干什么的数据 $(".good ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.good+"</div></li>") goodCount--; } var badCount = Math.floor(Math.random()*3+2) // while(badCount > 0){ var index = Math.floor(Math.random()*jsonArr.length) var obj = jsonArr[index]; //获取不适合做什么的数据 $(".bad ul").append("<li><div class='name'>"+obj.name+"</div><div class='description'>"+obj.bad+"</div></li>") badCount--; } },"json"); }); </script> </head> <body> <div class="container"> <div class="title"> 程序员老黄历 </div> <div class="good"> <div class="title"> <table> <tr><td>宜</td></tr> </table> </div> <div class="content"> <ul> </ul> </div> <div class="clear"></div> </div> <div class="split"></div> <div class="bad"> <div class="title"> <table> <tr><td>不宜</td></tr> </table> </div> <div class="content"> <ul> </ul> </div> <div class="clear"></div> </div> </div> </body> </html> ``` 最后修改:2018 年 07 月 24 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 哇卡哇卡