回顾之前HTML+CSS的布局方式，都是使用像素（px）来布局网页的，可是现在随着用户使用终端设备的多样化，平板手机已经很常见，所以如何制作适合手机使用的网页？还是使用以前的固定单位去布局，会引发两个问题：（1）分辨率太大，网页两边留白太多（2）分辨率太小，页面显示不完全
概念：设备无关性布局方式；在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的flex布局，就是其中一种。flex布局，能够将容器，按照特定的比例进行划分，从一维的角度，去更好的对容器进行布局。
历史：
1.固定布局：使用的是divasidearticle标签，width：xxxpx;像素；
2.浮动百分比的方式；width:100%;widht:90%,发现比刚才要好多了；还是有问题，适应手机的时候；
摘要，没有东西了，还继续留空白在右边；
3.Flex布局，怎么回事？弹性布局
非常easy:最外面的div,设置它的display:flex,设置成弹性布局即可。里面的width:30%;
width:67%;,可以保持不变。如果都去掉了，注意看它的变化。
任何元素都能作为flex容器，只要使用display:flex，进行描述，该容器就成为了一个flex容器。
伸缩布局决定的特性是让伸缩项目可伸缩，也就是让伸缩项目的宽度或高度自动填充伸缩容器额外的空间，这可以用flex属性来完成。
属性
说明
flex
伸缩性
flex-direction
伸缩流方向rowrow-reversecolumncolumn-reverse
flex-wrap
伸缩换行nowrapwrapwrap-reverse
justify-content
主轴对齐
align-items
侧轴对齐
参考代码：
方式1：
@media媒体类型{选择器{/样式代码写在这里…/}}
方式2：
值
Min/Max
描述
device-width
Length
Yes
设置屏幕的输出宽度
device-height
设置屏幕的输出高度
width
渲染界面的宽度
height
渲染界面的高度
Orientation
Portrait/landscape
No
横屏或竖屏
Resolution
分辨率（dpi/dpcm）
分辨率
Color
整数
每种色彩的字节数
color-index
色彩表中的色彩数
概念：
视窗指的是用户在网页上的可见性，根据设备的不同而不同。网页在手机上的比平板上要小，比pc上要小，之前都是针对的是pc设计，现在要考虑到平板，手机，手表，固定的网页无法适应不同的硬件设备。这时候就要对网页进行等比例的缩放，以适应屏幕。
设置：
initial-scale:页面初始缩放的比例。
user-scalable:是否允许用户缩放。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
在设计网页时，使用网格视图非常有用。它可以更轻松地在页面上放置元素。
响应式网格视图通常有12列，总宽度为100％，并在调整浏览器窗口大小时缩小和展开。
让我们开始构建响应式网格视图。首先确保所有HTML元素都将box-sizing属性设置为border-box。这可确保填充和边框包含在元素的总宽度和高度中。
*{box-sizing:border-box;}二.BootStrapBootstrap是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的WEB项目。Bootstrap是一个用于HTML、CSS和JS开发的开源工具包,来自于Twitter,利用Bootstrap提供的Sass变量和混合（mixins）、响应式栅格系统、可扩展的预制组件以及强大的jQuery插件，能够让你快速地开发出产品原型或构建整个app。
bootStrap.min.css
jquery.min.js
bootStrap.min.js
Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
我们也可以根据自己的需要，定义列数：
Bootstrap4的网格系统是响应式的，列会根据屏幕大小自动重新排列。
Bootstrap4网格系统有以下5个类(class):
Bootstrap4网格系统规则:
列组合
row/col-md-4col-md-8等测试
列偏移
col-md-offset-4,原理margin-left
列嵌套
列排序
col-md-push-8推向右侧
详见W3School,部分案例
BootStrap核心之一，主要有ICON、下拉图标、导航、导航条、缩略图、分页导航等。
讲解字体图标(Glyphicons)，并通过一些实例了解它的使用。Bootstrap捆绑了200多种字体格式的字形。首先让我们先来理解一下什么是字体图标。字体图标是在Web项目中使用的图标字体。
获取：
css和字体库文件在同一级别上。