<!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. MySQL的复制：MySQL系列之十三

    一.MySQL复制相关概念 主从复制:主节点将数据同步到多个从节点 级联复制:主节点将数据同步到一个从节点,其他的从节点在向从节点复制数据 同步复制:将数据从主节点全部同步到从节点时才返回给用户的复制 ...

  2. python 3.7 生成数据库文档

    开发阶段数据库总是有变动,开发人员需要维护文档给相关人员使用,故编写一个脚本自动生成数据库文档 生成的excel如下 import cx_Oracle import os from openpyxl ...

  3. 消息中间件的研究 （四）RabbitMQ、Kafka、RocketMQ消息中间件的对比及分析

    RabbitMQ:     RabbitMQ是使用Erlang语言开发的开源消息队列系统,基于AMQP协议来实现.AMQP的主要特征是面向消息.队列.路由(包括点对点和发布/订阅).可靠性.安全.AM ...

  4. nagios客户端之nrpe3.2.1安装（Ubuntu）

    1.删除dpkg安装的nrpedpkg -l | grep nrpedkpg -P nagios-nrpe-server 2.ubuntu下nrpe3.2.1安装 下载nrpe3.2.1的源码包:ht ...

  5. CF　C. Plasticine zebra　（思维）

    题意: 是输入一个只有'w','b'的字符串,可以对他的任意位置切割成两个子串,切割后的右边的子串翻转后再和左边的子串拼起来会得到一个新的字符串,操作次数不限,问能得到的字符串中wb交替出现的最大的长 ...

  6. Python+Selenium----使用HTMLTestRunner.py生成自动化测试报告2（使用PyCharm ）

    1.说明 在我前一篇文件(Python+Selenium----使用HTMLTestRunner.py生成自动化测试报告1(使用IDLE ))中简单的写明了,如何生产测试报告,但是使用IDLE很麻烦, ...

  7. synchronized重入后抛出异常，锁释放了吗

    synchronized: 用于同步方法或者代码块,使得多个线程在试图并发执行同一个代码块的时候,串行地执行.以达到线程安全的目的. 允许重入: 在多线程的时候是这样的,但是对于单线程,是允许重入的, ...

  8. c#基础 函数传值

    随便新建个控制台程序做个演示! 1.最基础,最普通的传值方式: static void Main(string[] args) { ); Console.WriteLine("x:" ...

  9. .net core +mysqlSugar（最为简单的增删改查）

    首先建立.net Core API - empty 这个就不说了 然后创建新的Controller 记得添加路由 [Route("api/Users")] 然后在Nuget Pac ...

  10. 从零开始的全栈工程师——html篇1.8（知识点补充与浏览器兼容性）

    知识点补充 一.浏览器的兼容问题(关于浏览器的兼容问题 有很多大佬已经解释的很清楚了 这个得自己百度去多花点时间去了解 这里咱们只说一下前面的漏点) 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题 ...