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 ...
随机推荐
- 批量更新demo
因为批量更新数据库的时候,如果数据量太多,就会报错,这时候可以通过逻辑,批量更新,demo如下 @Test public void testbatch() { /** * 批量的值 */ int ma ...
- CF&&CC百套计划2 CodeChef December Challenge 2017 Penalty Shoot-out
https://www.codechef.com/DEC17/problems/CPLAY #include<cstdio> #include<algorithm> using ...
- CF&&CC百套计划2 CodeChef December Challenge 2017 Chef And his Cake
https://www.codechef.com/DEC17/problems/GIT01 #include<cstdio> #include<algorithm> using ...
- Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第七部分(Page 12)
编写你的第一个 Django app,第七部分(Page 12)转载请注明链接地址 本节教程承接第六部分(page 11)的教程.我们继续开发 web-poll应用,并专注于自定义django的自动生 ...
- typdef用法总结
typdef是在计算机编程语言中用来为复杂的声明定义简单的别名用的 typedef与#define有些相似,但更多的是不同,特别是在一些复杂的用法上,就完全不同了,在网上找了很多资料,结合自己遇到的各 ...
- jquery bxslider幻灯片样式改造
找了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样 ...
- 【AtCoder Grand Contest 012C】Tautonym Puzzle [构造]
Tautonym Puzzle Time Limit: 50 Sec Memory Limit: 256 MB Description 定义一个序列贡献为1,当且仅当这个序列 由两个相同的串拼接而成 ...
- 20155223 2016-2017-2 《Java程序设计》第7周学习总结
20155223 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 Lambdo表达式下,任何参数的类型必须标明清楚:如果有目标类型的话,在编译程序可 ...
- js正则匹配数字字母汉字
1,匹配所有字母数字汉字:^[A-Za-z0-9\u4e00-\u9fa5]+$2,清空某项:$('#id').empty()3,某项功能关闭,不再执行:$('#id').off()4,查看数据类型: ...
- fonts.googleapis.com 字体报错问题解决。
更多内容推荐微信公众号,欢迎关注: 无法加载这些字体是因为,google的网站在国内无法访问造成的.在AdminLTE.css 和AdminLte.less中有如下内容: @import url(ht ...