目录
一，介绍和版心
1，介绍：
响应式布局通过同一份代码快速、有效适配手机、平板、PC设备等所有的屏幕
响应式布局涉及到知识点：
屏幕宽度变化: 媒体查询
布局知识: 传统布局方案（百分比、浮动、清除浮动、定位）
2，档位划分:
媒体查询：档位划分；市场上默认的划分；三个节点、四个档位
- w<768 超小屏幕（xs）（手机，学习rem布局里面的档位划分都是在这个范围）
- 768<= w <992 小屏设备（sm）（平板）
- 992<= w <1200 中等屏幕（md）（小显示屏的PC显示器）
- 1200<=w 大宽屏设备（lg）（大桌面显示器）
语法：把市场上所有屏幕包括在内；
/* 1. 超小屏幕下 xs 小于 768 */
@media screen and (min-width: 0px) { }
/* 2. 小屏幕下 sm 大于等于768 */
@media screen and (min-width: 768px) { }
/* 3. 中等屏幕下 md 大于等于 992px */
@media screen and (min-width: 992px) { }
/* 4. 大屏幕下 lg 大于等于1200 */
@media screen and (min-width: 1200px) { }3，版心：
不同的档位下，版心不同；
档位设置：版心；
所有的子元素都是归于版心下，不同的版心宽度，意味着子元素要以不同的布局排版满足用户浏览友好的需 求；
语法：
/* 1. 超小屏幕下 xs 小于 768 布局容器的宽度为 100% */
@media screen and (max-width: 767px) {
.container {
width: 100%;
}
}
/* 2. 小屏幕下 sm 大于等于768 布局容器改为 750px */
@media screen and (min-width: 768px) {
.container {
width: 750px;
}
}
/* 3. 中等屏幕下 md 大于等于 992px 布局容器修改为 970px*/
@media screen and (min-width: 992px) {
.container {
width: 970px;
}
}
/* 4. 大屏幕下 lg 大于等于1200 布局容器修改为 1170 */
@media screen and (min-width: 1200px) {
.container {
width: 1170px;
}
}注意：
- 媒体查询使用符号的相关：min-，max-包含等号，后面是数值单位为px；
- 除超小屏以外：版心的宽度设置都是小于当前档位最小界值，比如 min-width: 768px，版心是750px； 原因：两边留空白，用户体验好。
- 以上市场默认划分，可根据自己需求添加档位；
二，例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 媒体查询 适配手机 平板 PC */
/* xs 手机*/
@media screen and (min-width:0) {
.container {
width: 100%;
}
}
/* sm 平板*/
@media screen and (min-width:768px) {
.container {
width: 750px;
}
}
/* 小PC md 平板*/
@media screen and (min-width:992px) {
.container {
width: 970px;
}
.container div {
float: left;
}
.container .left {
width: 40%;
}
.container .mid {
width: 40%;
}
.container .right {
width: 20%;
}
}
/* 大PC lg 电脑端*/
@media screen and (min-width:1200px) {
.container {
width: 1170px;
}
.container div {
float: left;
}
.container .left {
width: 20%;
}
.container .mid {
width: 60%;
}
.container .right {
width: 20%;
}
}
.container {
height: 2000px;
border: 1px solid #000;
margin: 0 auto;
}
.container .left {
background: #ccc;
height: 200px;
}
.container .mid {
background: #222;
height: 800px;
}
.container .right {
background: pink;
height: 400px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">1</div>
<div class="mid">2</div>
<div class="right">3</div>
</div>
</body>
</html>三，Bootstrap体验
BootStrap框架 可非常快地搭建出响应式页面；
1，介绍
BootStrap 出自 Twitter（推特），是目前最受欢迎的前端响应式框架。
网址：
- 中文网：http://www.bootcss.com/
版本：
- 2.x.x：停止维护，代码不够简洁，功能不够完善。
- 3.x.x：目前使用最多，稳定，不支持IE6-IE7。对 IE8 支持，界面效果不好，偏向用于开发响应式布局、 移动设备优先的WEB 项目。
- 4.x.x：最新版，目前还不是很流行
2，使用
1）进入官网https://www.bootcss.com/
2）点击中文文档
3）点击下载Bootstrap
4）下载安装方法
方法一：
方法二：
方法三：
5）下载完成，放在对应的目录下
6）使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BootStrap Template</title>
<!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- 条件注释:解决小于IE9的版本一些问题 -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>条件注释：满足条件，下面代码链接就会发出请求；
3，布局容器
版心设置：BootStrap 需要为页面内容包裹一个 .container 或者.container-fluid 容器，它提供了两个作此用 处的类。
.container：设置不同档位下的版心的宽度；
- 超小屏（xs : extra small）：手机； 0px <=w ；版心宽度为100%
- 小屏（sm : small） ：平板； 768px<=w ；版心宽度定为 750px
- 中屏（md: medium）：桌面；992px<=w ；版心宽度定为 970px
- 大屏（lg: large）：大桌面；1200px<=w ；版心宽度定为 1170px
.container-fluid：百分百宽度；
特点：
- 所有元素为CSS3盒子模型；
- 布局盒子有左右15px padding值；
4，预置类名
4.1 排版
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<p>...</p>4.2 按钮
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">4.3 辅助类样式
<!-- 上下文颜色 -->
<p class="text-muted">...</p>
<!-- 下拉三角 -->
<span class="caret"></span>4.4 字体图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>4.5 举例：
可以参考全局 CSS 样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- 条件注释:解决小于IE9的版本一些问题 -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<p>我是小白龙</p>
<!-- 按钮 -->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
<!-- 上下文的颜色 -->
<p>我是小白龙</p>
<p class="text-muted">我是铁蛋儿</p>
<!-- 下拉三角 -->
<span class="caret"></span>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<!-- 表格 -->
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</body>
</html>四，Bootstrap栅格系统
作用：设置子元素在不同档位下的布局；
https://v3.bootcss.com/css/#grid
1，介绍
栅格系统，在各个档位下，控制子元素布局不同；
将版心宽度均分为12份；
各个档位下都有预制好的类前缀：
| 超小屏草(手机) < 768px |
小屏设备(平板) > =768px |
中等屏草(桌面显示器) > = 992px |
宽屏设备(大桌面显示器) > =1200px |
|
| .container最大宽度 | 自动(100%) | 750px | 970px | 1170px |
| 类前缀 | .col-xS- | .col-sm- | .col-md- | .col-lg- |
| 列(column)数 | 12 | |||
类前缀：
- 超小屏（xs : extra small）：手机；
- 小屏（sm : small） ：平板；
- 中屏（md: medium）：桌面；
- 大屏（lg: large）：大桌面；
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创 建好的布局中，控制不同的档位下，列的子元素占有几份
2，基本使用
<!-- 中屏和以上占有6份 -->
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
<!-- 各个档位下，按照各个档位下布局 -->
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">1</div>
<div class="col-md-6 col-lg-8">2</div>
</div>
</div>举例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- 条件注释:解决小于IE9的版本一些问题 -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.son {
height: 30px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-2 son">a</div>
<div class="col-md-6 col-lg-8 son">b</div>
<div class="col-lg-2 son">c</div>
</div>
<!-- 左右对齐-->
<div class="row">
<!-- 如果只有一个盒子 那么就偏移 = 12-4-4 -->
<div class="col-lg-4 son">1</div>
<div class="col-lg-4 col-lg-offset-4 son">2</div>
</div>
<!-- 居中-->
<div class="row">
<!-- 如果只有一个盒子 那么就偏移 = 2 8 2 -->
<div class="col-md-8 col-md-offset-2 son">中间盒子</div>
</div>
</div>
</body>
</html>3，特点：
单一类前缀：各个档位下的类前缀，为包括当前且向上生效；例如：.col-md-6为中屏和以上占有6份；
多个类前缀：分别按照各个档位列划分生效；
每个子项：默认左右15px的padding；
行（.row） 可以去除父容器左右15px的padding值：.row的左右margin为-15px；
4，列嵌套
操作：可以在已经分好的子元素中内部，继续进行列的划分（共12份）；
效果：继续在分好的布局内继续划分；
语法：
<!-- 直接嵌套 -->
<div class="col-sm-4">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
<!-- 使用row嵌套 -->
<div class="col-sm-4">
<!-- 加1个行 row 这样可以表现出抵消父元素的左右15padding值 而且高度自动和父级一样高; -->
<div class="row">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
</div>5，列偏移
操作：是划分好的子项进行列的份数偏移
场景：左右布局，居中布局；
语法：
<!-- 左右对齐-->
<div class="row">
<!-- 如果只有一个盒子 那么就偏移 = 12-4-4 -->
<div class="col-lg-4">1</div>
<!-- 在4份的基础上 偏移4份 自身占4份 故左右对齐 -->
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>
<!-- 居中-->
<div class="row">
<!-- 如果只有一个盒子 那么就偏移 = 2 8 2 -->
<!-- 偏移2份 占8份 还剩2份 故居中 -->
<div class="col-md-8 col-md-offset-2">中间盒子</div>
</div>6，响应式工具
BS :预制类名
可以控制元素在各个档位下进行显示或隐藏；
语法：
注意：和列类前缀的参数形成对比记忆，
- col-sm-* 是超小屏（包含）以上的屏幕都是这个份数的划分；
- 响应式工具 只是对当前档位下的类前缀类名生效；
举例：控制元素在档位下的显示与隐藏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 要求 当前网页 使用 IE浏览器 最高版本的内核 来渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Template</title>
<!-- Bootstrap 的文件引入 已经有初始化文件 Normalize.css-->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- 条件注释:解决小于IE9的版本一些问题 -->
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
.son {
height: 30px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="col-mg-3 son">1</div>
<div class="col-mg-3 son">2</div>
<div class="col-mg-3 son hidden-md">3</div>
<div class="col-mg-3 son">4</div>
</div>
</body>
</html>章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】
对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731
有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]