今天完成的事情：
任务8第一个页面除了导航栏以外的都添加了响应式效果

明天计划的事情：
休息。。
做完8.1 做一丢丢8.2

遇到的问题：

给内容实现响应式主要是引用的bootstrap的栅格布局，关于bootstrap的栅格布局有严格的格式，不套用格式就会出现一些问题。

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

.container 类用于固定宽度并支持响应式布局的容器。

<div class="container">   ... </div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container-fluid">   ... </div>

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。
  
  ——————出自bootstrap官网介绍文档

因为我在自己百度是时候看到了一个说法就是栅格没必要套用在container里面，我自己尝试的时候没有套用container以及row，直接给div命名col-lg-3之类的也起了效果，所以觉得没多大问题。
当做完第一个栅格系统，开始写第二个栅格系统的时候，由于这两个栅格系统没有上级容器固定，栅格是用float写的，这时候两个栅格系统就会由于浮动的原因产生挤压。
解决方法要么是严格套用栅格的格式，要么给（没有用栅格格式）的栅格系统的父元素添加一个overflow：hidden。
这个声明等于给栅格系统父元素限制了一个视口的宽度，从而使栅格系统各子元素能在该父元素下有序排列，两个栅格系统之间也不会因为浮动而产生冲突。

另外在调整栅格各元素的样式的时候仅仅靠栅格的默认样式（主要是宽高）来实现想要的效果很难，需要配合多重媒体查询并覆盖之前的样式。bootstrap的栅格应该就是接受度比较广的固定媒体查询样式，到后面的任务需要自己写库的时候可能还好一点。

收获
收获了更多的耐心，在响应式页面里面图片或者文字的定位要在不同媒体查询结果下调试，重复很多遍。
对栅格的属性理解更深，bootstrap库也并不是高大上的，只是接受度较广的工具。