Bootstrap之轮播图
来源:互联网 发布:域名西部数码 编辑:程序博客网 时间:2024/05/16 09:43
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>轮播图-bootstrap</title> <script src="../../Scripts/jquery-2.2.0.js" type="text/javascript"></script> <script src="3.3.6/bootstrap.min.js" type="text/javascript"></script> <link href="3.3.6/bootstrap.css" rel="stylesheet" type="text/css" /></head><body> <!-- carousel-轮播、slide-滑动 --> <div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标(indicators) --> <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> <!-- 轮播图--> <div class="carousel-inner"> <div class="item active"> <img src="upload/slide1.png" /> </div> <div class="item"> <img src="upload/slide2.png" /> </div> <div class="item"> <img src="upload/slide3.png" /> </div> </div> <!-- 轮播导航,即左右按钮 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div></body></html>
上面代码是根据官网的例子所写的。(http://caibaojian.com/bootstrap/javascript.html#carousel)
核心代码有以下三个部分组成:
轮播指标-即图片的中下部分的小圆点 ,一般用来选择图片。
轮播图-需要轮播的图片。
轮播导航-左右按钮。
这三部分都必须中一个div中。
同时一个轮播图对应着一个轮播指标。
效果图
每个版本的boostrap的轮播图都不一致,甚至有些无法显示轮播指标。
上图是3.3.6版本的。下面请看其他版本的效果图。
下图为2.3.2版本的效果图。
最为夸张的是2.2.2版本的,三个可爱的小圆点直接变成了123。
3 优化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>轮播图-bootstrap</title> <script src="../../Scripts/jquery-2.2.0.js" type="text/javascript"></script> <link href="3.3.5/bootstrap.css" rel="stylesheet" type="text/css" /> <script src="3.3.5/bootstrap.js" type="text/javascript"></script></head><body> <div class="col-md-8 col-md-offset-2"><!-- 优化1:居中 --> <h1>优化</h1> <!-- carousel-轮播、slide-滑动 --> <div id="myCarousel" class="carousel slide"> <!-- 轮播(Carousel)指标(indicators) --> <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> <!-- 轮播项目--> <div class="carousel-inner"> <div class="item active"> <img src="upload/slide1.png" /> </div> <div class="item"> <img src="upload/slide2.png" /> </div> <div class="item"> <img src="upload/slide3.png" /> </div> </div> <!-- 轮播导航,即左右按钮 --><!-- 优化2:使用Glyphicons 字体图标代替‹› --> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> </a> </div> </div></body></html>
效果图:
4 完整代码下载
http://download.csdn.net/detail/yy228313/9444564
0 0
- Bootstrap之轮播图
- bootstrap之bootstrap&type样式
- Bootstrap轮播图
- bootstrap轮播图
- bootstrap轮播图
- Bootstrap库之Modals
- Tomcat 之 Bootstrap
- bootstrap 之 css
- bootstrap 之 组件
- bootstrap 之 基本知识
- bootstrap 之准备开发
- bootstrap 之 CSS样式
- bootstrap 之 LESS
- Bootstrap 之 tab 改
- Bootstrap学习之模态框
- bootstrap之初
- Bootstrap之表格
- appium框架之bootstrap
- Matlab做快速傅里叶变换
- 初学Phaser.js之管中窥豹
- 【CSS3】box-sizing 属性
- 漫谈android系统(1)解析android编译
- Fragment 操作原理
- Bootstrap之轮播图
- 使用BP神经网络做预测
- 保存数据时报:Incorrect string value: '\xF0\x9F\x91\x8D' for column 'f_char_name' at row 1
- 挥手夕阳无限美-15年终总结
- 几种常用 css3 选择器解释
- Hadoop族 版本变化
- HTML5拓扑图形组件设计之道(一)
- Objective-C(Cocoa)中NSNumber、NSValue,NSNull类的简单应用
- C++中this指针的用法详解