本文主要为大家详细介绍了Bootstrap图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。
导言
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
【相关视频推荐:Bootstrap教程】
示例
下面演示图片的轮播,使用bootstrap中的Carousel显示循环播放元素插件。
<p id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <p class="carousel-inner" role="listbox"> <p class="item active"> <img src="..." alt="..."> <p class="carousel-caption"> ... </p> </p> <p class="item"> <img src="..." alt="..."> <p class="carousel-caption"> ... </p> </p> ... </p> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </p>
在src中插入图片已为图片设置大小
还可以为其加上标题
<p class="item"> <img src="..." alt="..."> <p class="carousel-caption"> <h3>...</h3> <p>...</p> </p> </p>
相关推荐:
以上就是Bootstrap图片轮播效果实现方法的详细内容,更多请关注php中文网其它相关文章!
已抢17003个
抢已抢49951个
抢已抢184260个
抢已抢66097个
抢已抢350399个
抢已抢664218个
抢