Bootstrap图片轮播效果详解
作者:阿浩yohann 时间:2023-08-24 20:31:55
导言
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
示例
下面演示图片的轮播,使用bootstrap中的Carousel显示循环播放元素插件。
<div 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 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- 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>
</div>
在src中插入图片已为图片设置大小
还可以为其加上标题
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>
参考
1.Bootstrap官网中文文档
2.菜鸟学堂Bootstrap教程
来源:http://blog.csdn.net/qq_27346299/article/details/72730522
标签:Bootstrap,图片轮播
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python sklearn常用分类算法模型的调用
2021-06-18 11:42:25
Python实现将Excel转换成xml的方法示例
2023-01-19 23:02:53
一文带你梳理Python的中级知识
2022-03-13 14:36:29
Python操作PDF文件之实现A3页面转A4
2021-03-06 19:45:06
![](https://img.aspxhome.com/file/2023/9/69059_0s.jpg)
django框架之cookie/session的使用示例(小结)
2023-06-24 08:24:42
keras model.fit 解决validation_spilt=num 的问题
2023-11-07 19:11:52
![](https://img.aspxhome.com/file/2023/2/87482_0s.jpg)
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2021-10-28 05:37:14
![](https://img.aspxhome.com/file/2023/5/127645_0s.png)
分组后分组合计以及总计SQL语句(稍微整理了一下)
2024-01-26 23:10:51
![](https://img.aspxhome.com/file/2023/9/94419_0s.jpg)
快速创建python 虚拟环境
2023-10-04 08:58:31
![](https://img.aspxhome.com/file/2023/9/95379_0s.png)
从数据行入手保护SQL Server数据安全
2009-04-13 10:28:00
![](https://img.aspxhome.com/file/UploadPic/20094/2009413132414109.jpg)
python中的编码和解码及\\x和\\u问题
2023-11-02 14:46:31
在任意字符集下正常显示网页的方法二(续)
2023-11-22 17:36:14
python学习之新式类和旧式类讲解
2021-02-27 11:10:38
![](https://img.aspxhome.com/file/2023/1/108141_0s.png)
详解Python中的时间格式的读取与转换(time模块)
2021-01-09 17:02:38
![](https://img.aspxhome.com/file/2023/6/100936_0s.png)
python中@contextmanager实例用法
2021-07-18 18:19:11
使用 iframe 获取网页片段的一个好处
2008-12-01 12:37:00
Python快速转换numpy数组中Nan和Inf的方法实例说明
2021-11-12 06:24:03
Vue路由切换和Axios接口取消重复请求详解
2024-04-30 10:28:17
Python函数进阶与文件操作详情
2023-09-12 17:24:33
![](https://img.aspxhome.com/file/2023/9/65849_0s.png)
webpack cjs运行时分析示例详解
2024-04-19 09:51:56
![](https://img.aspxhome.com/file/2023/2/136072_0s.jpg)