一，今天的任务

 首先继续把任务七根据师兄的要求

进行了修改，优化了一下代码，规范

了一下css样式,然后在百度查了一下

bootstrap的相关资料，今天只学习

了bootstrap里面的栅格系统：

栅格系统用于通过一系列的行（row）与列

（column）的组合来创建页面布局。

栅格系统的基础概念：

网格（Gird）：栅格系统的最小原子单位

• 列、水槽（Column、Gutter）
• 栅格总宽（Container）
• 边距（Margin）
• 盒子/区域（Col-n）

举例说明：

 1指的容器container,
横条2最左边粉色和最右边紫色指的所谓的留白。
横条3指的单独使用row时，因为外边距为-15px,所以向两边延伸出15px距离
横条4指的两者结合使用，row多延伸的弥补了container的留白，使其充满容器
横条5指的12列自由组合

当然，在栅格系统中 Less 文件中使用以下媒体查询（media query）来创建关键的分界点阈值：

/* 超小屏幕（手机，小于 768px） */
 /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */
 /* 小屏幕（平板，大于等于 768px） */ @media (min-width: @screen-sm-min) { ... }
 /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... }
 /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... }

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。