今天完成的事情：

1.了解组件化：是为了方便后期的维护与减少代码量 

将重复的代码合并成为一份，也就是重用。 

我们来看组件化开发的定义，它的着重点就是重用，那这一步最后的结果就是提炼出一个个组件给不同的功能使用。

这里我们可以看一下依赖关系，是具体功能依赖提炼出来的组件，组件本身之间可能也有依赖关系，但一般不多。所以我们总结组件化开发的原则就是高重用，低依赖。当然这只是相对而言。 

基于这样的认识，我们甚至于可以把资讯、问答、学院、直播等功能封装成组件，只不过这些组件比较大，依赖可能多些，不过本质上没有多少区别，而且实际上网上许多文章说所的模块化开发其实就是这种组件化的“模块”

2.清除浮动的几种方式

01：.额外标签法 

02：使用after元素法，就是下面栅格系统用到的清除方法

03.利用overflow:hidden属性

3.编译栅格系统：

我们定义一个2列的布局，那么col-sm-5的意思是占用50%，但是在大、中屏上占占比为50%，在小屏上占比为100%，根据屏幕大小自适应，不需要我们去指定屏幕了，就方便很多。 
首先我们需要一个包裹容器：

然后定义行，因为里面的列的布局我们使用float来实现，所以需要在父元素中并清除浮动

定义列 ：

[class*=”col-“] 
选择所有类名中含有”col-“的元素 
与此类似的还有： 
[class^=”col-“] 
选择所有类名中以”col-“开头的元素 
[class$=”-col”] 
选择所有类名中以”-col”结尾的元素

最后就是通过@media媒体查询来定义什么状态下的行占比

在大于于992或等于992的情况下两个元素各占50%

在小于或等于762px的时候各占一行的50%

刚刚开始的时候钻了牛角尖，以为媒体查询是bootstrap自带的一个功能没想到是css的，想了一天在不使用媒体查询的情况下做栅格然后就炸了T.T，栅格系统就是依靠媒体查询实现的一个布局。

明天计划的事情： 开始手写导航栏，要是进度可以接着做轮播图（还是要有梦想的）
遇到的问题： 栅格系统的编译
收获：对媒体的查询的用法有了新的理解