今日完成的事情：任务七修改及提交   任务八布局

明日计划完成：任务八首页

今日遇到的问题：如何使用bootstrapt把一行均分成五列  其他问题暂时没遇到，一直在排版布局任务八首页。

今日收获：

1.轮播图  

<div id="myCarousel" class="carousel slide">

    <!-- 轮播（Carousel）指标 -->

    <ol class="carousel-indicators">

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>   

    <!-- 轮播（Carousel）项目 -->

    <div class="carousel-inner">

        <div class="item active">

            <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">    添加自己的图片 

        </div>

        <div class="item">

            <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">

        </div>

        <div class="item">

            <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">

        </div>

    </div>

    <!-- 轮播（Carousel）导航 -->

    <a class="carousel-control left" href="#myCarousel" 

       data-slide="prev"> <span _ngcontent-c3="" aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>

    <a class="carousel-control right" href="#myCarousel" 

       data-slide="next">&rsaquo;</a>

</div>

2.  bootstrap均分成五列

Bootstrap 的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。但在实际的需求中可能出现不能被12整除的列数时（比如一行平分为5列），需要一些其他的方案解决。

通过相关资料的调查，列举两种方案（以一行五列举例）：

修改 Bootstrap 源代码

自定义五列的 CSS 类

修改bootstrap源代码

根据官方文档，Bootstrap可以从 Less/Sass 源码编译而来，Bootstrap包含了一组 Less 变量和 mixin 用于帮你生成简单、语义化的布局。通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。我们使用这些变量生成预定义的栅格类，如下所示：

@grid-columns:            12;

@grid-gutter-width:       30px;

@grid-float-breakpoint:    768px;

通过修改变量 @grid-columns ，可以重新制定栅格系统的预定义列数，可以满足应用的特殊布局需求，但同时这种方法也有很大的不足：

对应用程序中已有的布局代码会有严重的损害，原来使用以12列为基础的代码都要调整；

由于修改了默认的列值，程序员在编写代码时要格外注意，系统的兼容性和扩展性都存在很大挑战。

参考文档：

http://v3.bootcss.com/css/#grid-less

自定义五列的 CSS 类

这种方法相对简单的，自定义一套CSS类，尽量和Bootstrap风格保持一致。

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths {

    position: relative;

    min-height: 1px;

    padding-right: 10px;

    padding-left: 10px;

}

@media ( min-width : 768px) {

    .col-sm-5ths {

        width: 20%;

        float: left;

    }

}

@media ( min-width : 992px) {

    .col-md-5ths {

        width: 20%;

        float: left;

    }

}

@media ( min-width : 1200px) {

    .col-lg-5ths {

        width: 20%;

        float: left;

    }

}----转自yan

3. 圣杯布局 双飞翼布局

   圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

    代码比较长，不贴出来啦，参考https://segmentfault.com/a/1190000012213999