Bootstrap:
1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
* 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
* 好处:
1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2. 响应式布局。
* 同一套页面可以兼容不同分辨率的设备。
2. 快速入门
1. 下载Bootstrap
2. 在项目中将这三个文件夹复制
3. 创建html页面,引入必要的资源文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>
响应式布局
* 同一套页面可以兼容不同分辨率的设备。
* 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
* 步骤:
1. 定义容器。相当于之前的table、
* 容器分类:
1. container:两边留白
2. container-fluid:每一种设备都是100%宽度
2. 定义行。相当于之前的tr 样式:row
3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
* 设备代号:
1. xs:超小屏幕 手机 (<768px):col-xs-12
2. sm:小屏幕 平板 (≥768px)
3. md:中等屏幕 桌面显示器 (≥992px)
4. lg:大屏幕 大桌面显示器 (≥1200px)
* 注意:
1. 一行中如果格子数目超过12,则超出部分自动换行。
2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。
CSS样式和JS插件
1. 全局CSS样式:
* 按钮:class="btn btn-default"
* 图片:
* class="img-responsive":图片在任意尺寸都占100%
* 图片形状
* <img src="..." alt="..." class="img-rounded">:方形
* <img src="..." alt="..." class="img-circle"> : 圆形
* <img src="..." alt="..." class="img-thumbnail"> :相框
* 表格
* table
* table-bordered
* table-hover
* 表单
* 给表单项添加:class="form-control"
2. 组件:
* 导航条
* 分页条
3. 插件:
* 轮播图
案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
<style>
.paddtop{
padding-top: 10px;
}
.search-btn{
float: left;
border:1px solid #ffc900;
width: 90px;
height: 35px;
background-color:#ffc900 ;
text-align: center;
line-height: 35px;
margin-top: 15px;
}
.search-input{
float: left;
border:2px solid #ffc900;
width: 400px;
height: 35px;
padding-left: 5px;
margin-top: 15px;
}
.jx{
border-bottom: 2px solid #ffc900;
padding: 5px;
}
.company{
height: 40px;
background-color: #ffc900;
text-align: center;
line-height:40px ;
font-size: 8px;
}
</style>
</head>
<body>
<!-- 1.页眉部分-->
<header class="container-fluid">
<div class="row">
<img src="img/top_banner.jpg" class="img-responsive">
</div>
<div class="row paddtop">
<div class="col-md-3">
<img src="img/logo.jpg" class="img-responsive">
</div>
<div class="col-md-5">
<input class="search-input" placeholder="请输入线路名称">
<a class="search-btn" href="#">搜索</a>
</div>
<div class="col-md-4">
<img src="img/hotel_tel.png" class="img-responsive">
</div>
</div>
<!--导航栏-->
<div class="row">
<nav class="navbar navbar-default">
<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" aria-expanded="false">
<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="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--轮播图-->
<div class="row">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner_1.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_3.jpg" alt="...">
</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>
</header>
<!-- 2.主体部分-->
<div class="container">
<div class="row jx">
<img src="img/icon_5.jpg">
<span>黑马精选</span>
</div>
<div class="row paddtop">
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row jx">
<img src="img/icon_6.jpg">
<span>国内游</span>
</div>
<div class="row paddtop">
<div class="col-md-4">
<img src="img/guonei_1.jpg">
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="img/jiangxuan_3.jpg" alt="">
<p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>
<font color="red">¥ 699</font>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 3.页脚部分-->
<footer class="container-fluid">
<div class="row">
<img src="img/footer_service.png" class="img-responsive">
</div>
<div class="row company">
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882
</div>
</footer>
</body>
</html>
常用函数:
属性prop() properties
如果传入一个参数 就是获取
prop("src","../img/1.jpg");
设置图片路径
attr : 操作一些自定义的属性
prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性
css() ; 修改css样式
addClass() : 添加一个class样式
removeClass() : 移除
blur : 绑定失去焦点
focus: 绑定获得焦点事件
click:
dblclick
change
append : 给自己添加儿子
appendTo : 把自己添加到别人家
prepend : 在自己子节点最前面添加子节点
after : 在自己后面添加一个兄弟
before: 在自己前面添加一个兄弟
$("数组对象").each(function(index,data))
$.each(arr,function(index,data))
表单校验案例
技术分析
- trigger : 触发事件,但是会执行类似浏览将光标移到输入框内的这种浏览器默认行为
- triggerHandler : 仅仅只会触发事件所对应的函数
- is()
步骤分析
- 首先给必填项,添加尾部添加一个小红点
- 获取用户输入的信息,做相应的校验
- 事件: 获得焦点, 失去焦点, 按键抬起
- 表单提交的事件
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../css/style.css" />
<title></title>
<!--
1. 首先给必填项,添加尾部添加一个小红点
2. 获取用户输入的信息,做相应的校验
3. 事件: 获得焦点, 失去焦点, 按键抬起
4. 表单提交的事件
Jq的方式来实现:
1. 导入JQ的文件
2. 文档加载事件: 在必填项后天加一个小红点
3. 表单校验确定事件: blur focus keyup
4. 提交表单 submit
-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){ //默认做一些页面初始化
//动态在必填项后面添加小红点
$(".bitian").after("<font class='high'>*</font>");
//给必填项绑定事件
$(".bitian").blur(function(){
//首先获取用户当前输入的值
var value = this.value; //123
//清空上一次提示的信息
$(this).parent().find(".formtips").remove();
//判断当前的值是哪一项输入的值
if($(this).is("#username")){ //判断是否是用户名输入项
if(value.length < 6){
$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
}
}
if($(this).is("#password")){ //判断是否是密码输入项
if(value.length < 6){
$(this).parent().append("<span class='formtips onError'>,密码太短了</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
}
}
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
})
//给表单提交绑定事件
$("form").submit(function(){
//触发所有必填项的校验
$(".bitian").trigger("focus");
//找到错误信息的个数
if($(".onError").length > 0){
return false;
}
return true;
});
});
/*
$(function(){
// 在所有必填项后天加一个小红点 *
$(".bitian").after("<font class='high'>*</font>");
//事件绑定
$(".bitian").blur(function(){
// var value = this.value;
var value = $(this).val();
//清空当前必填项后面的span
// $(".formtips").remove();
$(this).parent().find(".formtips").remove();
//获得当前事件是谁的
if($(this).is("#username")){
//校验用户名
if(value.length < 6){
$(this).parent().append("<span class='formtips onError'>用户名太短了</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>用户名够用</span>");
}
}
if($(this).is("#password")){
//校验密码
if(value.length < 3){
$(this).parent().append("<span class='formtips onError'>密码太短了</span>");
}else{
$(this).parent().append("<span class='formtips onSuccess'>密码够用</span>");
}
}
}).focus(function(){
$(this).triggerHandler("blur");
}).keyup(function(){
$(this).triggerHandler("blur");
});
// $(".bitian").blur(function(){}).focus(function(){}).keyup(function(){})
//给表单绑定提交事件
$("form").submit(function(){
//触发必填项的校验逻辑
$(".bitian").trigger("focus");
var length = $(".onError").length
if(length > 0){
return false;
}
return true;
});
});*/
</script>
</head>
<body>
<form action="../index.html">
<div>
用户名:<input type="text" class="bitian" id="username" />
</div>
<div>
密码:<input type="password" class="bitian" id="password" />
</div>
<div>
手机号:<input type="tel" />
</div>
<div>
<input type="submit" />
</div>
</form>
</body>
</html>
trigger和triggerHandler
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
trigger : 触发的意思
-->
<script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>
<script>
$(function(){
$("#username").focus(function(){
console.log("text focus被触发了")
})
$("#btn1").click(function(){
//触发一下text的focus
$("#username").trigger("focus");
});
$("#btn2").click(function(){
//触发一下text的focus
$("#username").triggerHandler("focus");
});
});
</script>
</head>
<body>
<input type="text" id="username" />
<input type="button" value="trigger一下text的focus" id="btn1"/>
<input type="button" value="triggerHandler一下text的focus" id="btn2"/>
</body>
</html>
使用JQuery发送请求局部刷新页面
数据交换格式:
json
xml
- 什么是JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C、C++、C#、Java、JavaScript、Perl、Python等)。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率)。
- JSON格式
JSON对象
json { key1:value} {"username":"zhangsan","password":"123"}
JSON数组
json [{ key1:value},{ key1:value},{ key1:value}]
使用BootStrap开发一个响应式的页面出来
需求分析
开发一套响应式页面.让他能够在各种设备上显示正常,提升用户体验
技术分析
BootStap概述
-
什么是BootStrap
-
BootStrap有什么作用
- 复制粘贴, 能够提高开发人员的工作效率
-
什么是响应式页面
- 适应不同的分辨率显示不同样式,提高用户的体验
-
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>
BootStrap
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 最新版本的 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">
</head>
<body>
<div class="container">
<a href="#" class="btn btn-warning">百合网</a>
<a href="#">世纪佳缘</a>
<div class="row">
<div class="col-md-8 col-sm-8">
123
</div>
<div class="col-md-5 col-sm-5">
456
</div>
</div>
</div>
<!--<div class="container">
<div class="row">
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-2 col-xs-4">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1 col-sm-2">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>-->
</body>
</html>
Bootstap:表格隔行换色22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/bootstrap.css" />
</head>
<body >
<table class="table">
<tr >
<td>
<input type="checkbox" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>
Bootstap:导航条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 最新版本的 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">
</head>
<body>
<div class="container">
<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="#">鞋靴箱包</a>
</li>
<li class="divider"></li>
<li>
<a href="#">香烟酒水</a>
</li>
<li class="divider"></li>
<li>
<a href="#">其它分类</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>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="500">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="...">
<div class="carousel-caption">
<h3>电脑大促销</h3>
<p>黑马出品电脑黑马出品电脑黑马出品电脑</p>
</div>
</div>
<div class="item">
<img src="../img/2.jpg" alt="...">
<div class="carousel-caption">
<h3>电脑大促销</h3>
<p>黑马出品电脑黑马出品电脑黑马出品电脑</p>
</div>
</div>
<div class="item">
<img src="../img/3.jpg" alt="...">
<div class="carousel-caption">
<h3>电脑大促销</h3>
<p>黑马出品电脑黑马出品电脑黑马出品电脑</p>
</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>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-4">
<h3>公司简介</h3>
<p>黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员</p>
<a href="http://www.itheima.com" class="btn btn-danger pull-right">了解更多</a>
</div>
<div class="col-md-4 col-sm-6 col-xs-4">
<h3>公司愿景</h3>
<p>黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员</p>
<a href="http://www.itheima.com" class="btn btn-info pull-right">了解更多</a>
</div>
<div class="col-md-4 col-xs-4">
<h3>联系我们</h3>
<p>黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员黑马程序员</p>
<a href="http://www.itheima.com" class="btn btn-primary pull-right">了解更多</a>
</div>
</div>
</div>
</body>
</html>
Bootstap:网站首页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 最新版本的 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相关的头文件
1. div布局容器 class = " container"
2. 放8行 row
-->
</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;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="#">鞋靴箱包</a>
</li>
<li class="divider"></li>
<li>
<a href="#">香烟酒水</a>
</li>
<li class="divider"></li>
<li>
<a href="#">花生瓜子</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="1000">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/3.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/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" width="100%" height="100%"/>
</div>
<!--
右边商品项部分
-->
<div class="col-md-10">
<!--投影神券来袭-->
<div class="col-md-6 hidden-sm hidden-xs" style="height: 240px;">
<img src="../products/hao/middle01.jpg" style="width: 100%;" />
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small01.jpg" style="max-width: 80%;"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small02.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small03.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small04.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small05.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small06.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</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;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small08.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small09.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</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-12">
<h3>最新商品<img src="../images/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/small09.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small08.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</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;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small06.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small05.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small04.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small03.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small02.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6" style="text-align: center;height: 240px;">
<img src="../products/hao/small01.jpg"/>
<p>微波炉</p>
<p style="color: red;">$998</p>
</div>
</div>
</div>
<!-- footer -->
<div class="row">
<div class="col-md-12">
<img src="../img/footer.jpg" width="100%"/>
</div>
</div>
<div style="text-align: center;">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<br />
Copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</body>
</html>
校验表单扩展:
trigger : 触发浏览器默认行为
triggerHandler : 不会触发
is : 判断
find : 查找
老黄历:
<!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 最简单异步请求网络
$.get(url,function(jsonArr){
// console.log(jsonArr);
// var obj = jsonArr[4]; // JSONObject
var goodCount = Math.floor(Math.random()*3+3) //
console.log("test");
// var i = 1/0;
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>
什么json: 轻量级的数据交换格式
json对象: {"username":"zhangsan"}
json数组: [ {"username":"zhangsan"}, {"username":"zhangsan"}, {"username":"zhangsan"}]
ajax异步请求:
同步和异步
- 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
- 对页面中的元素进行定义
- 列表元素,表单,按钮,图片...
步骤分析
代码实现
使用BootStrap布局网站首页
需求分析
请使用BootStrap对我们的首页进行优化
技术分析
步骤分析
- 新建一个HTML页面.引入bootStrap相关的js和CSS
- 定义一个整体的div, 将整体的div分成8个部分
- 完成没部分的内容显示
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
准备工作:
<meta name='viewport'>
1.导入bootstrap css文件
2.导入JQuery
3.bootstrap.js
4.写一个div class = container 支持响应式的布局容器
-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
jQuery文件。务必在bootstrap.min.js 之前引入
-->
<script src="../js/jquery-1.11.0.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="../img/logo2.png" />
</div>
<div class="col-md-4 hidden-xs">
<img src="../img/header.png" />
</div>
<div class="col-md-4">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--菜单-->
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-inverse" role="navigation">
<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="#">手机数码</a>
</li>
<li>
<a href="#">鞋靴箱包</a>
</li>
<li>
<a href="#">电脑办公</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">所有分类 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="#">手机数码</a>
</li>
<li>
<a href="#">鞋靴箱包</a>
</li>
<li>
<a href="#">电脑办公</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="请输入要搜索的商品">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="../img/3.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"></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"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!--最新商品这里-->
<div class="row">
<div class="col-md-12">
<h3>最新商品<img src="../images/title2.jpg"/></h3>
</div>
</div>
<!--商品部分 -->
<div class="row">
<!--左边div-->
<div class="col-md-2 hidden-sm hidden-xs">
<img src="../products/hao/big01.jpg" width="100%" height="100%" />
</div>
<!--右边div-->
<div class="col-md-10">
<!--上面部分-->
<div class="row">
<!--中等广告图-->
<div class="col-md-6">
<img src="../products/hao/middle01.jpg" width="100%" />
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
</div>
<!--下面部分-->
<div class="row">
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
</div>
</div>
</div>
<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-12">
<h3>最新商品<img src="../images/title2.jpg"/></h3>
</div>
</div>
<!--商品部分 -->
<div class="row">
<!--左边div-->
<div class="col-md-2 hidden-sm hidden-xs">
<img src="../products/hao/big01.jpg" width="100%" height="100%" />
</div>
<!--右边div-->
<div class="col-md-10">
<!--上面部分-->
<div class="row">
<!--中等广告图-->
<div class="col-md-6">
<img src="../products/hao/middle01.jpg" width="100%" />
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
</div>
<!--下面部分-->
<div class="row">
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
<!--商品项-->
<div class="col-md-2 col-xs-4" style="text-align: center;">
<img src="../products/hao/small01.jpg" />
<p>豆浆机</p>
<p>$998</p>
</div>
</div>
</div>
</div>
<!--页脚广告-->
<div>
<img src="../image/footer.jpg" width="100%" />
</div>
<!--网站声明-->
<div style="text-align: center;">
<a href="http://www.itheima.com">关于我们</a>
<a href="http://www.itheima.com">联系我们</a>
<a href="http://www.itheima.com">招贤纳士</a>
<a href="http://www.itheima.com">法律声明</a>
<a href="http://www.itheima.com">友情链接</a>
<a href="http://www.itheima.com">支付方式</a>
<a href="http://www.itheima.com">配送方式</a>
<a href="http://www.itheima.com">服务声明</a>
<a href="http://www.itheima.com">广告声明</a>
<br />
Copyright © 2005-2016 传智商城 版权所有
</div>
</div>
</body>
</html>