1 响应式网页

1.1 概述

响应式网页定义
Responsive Web Design：响应式网页设计，专为改进移动互联网浏览体验提出的概念。
基本理念：集中创建页面的图片和排版大小，智能地根据用户行为和使用的设备环境进行相应布局(自动更改布局、图片、文字效果)——一个页面兼容各种终端
响应式网页构成
1）不能固定宽度，必须是流式网格布局(Fluid:流式、流动式、液态)；
2）可伸缩的图片和文字，随容器大小改变；
3）CSS3 Media Query能根据浏览设备的宽和高调用不同CSS

响应式布局网页问题：代码复杂度极大增加，只适用于内容不太多的页面(企业官网、门户网站)

1.2 测试响应式网页

浏览器设备模拟器
简单方便；测试效果有限
第三方工具
无需添置太多真实设备，测试方便；但测试效果有限，需进一步验证；(phonegap，Android ADT，IOS Xcode，www.browserstack.com)
真实设备.
测试效果真实可靠，但测试任务量较大

1.3 编写响应式网页

允许网页宽度自动调整
在head标签中声明viewport元标签
```
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 user-scalable=no">
</head>
```
viewport：元标签(视口)，IOS最先引入，手机中显示网页内容的虚拟窗口的大小一般远大于手机屏幕，HTML可以指定视口大小
width：视口的宽度，取值为数值或device-width；
initial-scale：初始缩放倍率
maximum-scale：允许缩放的最大倍率
minimum-scale：允许缩放的最小倍率
user-scalable：是否允许用户手动缩放；1/0/yes/no
height：视口高度，一般不指定
IOS专用属性：minimal-ui:ios ui设置在ios设备上隐藏导航栏和地址栏
一般设置视口宽度为设备宽度，不允许缩放
不使用绝对宽度
所有元素的宽不能指定固定值，必须使用相对宽度：width:60%或auto;
相对大小的字体
使用font-size:rem/em
流式布局
使用流式布局+弹性布局(float+flex)：布局各个区块位置都是浮动的;搭配媒体查询技术(CSS Media Query)：响应式网页必备条件，可以自动根据当前浏览器设备的不同选择执行部分CSS样式
图片自适应
实现图片的自动缩放：img{max-width:100%;}或者根据客户端屏幕大小加载不同尺寸的图片

选择加载CSS
不推荐根据浏览器不同加载不同CSS文件：

<link rel="stylesheet" href="tinyScreen.css" media="screen and (max-device-width:400px)">
<link rel="stylesheet" href="smallScreen.css" media="screen and (min-width:400px) and (max-device-width:600px)">

CSS的@media规则
推荐根据媒体查询不同屏幕宽度选择执行CSS文件中部分CSS规则

扫描二维码关注公众号，回复： 4459470 查看本文章
```
   @media screen and (min-widht:768px) and (max-diwth:991px) {
   	选择器样式
   }
```

2 Bootstrap

2.1 Bootstrap

2.1.1 Bootstrap定义

简洁、直观、强悍的前端开发框架让web开发变得迅速简单
官网：htttp://getbootstrap.com
中文网站：http://www.bootcss.com
Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目
Bootstrap提供Sass变量和大量mixin、响应式扎个系统、可扩展的预制组件、基于jQuery的强大插件系统

2.1.2 目录说明

css目录——用于存放Bootstrap框架使用的样式文件
bootstrap.css：框架的样式文件
bootstrap.min.css：框架的样式压缩文件
bootstrap-grid.css：框架的栅格文件
bootstrap-reboot.css：框架的引导文件
js目录——用于存放Bootstrap框架使用的核心javascript文件
bootstrap.js：框架的核心javascript文件
bootstrap.min.js：框架的核心javascript压缩文件

按顺序导入4个文件：bootstrap.css、jquery.min.js、popper.min.js、bootstrap.min.js

2.1.2 模板

/*声明*/
<!DOCTYPE html>
<html>
<head lang="en">
  /*元数据*/
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  /*样式*/
  <link rel="stylesheet" href="../css/bootstrap.css"/>
  /*脚本*/
  <script src="../js/jquery.min.js"></script>
  <script src="../js/popper.min.js"></script>
  <script src="../js/bootstrap.min.js"></script>
  <title></title>
</head>
<body>
//容器
<div class="container">

</div>
</body>
</html>

2.1.3 相关技术

Bootstrap许多组件需要依赖JavaScript运行，即依赖jQuery、Popper.js以及开发的JavaScript插件：jquery.min.js文件，popper.min.js文件

2.3 bootstrap.css

按顺序导入4个文件：bootstrap.css-> jquery.min.js->popper.min.js->bootstrap.min.js

2.3.1 CSS Reset

有些HTML标签在浏览器有默认的样式
-html、body、h#、p、ul、li、a等；
需要使用css代码改写浏览器默认设置以保证兼容性；

2.3.2 box-sizing

box-sizing用于设置元素的框模型(盒模型)的方式，取值：
content-box：默认取值，宽度和高度指元素的内容框；
border-box：宽度高度设置元素的内边距+左右边框+内容宽高

3 全局CSS样式

3.1 全局CSS样式

Bootstrap需要使用HTML5的元素和属性；

<!DOCTYPE html>
<html lang="zh-CN"></html>

为了确保绘制和触屏缩放，在<head>之中添加viewport元数据元素
<meta name=“viewport” content=“width=device-width, initial-scale=1”>

布局容器
.container用来固定宽度并支持响应式布局的容器；
.container-fluid类用于100%宽度，占据全部视口(viewport)的容器
按钮
按钮颜色：
.btn-success；.btn-warning；.btn-danger；.btn-info；.btn-primary；.btn-secondary；.btn-dark；.btn-ligth；.btn-link
按钮边框颜色：
btn-outline-warning黄色边框
btn-outline-danger红色边框
按钮大小：
btn-lg
btn-sm
btn-block
图片
rounded圆角图片；
rounded-circle椭圆图片；
img-thumbnail缩略图；
img-fluid响应式图片
文本
字体大小：h#;
对齐：text-left、text-center、text-right、text-justify、text-nowrap；
斜体：font-italic
字体粗细：font-weight-bold
大小写：text-lowercase、text-uppercase、text-capitalize(首字母大写)
颜色：text-success、text-warning、text-error、text-info、text-primary
列表
无序列表ul和有序列表ol
.list-unstyled去除点点
.list-inline
.list-group定义列表组
.list-group-item定义列表项
.active激活状态
.disabled禁用
list-group-item-danger列表项颜色(不列举)
表格
基本表格.table
条纹状表格.table-striped
带边框表格.table-bordered
鼠标悬停.table-hover
响应式表格(表格父级元素).table-responsive
背景色table-danger
辅助样式
浮动float- * -left / float--right， 表示不同的屏幕lg/md/sm；使用.clearfix解决高度坍塌问题
显示/隐藏.visible/.invisible
背景.bg-success/warning/info/dange/error/primary
边框.border-0去除边框；-top/right/bottom/left设置单边；-success/warning…边框颜色
圆角.rounded/.rounded-0圆角和去除圆角；.rounded-top/right/bottom/left
居中对齐.mx-auto
宽度.w- * ( * : 25/50/75/100 )
高度.h- * ( * : 25/50/75/100 )
外边距m-0~5，分别表示0.25/0.5/1/1.5/3rem；m-auto；单边设置mt/mr/mb/ml-1
内边距同外边距，使用p代替m；
内外边距响应式：m-*-n，m取值为m或者其单边形式， *表示xl/lq/md/sm, n:0~5

3.2 栅格系统

3.2.1 概述

Bootstrap提供一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(Viewport)的增加，系统自动分为最多12列，通过一系列行与列的组合来创建页面布局

3.2.2 栅格系统工作原理

row必须包含在容器.container(固定宽度).container-fluid(100%宽度)内；row中包含一组column存内容，提供预定义的类，设置不同尺寸

<div class="row">
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
  <div class="col-4">col-4</div>
</div>
<h1>不同屏幕下不同的占比</h1>
<div class="row">
  <div class="col-lg-4 col-md-2 col-sm-12">第一列</div>
  <div class="col-lg-4 col-md-8 col-sm-12">第二列</div>
  <div class="col-lg-4 col-md-2 col-sm-12">第三列</div>
</div>

3.2.3 栅格布局

web页面布局的三种方法：

布局方法	table布局	div+css布局	Bootstrap栅格布局
优点	简单易控制	语义正确，渲染效率高	简单易控制，语义正确，渲染效率高，支持响应式
缺点	语义错误，渲染效率低	控制麻烦	页面非常复杂就不适合使用栅格

栅格，每行12个单元格，元素在不同屏幕下占的格子数
栅格布局最外层使用容器.container定宽容器或.container-fluid变宽容器；容器中声明.row每行平分12个单元格；行中声明列.col(每列宽度占比n/12)

总结：不同屏幕下列的适应性问题
col-xl-* 只能在xl屏幕下有效
col-lg-* 能在xl/lg屏幕下有效
col-md-* 能在xl/lg/md屏幕下有效
col-sm-* 能在xl/lg/md/sm屏幕下有效
小分辨率往大分辨率兼容
列偏移：使用列偏移指定列及其后的列向右偏移：offset-*-n，*表示屏幕像素类型，n表示1~11；底层原理是通过添加margin-left实现偏移

3.2.3 弹性布局

使用d-*-flex、d- * -inline-flex类创建弹性容器； *代表xl/lg/md/sm

水平方向
.flex- * -row设置弹性子元素水平显示，默认效果；
.flex- * -row-reverse设置右对齐显示；
垂直方向
.felx- * -column设置弹性子元素垂直方向现实；
.flex- * -column-reverse翻转子元素；
内容排列
.justify-content-* -value用于修改主轴对齐方式，value取值：
start默认
end
center
between
around
响应式flex类
根据不同设备设置flex类从而实现页面响应式布局：sm，md，lg或xl；
根据不同屏幕设备创建弹性盒子容器：.d-sm/md/lg/xl-flex；
根据不同屏幕设备在水平方向/垂直方向显示弹性子元素：.flex-*-row/column

3.3 表单

form标签中引用class="form-inline/form-group"来控制方向；
如果只引用form-group添加下外边距(堆叠表单)；只引用form-inline变成弹性容器，默认内部项目主轴为X轴；form中引用form-inline，内部项目引用form-group，form变成弹性容器，默认内部项目主轴X轴，所有项目变成弹性容器

//内联表单
<form class="form-inline">
	<div class="form-group">
	</div>

样式：
form-control/form-check
form-check-inline/form-check-input
form-check-label/form-text

Bootstrap_1.响应式网页、Bootstrap、全局CSS样式

响应式网页、Bootstrap、全局CSS样式