Bootstrap轮播图学习使用

本文实例为大家分享了Bootstrap轮播图的具体代码，供大家参考，具体内容如下

<！doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><link rel="stylesheet" href="css/bootstrap.css" rel="external nofollow" /><style>#pic{width:900px;margin:0 auto;}.carousel-caption{color:#f00;}</style></head><body><！--carousel中文译为轮播，旋转木马 slide给图片添加运动效果； data-interval是间隔时间，不能低于400否则易出问题，单位为ms即毫秒； data-ride="carousel为页面一加载就开始轮播图片carousel-caption是在图片上放置文字--><div class="container"><div id="pic" class="carousel slide" data-interval="2000" data-ride="carousel"><！--小圆点--><ol class="carousel-indicators"><li class="active"></li><li></li><li></li><li></li></ol><！--轮播的图片--><div class="carousel-inner"><div class="item active"><img src="images/1.jpg"/><div class="carousel-caption"><h4>标题1</h4><p>xxxxxxxxxxxxxxxxxxxx</p></div></div><div class="item"><img src="images/2.jpg"/><div class="carousel-caption"><h4>标题2</h4><p>xxxxxxxxxxxxxxxxxxxx</p></div> </div><div class="item"><img src="images/3.jpg"/><div class="carousel-caption"><h4>标题3</h4><p>xxxxxxxxxxxxxxxxxxxx</p></div> </div><div class="item"><img src="images/4.jpg"/><div class="carousel-caption"><h4>标题4</h4><p>xxxxxxxxxxxxxxxxxxxx</p></div> </div></div><！--左右按钮--><a href="#pic" rel="external nofollow" rel="external nofollow" class="carousel-control left" data-slide="prev">‹</a><a href="#pic" rel="external nofollow" rel="external nofollow" class="carousel-control right" data-slide="next">›</a></div></div><script src="js/jquery-2.1.0.js"></script><script src="js/bootstrap.js"></script></body></html>

Bootstrap轮播图的效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。