3.WEB前端--BootStrap
作者：互联网
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>
标签：WEB,盒子,前端,BootStrap,299,var,Math,row 来源： https://blog.csdn.net/Lsc_hei/article/details/88185869