黑马视频 （7/11）
BootStrap
day05 BootStrap
- 使用JQuery发送请求局部刷新页面
数据交换格式:
- json
- xml
- 什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。 - JSON格式
JSON对象
{ key1:value} {"username":"zhangsan","password":"123"}JSON数组
[{ key1:value},{ key1:value},{ key1:value}]什么是响应式页面
- 适应不同的分辨率显示不同样式,提高用户的体验
BootStrap的中文网
- 下载BootStrap
BootStrap结构
全局CSS
- bootStrap中已经定义好了一套CSS的样式表
- 组件
- BootStrap定义的一套按钮,导航条等组件
- JS插件
- BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果
BootStrap的入门开发
<!-- 最新版本的 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
- “ 行（row）”必须包含在
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插件 : 轮播图
- 复制粘贴
什么是响应式: 会根据不同的分辨率去显示不同页面结构,提高用户体验
<!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="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/5.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/8.jpg" alt="..."> <div class="carousel-caption"> ... </div> </div> <div class="item"> <img src="../img/1.jpg" alt="..."> <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>
<!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>
