Bootstrap学习笔记—学习制作轮播

Bootstrap学习笔记—学习制作轮播

代码：

<div id="myCarousel" class="carousel slide">
                <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>

                <div class="carousel-inner">
                    <div class="item active" style="background: url(../img/test02.jpg); background-size: cover;">
                        <img src="../img/test02.jpg" class="img-responsive" alt="First slide">
                    </div>
                    <div class="item" style="background: url(../img/test02.jpg); background-size: cover;">
                        <img src="../img/test02.jpg" class="img-responsive" alt="Second slide">
                    </div>
                    <div class="item" style="background: url(../img/test02.jpg); background-size: cover;">
                        <img src="../img/test02.jpg" class="img-responsive" alt="Third slide">
                    </div>
                </div>
                <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
            </div>

注释：

1、轮播：div id="myCarousel" class="carousel slide"

2、轮播指标：

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

3、轮播项目：

 <div class="carousel-inner">
      <div class="item active">
         <img src="" alt="First slide">
      </div>
      <div class="item">
         <img src="" alt="Second slide">
      </div>
      <div class="item">
         <img src="" alt="Third slide">
      </div>
   </div>

4、轮播导航：

 <a class="carousel-control left" href="#myCarousel" 
      data-slide="prev">&lsaquo;</a>
 <a class="carousel-control right" href="#myCarousel" 
      data-slide="next">&rsaquo;</a>