轮播图在每个网站中都是不可或缺的，而且基本上都是在网站首页最显眼的地方，轮播图实现的方法也有很多，今天的这篇文章就给大家来介绍一下bootstrap轮播图的实现方法，有兴趣的朋友可以看一下。
首先我们来看一个插件：Bootstrap 轮播（Carousel）插件
Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
所以说，bootstrap轮播图的实现我们需要利用Bootstrap 轮播（Carousel）插件，下面我们就来看一个具体的bootstrap轮播图实现的例子：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap轮播图</title> <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <ｓｃｒｉｐｔ src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></ｓｃｒｉｐｔ> <ｓｃｒｉｐｔ src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></ｓｃｒｉｐｔ></head><body><p 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）项目 --> <p class="carousel-inner"> <p class="item active"> <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide"> </p> <p class="item"> <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide"> </p> <p class="item"> <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide"> </p> </p> <!-- 轮播（Carousel）导航 --> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a></p> </body></html>
说明：如果想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
本篇文章到这里就全部结束了，更多精彩可以关注本站bootstrap教程栏目！！！
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）