Bootstrap图片轮播效果实现方法

来源：懂视网责编：小OO 时间：2020-11-27 20:05:55

Bootstrap图片轮播效果实现方法

导言；Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。【相关视频推荐：Bootstrap教程】。示例；下面演示图片的轮播，使用bootstrap中的Carousel显示循环播放元素插件。

推荐度：

点击下载本文 文档为doc格式

导读导言；Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。【相关视频推荐：Bootstrap教程】。示例；下面演示图片的轮播，使用bootstrap中的Carousel显示循环播放元素插件。

本文主要为大家详细介绍了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>

enter image description here

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Bootstrap图片轮播效果实现方法

推荐度：

点击下载本文 文档为doc格式

标签：图片实现效果

热门焦点

Bootstrap图片轮播效果实现方法

Bootstrap图片轮播效果实现方法

Bootstrap图片轮播效果实现方法

最新推荐

猜你喜欢

热门推荐