我们总说框架是我们的好伙伴，因为他们会为我们做到很多底层的事情，让我们的开发过程大大简便，今天我们要介绍的就是前端网页布局的一个常用框架bootstrap，这个框架为我们封装好了很多的页面样式，我们只需要下载对应文件然后根据提示进行cv操作，而他的所有页面样式都是通过class来调节。
https://v3.bootcss.com/ bootstrap中文网站
首先来介绍一个新的词汇，响应式布局。我们能理解的就是字面的意思，当我们调节浏览器窗口大小，或者窗口大小需要符合手机或者平板的大小的时候，我们的布局就会错乱。是因为我们在设计的时候没有将页面设置为响应式布局，并不会随着窗口大小而变化。
ps：bootstrap的就是代码是依赖于jQuery，在你使用他的时候首先要导入jquery（ps：再导入的时候jq也要先导入否则bootstrap会出错）
布局容器：
在我们使用正常网页浏览的时候会发现网页两侧或者一侧有留白，这回使我们的视觉更加舒服。
所以bookstrap为我们设计了布局容器，.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
栅格系统：用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。默认我们通过声明类属性 row将一行等分为12列，可以用于39 282等形式布局。通过.col-md-*类属性来进行列的分配。
ps：当你声明了13列的时候，这个方法会帮助你自动将超出部分归到下一行。
媒体查询：我们使用不同的媒体设备看到同一个网页的时候我们得到的视觉效果是不同的，可以通过@media screen and（max width：）来进行窗口检测，同时bootstrap为我们做了如下的官方解释。
超小屏幕（手机，小于 768px）
没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）
小屏幕（平板，大于等于 768px）
@media (min- @screen-sm-min) { ... }
/中等屏幕（桌面显示器，大于等于 992px）
@media (min- @screen-md-min) { ... }
大屏幕（大桌面显示器，大于等于 1200px）
@media (min- @screen-lg-min) { ... }
栅格参数：
响应式列重置：我们可能在某一时间段内只需要12列中的8列，同时希望这8列居中（不要觉得很扯淡，你永远不知道你的产品经理还能多扯淡）
所以我们需要通过类col-md-offset-参数 来进行偏移。原理是进行参数上的调整。
排版与代码：bootstrap对所有的HTML标签的文本字体进行了统一的美观的设置，同时bootstrap还支持副标题，在标题标签内部通过<small> 标签来设置
我们通过对文本的属性的声明来设置不同的性质，在这里简单的为大家介绍几种感兴趣的小伙伴可以去官网进行查阅。
表格：我们通过声明table属性来对我们的表格进行美化
class table 生成一个定义好的表格
table-hover 悬浮感
table-striped 层次感
table-bordered 边框
表单：bootstrap的表单样式在官网有详细的展示和代码，在这里不为大家详细介绍。
我们只需要记住通过添加form-control来进行装饰，针对报错信息可以为父标签添加has-error
按钮：
图片：
图标：通过span标签然后在官网复制名字
http://www.fontawesome.com.cn/图标拓展库，调用过程与bootstrap类似