Bootstrap图片轮播效果详解
作者:阿浩yohann 发布时间:2023-08-24 20:31:55
标签:Bootstrap,图片轮播
导言
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
0
投稿
猜你喜欢
- 1.根据id获取元素document.getElementById("id属性的值");返回值是一个元素对象案例:点击按
- 一、判断大型网站的标准1、pv(page views)网页的浏览量概念 一个网站所有的页面,在24小时内被访问的总的次数。千万级别,百万级别
- 工作闲余,除抱有浓厚兴趣领域,我很不喜欢看些晦涩难懂的文字,于是想像茶余饭后的闲聊,随谈点话题。一次和一朋友吃饭聊天,随便聊到了他最近做的一
- 概述:本控件使用 html+css+javascript模拟HTML内置的select元素,实现其部分方法与属性,也增加了一部分功能,并且从
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 20 - A Few Mootools Tabs项
- JS 添加千分位,测试可以使用<script language="javascript" type="t
- 你是否曾经想在数据库中存储一个日期而没有时间部分,或者想存储一个时间值希望有更高的精度?在SQL Server 2008的介绍中,微软介绍了
- 我们也可以来做一个,但这个“定时器”的工作时间范围应控制在1个小时至100 毫秒之间: <%sub StartTi
- 不加(0)的用法:set rs=conn.execute(sql)'将这个结果赋给rs这时要读取这个记录集第一个字段的数据就用rs(
- 大概在九九年做游戏网站的时候,就对文章的发布感到麻烦,不过那会儿玩ASP不精。只是将就用着。在遇到长文件 10000 字时网页就是一大片长了
- 要实现此效果需要 1 个步骤: 第 1 步: 把下面的代码加到<BODY></BODY&g
- 简单的说,组织体系指的就是组织信息的方式。看了一堆拗口的定义后,我根据自己的理解画了下面这个图:从上图看出,同样的图形元素由于采用了不同的组
- 本篇文档旨在介绍如何安装配置基于2台服务器的MySQL集群。并且实现任意一台服务器出现问题或宕机时MySQL依然能够继续运行。注意!虽然这是
- 来蓝色一直都在潜水,很少写帖子,太对不起大家了.下面和大家探讨一个话题,希望能引起大家的兴趣.关于H1,一直都想和大家讨论H1用法的问题,可
- 集群是一种实现高可用性的有效解决方案,有时它会适得其反。而且,它还非常昂贵。因此,数据库管理员可使用日志转移代替集群来提供较高的可用性。日志
- 使用xmlhttp中的getResponseHeader 从响应信息中获取指定的http头strValue = oXML
- $array=explode(separator,$string); $string=implode(glue,$array);使用和理解这
- 最近,我在做网页的时候,经理老是反应网页中一些栏目中没有背景图片。我说:背景图片有的,你刷新看看。但是他说:我可以刷新看看,但是你不能老是让
- 良好的编程习惯是每个程序员都应该具备的工作素质,在我的软件生涯中屡屡发现一些程序员的身上总有这样或者那样的坏毛病。这些毛病在一些从业时间不是
- 3月27日,淘宝网获得了由国际权威机构G-CEM颁发的2008年度亚洲区在线客户体验大奖,这是全球互联网企业首次获得此殊荣。如何在让买家更方