今天完成的事情：今天感觉效率很低，没干多少事情，只学习了一定Bootstrap中的栅格栏，控件和导航。

明天计划的任务：完成任务8的首页。

遇到的困难：1.对网页布局了解不深。第一次碰到宽度为1920的图片。开始没有用百分比布局。直接将在ps中测得的数据放进去。后来发现屏幕大小1400不到。。。参数得全部重新修改，烦躁。。。

收获：学习了bootstrap的栅格系统。

1.网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分12份。

数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。容器的源代码为

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  @media (min-width: 768px) {
  .container {
    width: 750px;
  }
  @media (min-width: 992px) {
  .container {
    width: 970px;
  }
  @media (min-width: 1200px) {
  .container {
    width: 1170px;
  }

从源代码可知，容器左右各存在15px的内间距。因此内容不能充满屏幕。且bootstrap中的container的默认宽度为定值。如果要让.container充满屏幕，需要对.container设置width:100%;

2.在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数。在行中存在默认的外左右间距，各为-15px，目的是为了抵消.container的内边距，实现左对齐。列中存在默认的外左右间距。为15px;所以也可理解为“列设置 padding 属性，从而创建列与列之间的间隔。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为行所包含的列抵消掉了padding。”