Bootstrap: 样式CSS:carousel轮换 图片的使用
2016-06-01 17:17
507 查看
Bootstrap 轮播(Carousel)插件
Bootstrap轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。![](http://www.runoob.com/images/quote.png)
如果您想要单独引用该插件的功能,那么您需要引用 carousel.js。或者,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。
js和css的引入:
<link href="scripts/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <script type="text/javascript" src="scripts/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="scripts/bootstrap/3.3.4/js/bootstrap.min.js"></script>
html代码
<body> <div id="myCarousel" class="carousel slide"> <!-- 轮播(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/snLine.gif" alt="First slide"> </div> <div class="item"> <img src="images/snLine.jpg" alt="Second slide"> </div> <div class="item"> <img src="images/usLine2.jpg" alt="Third slide"> </div> </div> <!-- 轮播(Carousel)导航 --> <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a> </div> </body>
效果图:
![](https://images2015.cnblogs.com/blog/760686/201606/760686-20160601171634602-923441268.png)
相关文章推荐
- Bootstrap 表单
- 2016年6月1日下午(传智Bootstrap笔记(Bootstrap标签、徽章、超大屏幕))
- Bootstrap 表格
- 2016年6月1日下午(传智Bootstrap笔记(Bootstrap分页))
- Bootstrap3.0建站教程(一)之bootstrap表单元素排版
- 2016年6月1日下午(传智Bootstrap笔记(Bootstrap 导航栏元素))
- Bootstrap 折叠(Collapse)插件用法实例详解
- Bootstrap 附加导航(Affix)插件实例详解
- Twitter bootstrap模糊查询插件 ajax获取内容
- Yaf之配置和Bootstrap
- Bootstrap 排版
- Boostrap-table.js的表格数据可视化 集成bootstrap-editable.js
- Java JavaEE框架Bootstrap、HTML5、jQuery、SpringMVC
- Bootstrap Datatable 简单的基本配置
- bootstrap-table的入门使用——从服务器获取数据
- bootstrap常用类名
- bootstrap学习总结-css样式设计(一)
- bootstrap使用问题记录1
- Bootstrap学习指南
- bootStrap实习原理