轮播图就不做过多的介绍了，大家都知道，只是轮播的实现有多种方式，例如使用纯js写，费时费力，且还不适用于各种终端设备，但是bootstrap就不一样了，只需写一套代码，无论是手机端还是ipad端，再或者是PC端，都可以正常使用。
那么接下来我们就来看看bootstrap是如何实现轮播图的。
步骤：
准备轮播需要的图片，大于等于两张。
准备bootstrap的css和js以及jquery1.10+的js文件文件，这个网上一搜一大堆，也可以去官网下载。
将下载的css文件放入项目的css目录内，js文件放如js目录内，以及图片放在img(专放图片)的文件夹内。
在html中写代码，代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="myCarousel" class="carousel" data-ride="carousel"> <!--图片的容器--> <div class="carousel-inner"> <div class="item active"> <a href="index.html"><img src="image/ylimg1.jpg" /></a> <div class="carousel-caption"> <h3>这是第一张图片</h3> </div> </div> <div class="item"> <img src="image/ylimg2.jpg" /> <div class="carousel-caption"> <h3>这是第二张图片</h3> </div> </div> </div> <!--圆圈指示符--> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> </ol> <!--左右的按钮--> <a href="#myCarousel" class="left carousel-control" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a href="#myCarousel" class="right carousel-control" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </body> </html>
运行结果如下所示：
