<div id="carousel1" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/940x360/&text=Picture-1"/>
<div class="carousel-caption">
<h1 style="color:#CCC">标题1</h1><!--文字显示在图片上面&半透明黑色-->
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div> <div class="item">
<img src="http://placehold.it/940x360/&text=Picture-2"/>
<div class="carousel-caption">
<h1 style="color:#CCC">标题2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
</div>
</div> <div class="item">
<img src="http://placehold.it/940x360/&text=Picture-3"/>
<div class="carousel-caption">
<h1 style="color:#CCC">标题3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, .</p>
</div>
</div> <div class="item">
<img src="http://placehold.it/940x360/&text=Picture-4"/>
<div class="carousel-caption">
<h1 style="color:#CCC">标题4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
</div>
</div>
</div>
<a href="#carousel1" data-slide="prev" class="left carousel-control"><</a>
<a href="#carousel1" data-slide="next" class="right carousel-control">></a>
</div>

BootStrap2学习日记23---图片轮播的更多相关文章

  1. Android学习笔记之图片轮播...

    PS:一个bug又折腾了一个下午....哎... 学习内容: 1.Android利用ViewPager和PagerAdapter实现图片轮播... 2.使用反射机制获取Android的资源信息... ...

  2. ios 学习 广告图片轮播器

    // // ViewController.m // 图片轮播器 // // Created by zjj on 15/5/23. // Copyright (c) 2015年 zjj. All rig ...

  3. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

  4. Vue学习—Vue写一个图片轮播组件

    1.先看效果: 熟悉的图片轮播,只要是个网站,百分之90以上会有个图片轮播.我认为使用图片轮播. 第一可以给人以一种美观的感受,而不会显得网站那么呆板, 第二可以增加显示内容,同样的区域可以显示更多内 ...

  5. JavaScript学习---简易图片轮播

    效果如下: 图片定时轮播 点击左右控制显示下一张或上一张图片 index.html文件 <html> <head> <title> js编写实现幻灯片效果 < ...

  6. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  7. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. Android零基础入门第49节:AdapterViewFlipper图片轮播

    原文:Android零基础入门第49节:AdapterViewFlipper图片轮播 上一期学习了ExpandableListView的使用,你已经掌握了吗?本期开始学习AdapterViewFilp ...

  9. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

随机推荐

  1. SQL Server 索引 之 书签查找 <第十一篇>

    一.书签查找的概念 书签可以帮助SQL Server快速从非聚集索引条目导向到对应的行,其实这东西几句话我就能说明白. 如果表有聚集索引(区段结构),那么书签就是从非聚集索引找到聚集索引后,利用聚集索 ...

  2. Django 1.6 最佳实践: 如何正确使用 Signal(转)

    原文:http://www.weiguda.com/blog/38/ 如何正确的使用signal: 简单回答是: 在其他方法无法使用的情况下, 才最后考虑使用signal. 因为新的django开发人 ...

  3. WPF 判断是否为设计(Design)状态

    在WinForm开发中,一般会在窗体或者UserControl中判断当前是否为设计状态,如: if (!this.DesignMode) {     // } 有时候需要在Load事件中加上一些从服务 ...

  4. Android问题-DelphiXE5开发Andriod连接Webservice乱码问题

    问题现象:在使用DelphiXE5开发Andriod连接Webservice乱码. 问题原因:数据类型不同. 问题处理:为了不让广大朋友再烦恼,我就把解决办法写出来吧,把数据库中我们要查询的字段类型改 ...

  5. Python pexpec 解决scp ssh

    paswd_key = '.*assword.*'  匹配Password ssh_newkey = '.*(yes/no).*' 匹配 Are you sure you want to contin ...

  6. Arduino 模拟信号的读入并转化为0-5V电压

    int ledIn = A0; void setup(){ Serial.begin(9600); } void loop(){ int sensorValue = analogRead(ledIn) ...

  7. Java 理论与实践: 流行的原子——新原子类是 java.util.concurrent 的隐藏精华(转载)

    简介: 在 JDK 5.0 之前,如果不使用本机代码,就不能用 Java 语言编写无等待.无锁定的算法.在 java.util.concurrent 中添加原子变量类之后,这种情况发生了变化.请跟随并 ...

  8. Spring REST实践之Versioning,Paging和Sorting

    Versioning 为适应需求的变化以及兼容已有的API,需要创建新版本的API,一般有四种流行的版本化API的方法: URI版本化 URI参数版本化 Accept header版本化 自定义hea ...

  9. Android学习过程中遇到的问题

    1.使用在Activity布局之上重叠显示操作栏,第一次使用出现错误信息. 错误信息如下:java.lang.RuntimeException:Ubable to start activity Com ...

  10. 你可能不知道的Linux/GNU bash sort多列排序功能

    (转载请注明原创于潘多拉盒子) Linux man pages的缺点就是,如果你不会用某个命令,那么看完了多半还是不会.原因是,没有例子!比较囧吧? sort是提供了多列排序的功能的.通过-k选项,可 ...