今天完成的事：弄了半天明白了删格系统的定义和用法（看了好久资料没有一次提问来的痛快），修改task8的代码，把删格系统加入进去，让页面变成响应式。

明天计划完成的事：OK了剩下的任务，赶紧开始task10.

遇到困难：bootstrap的CSS优先级覆盖了自己设置的CSS样式，贼尴尬，文件引用后置也没用，使用了下！important属性师兄说最好别用，这属性很危险..........更尴尬了。

收获：把删格系统的Container的div包裹在主div外，然后里面设置row的div，内部分成12份，通过：

.col-xs- 超小屏幕 手机 (<768px)
.col-sm- 小屏幕 平板 (≥768px)
.col-md- 中等屏幕 桌面显示器 (≥992px)
.col-lg- 大屏幕 大桌面显示器 (≥1200px)

然后设置数目来设置column所占大小，比如.col-md-6就是在≥992px时此column拥有父div一半的宽度，.col-xs-12在小于768px的分辨率的时候拥有父div（就是“row”div）100%宽度，很简单好用，而且column内部也能继续嵌套“row”div，把column再等分成12份。

column、row和Container这些div都拥有两边15px的padding，这是为了防止内容的重叠和内容与屏幕外边相交互，而 column 一定要放到 row 里使用，row也一定要放在container里面，防止出现bug。