需求：创建一套页面，根据上网设备的不同自动调节显示效果
技术分析：
bootstrap：webcss框架，整合了HTML/CSS/jQuery，创建响应式页面，适用不同的上网设备
bootstrap:
1.下载bootstrap http://www.bootcss.com/ 下载用于生产环境的bootstrap
2.导入bootstrap.css
3.导入jQuery.js
4.导入bootstrap.js
5.为了确保在所有设备上能够正确渲染并支持触控缩放，务必将设置 viewport 属性的 meta 标签添加到 <head> 中。如下所示。
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">6.将所有内容放到布局容器中
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能 互相嵌套。
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div> .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
行列布局：<div class="row">
注意：bootstrap将每一行分为12份，媒体查询
大屏幕：
每行显示6个
超大电脑：col-lg-2
屏幕小点：每行显示4个，<992<1200 col-md-3
分辨率再小时，每行显示2个时，768~992 col-sm-6
分辨率<768时，每行显示一个，可以使用 col-xs-12