今天完成的事情：

Bootstrap 的网格系统

<div class="row">
    <div class="course">
        <div class="efficient col-lg-3 col-md-3 col-xs-12">
            <div class="rocket"><img class="look" src="../img/task8.7.png" height="62" width="43"/></div>
            <div class="result">高效</div><div class="time">将5到7年的时间,缩短到一到三年</div>
        </div>
        <div class="efficient col-lg-3 col-md-3 col-xs-12">
            <div class="rocket"><img src="../img/task8.6.png" height="48" width="60"/></div>
            <div class="norm">规范</div><div class="walk">标准的实战教程,不会走弯路</div>
        </div>
        <div class="efficient col-lg-3 col-md-3 col-xs-12">
            <div class="rocket"><img src="../img/task8.5.png" height="55" width="52"/>
            </div><div class="result">人脉</div><div class="time">同伴好友,同院学长,技术大牛,入学就混入职脉圈,为以后铺平道路</div>
        </div>
        <div class="seek col-lg-3 col-md-3 col-xs-12">
            <div class="now">
            <div class="add">
            <div class="quorum"><img src="../img/task8.8.png" height="13" width="13"/>12300</div>
                <span class="study">累计在线人数</span>
        </div>
            <div class="add">
                <div class="quorum"><img src="../img/task8.8.png" height="13" width="13"/>12300</div>
                <span class="study">学员已找到满意工作</span>
            </div></div>
        </div>
    </div>
</div>
</div>

明天计划的事情：明天继续任务八的其他部分

遇到的问题：开始不知道要用Bootstrap 的网格系统，开始是没发现问题，但是越往下越觉得不对劲，怎么改都觉得跟UI图对不上，后来请教了师兄才发现自己的问题，之后看了资料才明白。

收获：今天学到了Bootstrap 的网格系统，网格系统的实现原理很简单，可以将网格系统理解为表格。它通过定义容器的大小，将其平均分为12等份，再调整内外边距，结合媒体查询（Media Query），做出比较时髦的响应式网格系统。网格系统通过行（row）和列（column）的组合来创建页面布局，其遵循如下规则。1.row必须包含在样式为.container或者container-fluid的容器中。其中.container-fluid宽度为100%，使用此样式的目的是为了在网格系统中能够更好的排列。这两个样式一般用于div标签上面。container支持响应式设计，其在媒体查询样式上做了如下处理。其中768px、990px、1200px将屏幕分为四个区间段：当屏幕<768px时，.container使用最大宽度，效果和.container-full一样。当屏幕≥768px时，.container宽度为750px。当屏幕≥990px时，.container宽度为970px。当屏幕≥1200px时，.container宽度为1180px。2.列（column）必须包含在行（row）中，而其他标签元素只能包含在列（column）中。其中，行使用.row样式，而列使用类似.col-lg-*的样式。网格系统中的列是通过指定1到12的值来表示其跨越的范围（比如col-log-*，这里的*代表1~12之间的一个数字）。行中的列样式数字总和不能超过12，如果超过12，则超过的元素将另起一行。通过设置行（row）与列（column）的padding、margin属性来抵消和增加其之间的间隔。