<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--响应式图片轮播的更多相关文章

  1. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  2. 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播

    1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...

  3. bootstrap的carousel图片轮播

    整个轮播是放在一个div .carousel和.slide的div中的, 包括3个部分: 1. 第一个部分indicator位于下方的指示器部分. 结构是一个ol和li, ol的类是carousel- ...

  4. 手机响应式js轮播基础

    onmousedown --->ontuchstart onmousemove --->ontouchmove onmouseup --->ontouchend ontuchstar ...

  5. bootstrap 响应式图片自适应图片大小

    <img src="..." class="img-responsive center-block" > 或者 $(window).load(fun ...

  6. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  8. 响应式图片菜单式轮播,兼容手机,平板,PC

    昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...

  9. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

随机推荐

  1. JavaScript setInterval 与 setTimeout 区别

    setInterval:一直循环调用函数,不会停止:需要用 clearInterval 去停止 setTimeout:只调用一次

  2. Ubuntu16.04.2安装Tensorflow

    安装aptitude $ sudo apt-get install aptitude 安装python-pip python-dev $ sudo aptitude install python-pi ...

  3. 华为mate 10 pro安装失败,提示没有未包含任何证书

    原因: Android 7.0 引入一项新的应用签名方案 APK Signature Scheme v2,它能提供更快的应用安装时间和更多针对未授权 APK 文件更改的保护.在默认情况下,Androi ...

  4. javamail模拟邮箱功能--邮件回复-中级实战篇【邮件回复方法】(javamail API电子邮件实例)

    引言: JavaMai下载地址l jar包:http://java.sun.com/products/javamail/downloads/index.html 此篇是紧随上篇文章而封装出来的,阅读本 ...

  5. rabbitmq之后台管理和用户设置(三)

    前言 前面介绍了erlang环境的安装和rabbitmq环境安装,接下来介绍rabbitmq的web管理和用户设置. 启用后台管理插件 通过后台管理插件我们可以动态监控mq的流量,创建用户,队列等. ...

  6. 使用dork脚本来查询Google

    使用dork脚本来查询Google 了解Google Hacking数据库的第一步是了解所有典型的Google运算,就像机器级编程工程师必须了解计算机操作代码一样. 这些Google运算是Google ...

  7. Linux MySQl 5.7.17 MySQL ERROR 1366(HY000):Incorrect string value 解决方法

    MySQL ERROR 1366(HY000):Incorrect string value,在往数据库中插入中文的时候会出现. 这也就是编码问题,网上大部分都是说设置下配置文件中的设置,而可悲的是在 ...

  8. 关于mysql的wait_timeout参数 设置不生效的问题【转】

    关于wait_timeout 有一次去online set wait_timeout 的时候发现改了不生效,如下: mysql> show variables like 'wait_timeou ...

  9. python基础-类的属性(类属性,实例属性,私有属性)

      一:类的属性 类的属性分为:类属性(公有属性),实例属性和私有属性. 1)类属性(公有属性(静态字段): 类定义时直接指定的属性(不是在__init__方法中),可以通过类名直接访问属性,并且保存 ...

  10. ORA-12514: TNS:listener does not currently know of service …

    问题描述: 今天数据库查询时遇到问题,具体情形如下截图所示: 问题分析: 看错误明显是TNS监听有问题,要么配置错了,要么数据库没起来.但是当前数据库起来了,也能正常连接使用,因此 考虑被查询对象可能 ...