<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible"content="IE=edge" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<!--[if lt IE 9]-->
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
<!--[endif]-->
<title>Bootstrap历练实例：轮播(carousel)</title>
<meta charset="utf-8" />
<link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />
<style>
.carousel {
height:500px;
}
.carousel .item{
height:500px;
}
.carousel .item img{
width:100%;

}
</style>
</head>
<body>
<div class="container">
<!--轮播(Carousel)指针-->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li class="active"data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel"data-slide-to="1"></li>
<li data-target="#myCarousel"data-slide-to="2"></li>
<li data-target="#myCarousel"data-slide-to="3"></li>
<li data-target="#myCarousel"data-slide-to="4"></li>
</ol>
<!--轮播(Carousel)项目-->
<div class="carousel-inner">
<div class="item active">
<img src="Images/chrome-big.jpg"alt="chrome" />
<div class="container">
<div class="carousel-caption">
<h4>Chrome</h4>
<p>Google Chrome，又称Google浏览器，是一个由Google（谷歌）公司开发的网页浏览器。</p>
<p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击我下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="Images/firefox-big.jpg"alt="firefox" />
<div class="container">
<div class="carousel-caption">
<h4>Firefox</h4>
<p>Mozilla Firefox，中文名通常称为“火狐”或“火狐浏览器”，是一个开源网页浏览器。</p>
<p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击按钮下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="Images/ie-big.jpg"alt="ie" />
<div class="container">
<div class="carousel-caption">
<h4>IE</h4>
<p>Internet Explorer，简称 IE，是微软公司推出的一款网页浏览器。</p>
<p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击按钮下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="Images/opera-big.jpg"alt="opera" />
<div class="container">
<div class="carousel-caption">
<h4>Opera</h4>
<p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
<p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击按钮下载</a></p>
</div>
</div>
</div>
<div class="item">
<img src="Images/safari-big.jpg"alt="safari" />
<div class="container">
<div class="carousel-caption">
<h4>Safari</h4>
<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
<p><a href="#"class="btn btn-primary btn-lg"role="button"target="_blank">点击按钮下载</a></p>
</div>
</div>
</div>
</div>
<!--轮播(carousel)导航-->
<a href="#myCarousel" data-slide="prev"class="carousel-control left">&lsaquo;</a>
<a href="#myCarousel"data-slide="next"class="carousel-control right">&rsaquo;</a>
</div>
</div>

<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
</body>
</html>

Bootstrap历练实例：轮播(carousel)的更多相关文章

  1. Bootstrap 历练实例-轮播(carousel)插件的事件

    事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...

  2. Bootstrap 历练实例-轮播(carousel)插件方法

    方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...

  3. Bootstrap 轮播(Carousel)插件

    轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...

  4. thinkphp标签实现bootsrtap轮播carousel实例

    thinkphp标签实现bootsrtap轮播carousel实例由于轮播carousel第一个div需要设置active样式才能正常显示,上面的圆点也同样需要数字,使用volist标签在循环的同时可 ...

  5. bootstrap 学习笔记 轮播（Carousel）插件

    Bootstrap轮播(carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除些之外,内容也是足够灵活的,可以是图像,内嵌框架,视频或者其他您想要旋转的任何类型的内容. 示例: 下面是不念 ...

  6. bootstrap 幻灯片（轮播）

    <!DOCTYPE html><html><head>    <meta charset="utf-8">     <titl ...

  7. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  8. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  9. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

随机推荐

  1. TOPOI 测验1320, 问题C: 4410: [CF41D]Pawn 解题报告

    题目链接 题目大意 在一个树阵中按一定走法取一些树,使和最大且被 k+1整除 解题思路 类似一个数塔问题 因为最后的结果要被 k+1 整除,所以可以记录到每一个点  对 k+1 取余结果不同的最优解( ...

  2. $.store.book[?(@.title =~ /^.*Honour.*$/i)]

    { "store": { "book": [ { "category": "reference", "auth ...

  3. 修改profile出错后的补救

    修改profile出错后的补救,谢天谢地export命令还能用 今天在鼓捣centOS的时候,一不小心把用户配置文件profile给改错啦.重启之后进不了图形界面,终端里的命令也有大半不好使啦. 我试 ...

  4. Bellman_Ford算法(求一个点到任意一点的最短距离）

    单源最短路问题是固定一个起点,求它到任意一点最短路的问题. 记从起点出发到顶点 i 的最短距离为d[i],则有以下等式成立 d[i]=min{d[j]+(从j到 i 的边的权值) 看代码 #inclu ...

  5. HDU 5445——Food Problem——————【多重背包】

    Food Problem Time Limit: 3000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)To ...

  6. 如何 求Ifeature 的面积

    IArea pArea = pfteature_Source.Shape as IArea;//  IArea来自geometry double dArea = Math.Round(pArea.Ar ...

  7. iOS 本地缓存实现 方案借鉴

    在手机应用程序开发中,为了减少与服务端的交互次数,加快用户的响应速度,一般都会在iOS设备中加一个缓存的机制,前面一篇文章介绍了iOS设备的内存缓存,这篇文章将设计一个本地缓存的机制. 功能需求 这个 ...

  8. ubuntu下编译安装mysql记录

         搞了整整一天,好不容易折腾完,在此记录下,下次就省事了.     去官网http://www.php.net/downloads.php下载所需要的php版本,这里我选择5.6.22.    ...

  9. GITHUB中GIT BASH基础命令行

    PS:转自https://www.cnblogs.com/WangXinPeng/p/8016293.html 1.常用命令行工具: ①cmd     ②powershell      ③git ba ...

  10. Sometimes it takes going through something so awful to realize the beauty that is out there in this world.

    Sometimes it takes going through something so awful to realize the beauty that is out there in this ...