Bootstrap学习之五:图片轮播
来源:互联网 发布:2017程序员 编辑:程序博客网 时间:2024/04/30 16:46
@(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.W3CschoolBootstrap教程
阅读全文
0 0
- Bootstrap学习之五:图片轮播
- bootstrap图片轮播
- Bootstrap图片轮播
- Bootstrap图片轮播
- 【BootStrap】图片轮播
- BootStrap图片轮播
- Bootstrap 图片轮播
- Bootstrap图片轮播
- Bootstrap---图片轮播
- bootstrap图片轮播
- BootStrap图片轮播做法
- bootstrap实现图片轮播
- 基于bootstrap的网页开发之图片轮播
- Bootstrap 学习之 (五) ------ 图片及辅助类
- BootStrap(五)折叠和轮播
- Bootstrap之轮播 carousel
- Bootstrap学习js插件篇之轮播
- 【Bootstrap】图片轮播组件Carousel
- 设计模式之建造型-原型模式(5)
- 关于MySQL变量innodb_rollback_on_timeout一些讨论
- R语言基于RJDBC实现oracle/mysql数据库操作
- python 常用函数
- JS弹出提示框
- Bootstrap学习之五:图片轮播
- Python次位面——获取命令行参数
- 20170525_WPSC++实习_电话面试
- 磁疗有用吗?恒定磁场对骨折愈合的影响
- PHP基础知识
- ObjectARX编程(三) --------数据库的介绍
- java调用webservice服务
- Ext Js入门第8篇-适用工具
- NodeJS中模块和包