Bootstrap轮播图

1. .carousel-indicators：指定小圆点

2. data-slide-to 属性用于表示每一项的下标

3. .active 表示当前活动项

4. .carousel-inner表示轮播项目，内部可以有多个 .item

5. .carousel-caption ：为每一个幻灯片添加标题

6. .carousel-control：导航切换，使用 data-slide 属性定义切换方向， prev上一张，next下一张

7. .carousel-indicators和.carousel-control需要通过 href 属性或者 data-target 指定所属的轮播控件的id

8.      加上 data-ride=“carousel” 就可以实现自动播放了

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators - 小圆点-->
        <ol class="carousel-indicators">
            <!-- data-target指定具体哪一个轮播控件 -->
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <!-- ？？？？不生效 -->
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>

        </ol>
      
        <!-- Wrapper for slides ---图片---真正的轮播内容--->
        
      
        <!-- Controls ---按钮-->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>

效果：