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

来源：互联网发布：linux 翻译软件编辑：程序博客网时间：2024/05/20 18:44

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>

0 0