今天完成的事情：完成任务九

明天计划的事情：完成任务十

遇到的问题及收获如下：

1.bootstrap轮播插件

内容可以是图像，视频，内嵌框架等任何你想要放置的内容

使用规则：

给div添加myCarousel

<div id="myCarousel" "carousel slide">
   <!-- 轮播（Carousel）指标 -->
   <ol "carousel-indicators">
       <li data-target="#myCarousel" data-slide-to="0" "active"></li>
       <li data-target="#myCarousel" data-slide-to="1"></li>
       <li data-target="#myCarousel" data-slide-to="2"></li>
   </ol>
   <!-- 轮播（Carousel）项目 -->
   <div "carousel-inner">
       <div "item active">
           <img src="img/cm.jpg" alt="First slide">
       </div>
       <div "item">
           <img src="img/cm.jpg" alt="Second slide">
       </div>
       <div "item">
           <img src="img/cm.jpg" alt="Third slide">
       </div>
   </div>
   <!-- 轮播（Carousel）导航 -->
   <a "carousel-control left" href="#myCarousel"
      data-slide="prev"><span>&lsaquo;</span></a>
   <a "carousel-control right" href="#myCarousel"
      data-slide="next"><span>&rsaquo;</span></a>
</div>

2.栅格布局

bootstrap内置的一套响应式，移动设备优先的栅格系统，随着屏幕设备或视口尺寸的增加，系统最多分为12列，他是通过一系列的行row 与列column的组合创建页面布局，然后内容可以放入创建好的布局当中。

使用规则:

行row必须包含在容器container中，一边为其赋予合适的对齐方式和padding

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

使用container-fluid可以使container占据100%宽度

行row中可以添加列column，但列不可以超过平分的总列数，如

<div class="container"> <div class="row"> <div class="col-md-4"></div> <div

他们之间的关系container>row>column

col需要占多少列宽度时，用col-xx-xx表示，比如col-xs-2，表示在超小屏幕下占据2个列宽度

.col-xs-* ：超小屏幕、手机 (<768px)
.col-sm-* ：小屏幕 平板 (≥768px)
.col-md-* ：中等屏幕 桌面显示器 (≥992px)
.col-lg-* ：大屏幕 大桌面显示器 (≥1200px)

同时使用多个col-xx 组合拳可以达到不同宽度下的自适应

注意：

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

CONTAINER Container 有两个作用：

在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化，container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比，所以他们的值不需要变化。

提供一个水平方向的 padding，使其内部的内容不会接触到浏览器的边界，大小为15px。不需要也不应该在 container 中嵌套另一个 container。 同时 row 还有一个很特殊的地方，就是左右各有 －15px 的 margin。这样也就抵消了上面提到的 container 中15px的 padding，COLUMN 每个column 也会有15px的水平方向的 padding，由于 row 的 margin 为－15px，那么位于两边的 column 就碰到了 container 的边界。但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container，同时 不同column的内容之间就有了30px的槽。