今天完成的事情：完成了任务五，任务六基本框架搭建起来了。

明天计划完成事情：

   任务六完成

遇到的问题：

   使用bootstrap4时，用的col-xs分列，但是显示分列不成功，没有栅格网络。

   原来是bootstrap4不支持xs了，下载应要了解新版本与老版本同异处。

收获：

 bootstrap

  Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

 1. 像素宽度分类

在bootstrap的v3版本中，已经将各种媒介分为4种像素宽度类型：

xs：extra small 特别窄屏幕，默认指浏览器像素宽度小于768px

sm：small 窄屏幕，默认指浏览器像素宽度大于等于768px

md：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992px

lg：large 大屏幕，默认值指浏览器像素宽度大于等于1200px

2. 布局栅格化

     bootstrap将内容区域分为了12等分，平均每一等分都有相等的间距，左右无外边距。一个栅格宽度为栅格单位宽度，一个栅格的外边距为栅格的单位外边距。栅格的宽度和边距都是百分比计算，使之能够自适应各种宽度。栅格的class为col-*，栅格的外包class为row。每一个行可以有多个列组成的多行栅格，每一个行在形象意义上称为版块（模块、区域），是一个相对独立的部分。但一行有且只能一个行出现，不能出现多个。

结合屏幕宽度分别有：

xs：col-xs-1 ~ col-xs-12，多列始终在一行内。

sm：col-sm-1 ~ col-sm-12，多列在浏览器像素宽度大于等于768px时才在一行内。

md：col-md-1 ~ col-md-12，多列在浏览器像素宽度大于等于992px时才在一行内。

lg：col-lg-1 ~ col-lg-12，多列在浏览器像素宽度大于等于1200px时才在一行内。

3、栅格偏移

理解了栅格化，那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种：

offset：左外边距（margin-left）；

pull：右位移（right）；

push：左位移（left）。 

其中offset使用的频率最高。不同的列宽度对应的外边距是不同的，所以每一种类型偏移都有四种，以offset为例（以下皆以offset为例）：

xs：col-xs-offset-0 ~ col-xs-offset-12

sm：col-sm-offset-0 ~ col-sm-offset-12

md：col-md-offset-0 ~ col-md-offset-12

lg：col-lg-offset-0 ~ col-lg-offset-12

  bootstrap功能很多，明天继续学习。