Bootstrap 轮播(Carousel)插件
轮播插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是非常灵活的。可是图像，内嵌框架，视频或者其它您想的放置任何内容的类型。
下面是一个简单的幻灯片，使用轮播(carousel)插件显示一个循环播放元素的通用组件，为了现实轮播，您只需要添加带有标签的代码即可。
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<script src="jQuery/jquery-2.1.4.js"></script>
<link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"style="padding:20px">
<div class="carousel slide"id="myCarousel">
<!--轮播(carousel)指针-->
<ol class="carousel-indicators">
<li data-target="#myCarousel"data-slide-to="0"class="active"></li>
<li data-target="#myCarousel"data-slide-to="1"></li>
<li data-target="#myCarousel"data-slide-to="2"></li>
</ol>
<!--轮播(carousel)项目-->
<div class="carousel-inner">
<div class="item active">
<img src="Images/slide1.png"alt="First slide" />
</div>
<div class="item">
<img src="Images/slide2.png"alt="Second slide" />
</div>
<div class="item">
<img src="Images/slide3.png" />
</div>
</div>
<!--轮播(Carousel)导航-->
<a href="#myCarousel"class="carousel-control left"data-slide="prev">‹</a>
<a href="#myCarousel"class="carousel-control right"data-slide="next">›</a>
</div>
</div>
</body>
</html>
Bootstrap 轮播(Carousel)插件的更多相关文章
- Bootstrap 历练实例-轮播(carousel)插件的事件
事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- 第124天：移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- BootStrap 轮播 Carousel
参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse 同样 启动方式有2种 一种是在div的class中加 另 ...
- Bootstrap 轮播（Carousel）插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- Bootstrap 轮播（Carousel）详解
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...
- 第二百四十八节，Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一．轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
- Bootstrap历练实例：轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- bootstrap轮播图 两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
随机推荐
- [AHOI2009]飞行棋 BZOJ1800
题目描述 给出圆周上的若干个点,已知点与点之间的弧长,其值均为正整数,并依圆周顺序排列. 请找出这些点中有没有可以围成矩形的,并希望在最短时间内找出所有不重复矩形. 输入输出格式 输入格式: 第一行为 ...
- AT2341 Increasing Numbers
传送门 还是猜结论呢 然后我们就想我们可以每次去掉尽量多的位数来保证次数最小,假装这是对的,先写一发,A了 考虑如何去掉尽量多的位数,我们可以找到最大的几位的不下降序列,把最后一个-1,后面全部改成9 ...
- PAT甲级——1093 Count PAT's (逻辑类型的题目)
本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/93389073 1093 Count PAT's (25 分) ...
- 10g duplicate and 11g dupliacte db for standby
###################10g Creating a Physical Standby Database OASSTBY Make sure database is in archive ...
- Python解析CSV中的多维字典
CSV文件结构如下,其中字段A为唯一 代码如下,Python27 with open(file_obj+'TEST.CSV','r') as f: #转为字典 Reader=csv.DictReade ...
- nginx 添加https支持
自行颁发不受浏览器信任的SSL证书为晒晒IQ网颁发证书.ssh登陆到服务器上,终端输入以下命令,使用openssl生成RSA密钥及证书. # 生成一个RSA密钥 $ openssl genrsa -d ...
- 用boost模块加速你的drupal站
boost模块可以对 html, xml, ajax, css, javascript进行缓存,极大提升游客访问的速度,几乎可以和静态页面媲美.下载boost http://drupal.org/p ...
- 让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊,一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含的方式,让javascript加载速度 ...
- Comparing Two High-Performance I/O Design Patterns--reference
by Alexander Libman with Vladimir GilbourdNovember 25, 2005 Summary This article investigates and co ...
- sql server数据类型char和nchar,varchar和nvarchar,text和ntext
varchar和nvarchar的区别: varchar(n)长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储大小为输入数据的字节 ...