Bootstrap--响应式图片轮播
<div class="row">
<div class="span12">
<section id="carousel">
<div class="page-header">
<h1>轮播(Carousel) <small>bootstrap-carousel.js</small></h1>
</div> <div class="bs-docs-example">
<div id="myCarousel" class="carousel slide">
<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="~/Images/1.jpg" />
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="~/Images/1.jpg" />
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="~/Images/1.jpg" />
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</section> </div>
</div>
Bootstrap--响应式图片轮播的更多相关文章
- (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播
ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- bootstrap的carousel图片轮播
整个轮播是放在一个div .carousel和.slide的div中的, 包括3个部分: 1. 第一个部分indicator位于下方的指示器部分. 结构是一个ol和li, ol的类是carousel- ...
- 手机响应式js轮播基础
onmousedown --->ontuchstart onmousemove --->ontouchmove onmouseup --->ontouchend ontuchstar ...
- bootstrap 响应式图片自适应图片大小
<img src="..." class="img-responsive center-block" > 或者 $(window).load(fun ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- 响应式图片菜单式轮播,兼容手机,平板,PC
昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
随机推荐
- Mongo 后台加索引踩坑
背景,随着mongo数据量变大,查询效率变低,要对索引进行优化,所在公司对mongo依赖比较严重,而DBA并不对mongo的权限做控制,所以每个后端开发都有mongo的读写权限,通常每个人各自管理自己 ...
- jvm如何判断对象是否可以被回收
内容基本来自周志明 深入理解Java虚拟机 第二版 第三章 .这本书还可以,不过好像也没什么其他中文的关于jvm比较好的书了 jvm要做垃圾回收时,首先要判断一个对象是否还有可能被使用.那么如何判断一 ...
- java抽象类和普通类的区别
1.抽象类不能被实例化. 2.抽象类可以有构造函数,被继承时子类必须继承父类一个构造方法,抽象方法不能被声明为静态. 3.抽象方法只需申明,而无需实现,抽象类中可以允许普通方法有主体 4.含有抽象方法 ...
- Java并发编程原理与实战三十五:并发容器ConcurrentLinkedQueue原理与使用
一.简介 一个基于链接节点的无界线程安全队列.此队列按照 FIFO(先进先出)原则对元素进行排序.队列的头部 是队列中时间最长的元素.队列的尾部 是队列中时间最短的元素.新的元素插入到队列的尾部,队列 ...
- window对象中的一些重要的属性和方法(笔记)
setTimeout()方法用来实现一个函数在指定的毫秒数之后运行:setTimeout()返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行.由于历史原因,setTime ...
- ETL 自动化测试框架
分享个自己最近在做的自动化测试框架架构图. 数据的测试,入口一般定时任务.可添加参数选择执行任务的范围,也可以选择默认的执行范围.验证测试的为etl测试.数据库中的字段校验(通过对应关系.接口或者SQ ...
- 网站发布IIS后堆栈追踪无法获取出错的行号
一.问题起因 系统发布上线后,有时会发生错误,那么错误的记录就很重要,它对于错误的排查和问题的发现有着重要的作用,通常我们采取的方式为Log日志文件记录和数据库错误记录.文本不会讨论错误记录的方式以及 ...
- Office DDE漏洞学习笔记
1.前言 2017年下半年爆发出来的Office漏洞,一直没有空做笔记记录.在病毒分析中也看到有利用这个漏洞的样本,针对Office系列软件发起的钓鱼攻击和APT攻击一直是安全攻防的热点. 2.off ...
- MODULE_DEVICE_TABLE (二)【转】
转自:http://blog.csdn.net/uruita/article/details/7263290 1. MODULE_DEVICE_TABLE (usb, skel_table);该宏生成 ...
- 一个脚本和一个容易疏忽的问题strcmp、strncmp、memcmp的用法【原创】
一个容易疏忽的问题: strcmp.strncmp.memcmp, 对于memcmp进行字符串比较时可能会出现内存重叠的情况 status = strncmp(xdev->product, &q ...