Web前端知识——Bootstrap
要掌握的知识点
掌握什么是响应式及响应式的原理
掌握BootStrap的栅格系统
了解BootStrap的其他组件及JS控件
使用BootStrap开发一个响应式的页面出来
需求分析
开发一套页面,适配不同分辨率的上网设备
技术分析
BootStap概述
-
什么是BootStrap
-
BootStrap有什么作用
- 复制粘贴, 能够提高开发人员的工作效率
-
什么是响应式页面
-
适应不同的分辨率显示不同样式,提高用户的体验
-
BootStrap的中文网
http://www.bootcss.com -
下载BootStrap
-
BootStrap结构
-
全局CSS
- bootStrap中已经定义好了一套CSS的样式表
-
组件
- BootStrap定义的一套按钮,导航条等组件
-
JS插件
- BootStrap定义了一套JS的插件,这些插件已经默认实现了很多种效果
-
BootStrap的入门开发----------------------------------------------------------
引入相关的头文件
<!--需要引入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
-
-