今天完成的事：

今天开始做任务8了，这次准备开始学习使用bootstrap框架做，也在网上看了一些资料：

bootstrap是什么？

bootstrap是由Twitter公司研发的一种前端框架，bootstrap框架比较简洁，使用也是比较方便，所以bootstrap框架刚出来，就受到了很多人的欢迎。目前很多公司和企业都是使用bootstrap框架，可见是有多么火爆。

bootstrap框架怎么用？

首先，Bootstrap 出自 Twitter。由大公司发布，并且完全开源，自然久经考验，减少了测试的工作量。这也就是我们经常说到的站在巨人的肩膀上，不重复造轮子。

其次，Bootstrap 的代码有着非常良好的代码规范。在使用 Bootstrap 时也有助于我们去养成良好的编码习惯，在 Bootstrap 的基础之上创建项目，日后代码的维护也变得异常简单清晰。

第三，Bootstrap 是基于 Less 打造的，并且也有 Sass版本。Less/Sass是CSS的预处理技术，正因如此，它一经推出就包含了一个非常实用的 Mixin 库供我们调用，使得我们在开发过程中对CSS的处理更加简单。

第四，响应式开发。Bootstrap响应式的栅格系统（Grid System）非常先进，它已经帮你搭建好了实现响应式设计的基础框架，并且非常容易修改，如果你是一个新手，Bootstrap 可以帮助你在非常短的时间内上手响应式布局的设计。

第五，丰富的组件与插件。Bootstrap 的 HTML组件和 JS组件非常丰富，并且代码简洁，非常易于修改，如果你觉得它设计的样子不是你所想要的，你完全可以在其基础之上修改成自己想要的任何样子。由于 Bootstrap 的火爆，又出现了不少围绕 Bootstrap 而开发的JS插件，这就使得开发的工作效率得到极大提升。 

然后就是他的重点 栅格系统：

栅栏系统是通过定义容器大小，并将其等分12份，通过一系列行（row）与列（column)，结合媒体查询制作成强大的响应式栅格系统。

工作原理：

数据行（row）必须包含在 .container(固定宽度) 或 .container-fluid（100%宽度）中。以便为其赋予合适的排列（aligment）和内补（padding）。

通过行（row）在水平方向上创建一组列（column），随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。。

通过列（row）设置padding属性来创建列之间的间隔。通过.row设置负值margin从而抵消.container元素设置的padding（简介为行（row）所包含的列（column）抵消padding，也即后面实例中向外突出的原因）。

超过12列，多余的列另起一行

栅栏参数表：

.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;

  } 

明天的任务：

继续任务8

今天遇到的问题：

开始一直搞不懂bootstrap怎么用，看了好久，才渐渐明白了一点！

今天的收获：

明白了bootstrap的基本应用