要掌握的知识点
掌握什么是响应式及响应式的原理
掌握BootStrap的栅格系统
了解BootStrap的其他组件及JS控件
使用BootStrap开发一个响应式的页面出来
需求分析
开发一套页面，适配不同分辨率的上网设备
技术分析
BootStap概述
-
什么是BootStrap
-
BootStrap有什么作用
- 复制粘贴, 能够提高开发人员的工作效率
-
什么是响应式页面
-
适应不同的分辨率显示不同样式,提高用户的体验
-
BootStrap的中文网
http://www.bootcss.com -
下载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>
校验表单扩展:
-
trigger : 触发浏览器默认行为
-
triggerHandler : 不会触发
-
is : 判断
-
find : 查找
老黄历:
什么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对我们的首页进行优化
步骤分析
1.完成bootstrap的初始化工作
2.创建9个div
第一个div：存放logo信息 在中等屏幕每个占4份 在小屏幕和超小屏幕占12份
第二个div：存放导航条 不用控制响应式
第三个div：存放轮播图 不用控制响应式
第四个div：存放热门商品
上下切分为两个div
上面的div
存放热门商品文字信息
下面的div
存放商品图片信息
切分左右两个div
左边的div
竖着的大图 在中等屏幕的时候 占2份 在小屏幕的时候占12份 在超小屏幕的时候隐藏
右边的div
存放具体的小商品 在中等屏幕的时候占10份 在小屏幕的时候占12份 在超小屏幕的时候占12份
大图：
在中等屏幕的时候占6份 在小屏幕的时候隐藏 在超小屏幕的时候隐藏
小图：
在中等屏幕的时候占2份 在小屏幕的时候占3份 在超小屏幕的时候占6份
第五个div：存放图片
第六个div：存放热门商品
上下切分为两个div
上面的div
存放热门商品文字信息
下面的div
存放商品图片信息
切分左右两个div
左边的div
竖着的大图 在中等屏幕的时候 占2份 在小屏幕的时候占12份 在超小屏幕的时候隐藏
右边的div
存放具体的小商品 在中等屏幕的时候占10份 在小屏幕的时候占12份 在超小屏幕的时候占12份
大图：
在中等屏幕的时候占6份 在小屏幕的时候隐藏 在超小屏幕的时候隐藏
小图：
在中等屏幕的时候占2份 在小屏幕的时候占3份 在超小屏幕的时候占6份
第七个div：存放图片
第八个div：存放友情链接
第九个div：存放版权信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--创建视口-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!--导入jquery文件-->
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<!--导入bootstrap.css文件-->
<link rel="stylesheet" href="../css/bootstrap.css" />
<!--导入bootstrap.js-->
<script type="text/javascript" src="../js/bootstrap.js" ></script>
</head>
<body>
<!--创建布局容器-->
<div class="container-fluid">
<!--第一个div：存放logo信息 在中等屏幕每个占4份 在小屏幕和超小屏幕占12份-->
<div>
<!--嵌套三个div-->
<div class="col-md-4 col-sm-12 col-xs-12">
<img src="../img/logo2.png"/>
</div>
<div class="col-md-4 col-sm-12 col-xs-12">
<img src="../img/header.jpg"/>
</div>
<!-- 使用盒子模型 -->
<div class="col-md-4 col-sm-12 col-xs-12 text-center" style="padding-top: 20px;">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div class="clearfix"></div>
<!--第二个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" 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="#">手机数码 <span class="sr-only">(current)</span></a></li>
<li><a href="#">电子设备</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">水果 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">苹果</a></li>
<li><a href="#">香蕉</a></li>
<li><a href="#">大鸭梨</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">榴莲</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">芒果</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left pull-right">
<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：存放轮播图 不用控制响应式-->
<div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 控制圆点 -->
<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>
<!-- 控制图片 -->
<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>
<!-- 控制左右箭头 -->
<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：存放热门商品-->
<div>
<!--上面的div-->
<div>
<span class="h2">热门商品</span>
<img src="../img/title2.jpg"/>
</div>
<!--下面的div-->
<div>
<!--左边的div-->
<div class="col-md-2 col-sm-12 hidden-xs">
<img src="../img/big01.jpg" width="190px" height="390px"/>
</div>
<!--右边的div-->
<div class="col-md-10 col-sm-12 col-xs-12">
<!--商品中的大图-->
<div class="col-md-6 hidden-sm hidden-xs">
<img src="../img/middle01.jpg" width="500px" height="190px"/>
</div>
<!--商品中的小图-->
<!--居中-->
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg" />
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
</div>
</div>
</div>
<!--第五个div：存放图片 -->
<div>
<img src="../img/ad.jpg" width="100%"/>
</div>
<!--第六个div：存放热门商品-->
<div>
<!--上面的div-->
<div>
<span class="h2">热门商品</span>
<img src="../img/title2.jpg"/>
</div>
<!--下面的div-->
<div>
<!--左边的div-->
<div class="col-md-2 col-sm-12 hidden-xs">
<img src="../img/big01.jpg" width="190px" height="390px"/>
</div>
<!--右边的div-->
<div class="col-md-10 col-sm-12 col-xs-12">
<!--商品中的大图-->
<div class="col-md-6 hidden-sm hidden-xs">
<img src="../img/middle01.jpg" width="500px" height="190px"/>
</div>
<!--商品中的小图-->
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg"/>
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 text-center">
<img src="../img/small08.jpg" />
<p>
<a href="">电饭煲</a>
</p>
<p>
<font color="red">$999.99</font>
</p>
</div>
</div>
</div>
</div>
<!--第七个div：存放图片-->
<div style="margin-top: 40px;">
<img src="../img/footer.jpg" width="100%"/>
</div>
<!--第八个div：存放友情链接-->
<div class="text-center">
<ul class="list-inline">
<li><a href="">传智播客</a></li>
<li><a href="">传智播客</a></li>
<li><a href="">传智播客</a></li>
<li><a href="">传智播客</a></li>
<li><a href="">传智播客</a></li>
<li><a href="">传智播客</a></li>
<li><a href="">传智播客</a></li>
</ul>
</div>
<!--第九个div：存放版权信息-->
<!--段落居中-->
<div>
<p align="center">
Copyright © 2005-2016 传智商城 版权所有
</p>
</div>
</div>
</body>
</html>
五篇前端内容总结
-
JQ方式校验表单(要求做出来)
-
json : (了解)
-
json对象 {}
-
json数组 [{},{}]
-
-
$.get(url,function(data){}) (了解)
-
bootstrap: Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
全局CSS样式: css样式
-
栅格系统:
-
将屏幕划分成12个格子,12列
-
class=‘row’ 当前是行
-
行里面放的是列 col-屏幕分辨率-数字 (每一种分辨率后的数字总和必须是等于12,如果超过12,另起一行)
-
col-lg-数字: 在超宽屏幕上使用
-
col-md-数字: 在中等屏幕上,PC电脑
-
col-sm-数字: 在平板电脑上
-
col-xs-数字: 在手机上
-
-
组件: 导航条 , 进度条, 字体
-
javascript插件 : 轮播图
-
复制粘贴
-
什么是响应式: 会根据不同的分辨率去显示不同页面结构,提高用户体验
-
HTML: 超文本标记语言: 设计网页,决定了网页的结构
-
CSS: 层叠样式表 ,主要是用来美化页面, 将美化和HTML代码进行分离,提高代码复用性
-
javascript: 脚本语言,由浏览器解释执行, 弱类型语言(var i), 提供用户交互
-
jquery: javascript函数库,进一步的封装
-
选择器:
-
ID选择器
-
类选择器
-
元素选择器
-
通配符选择器
-
选择器分组
-
-
层级选择器
-
后代选择器
-
子元素选择器
-
相邻兄弟选择器
-
兄弟选择器 : 找出所有的弟弟
-
-
属性选择器:
- 选择器[属性名称=‘属性的值’]
-
表单选择器
-
:input
-
:text
-
:password
body > div > div:nth-child(7) > div:nth-child(3) > div:nth-child(8)
-
-
基本的过滤器
-
:first
-
:last
-
:even
-
:odd
-
:gt
-
:lt
-
:eq
-
-
表单对象属性
-
:selected
-
:checked
-
-
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
