Bootstrap 轮播(Carousel)插件

  Bootstrap轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

如果您想要单独引用该插件的功能,那么您需要引用 carousel.js。或者,您可以引用bootstrap.js 或压缩版的 bootstrap.min.js

js和css的引入:

<link href="scripts/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap/3.3.4/js/bootstrap.min.js"></script>

html代码

<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="" class="active"></li>
<li data-target="#myCarousel" data-slide-to=""></li>
<li data-target="#myCarousel" data-slide-to=""></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="data:images/snLine.gif" alt="First slide">
</div>
<div class="item">
<img src="data:images/snLine.jpg" alt="Second slide">
</div>
<div class="item">
<img src="data:images/usLine2.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">&rsaquo;</a>
</div>
</body>

效果图:

Bootstrap: 样式CSS:carousel轮换 图片的使用的更多相关文章

  1. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  2. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  3. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  4. bootstrap课程4 bootstrap的css样式有哪些内容需要注意

    bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...

  5. 从覆盖bootstrap样式谈css选择器优先级

    样式优先级 首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SH ...

  6. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  7. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  8. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  9. Bootstrap基本CSS样式

    一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...

随机推荐

  1. ActionBar 中setDisplayHomeAsUpEnabled和setHomeButtonEnabled和setDisplayShowHomeEnabled方法的理解

    setHomeButtonEnabled这个小于4.0版本的默认值为true的.但是在4.0及其以上是false,该方法的作用:决定左上角的图标是否可以点击.没有向左的小图标. true 图标可以点击 ...

  2. 【Android 复习】:第02期:引导界面(二)使用ViewPager实现欢迎引导页面

    一.实现的效果图 也许是养成了这样一个习惯,每次看别人的代码前,必须要先看实现的效果图达到了一个什么样的效果,是不是跟自己想要实现的效果类似,有图才有真相嘛,呵呵.           二.编码前的准 ...

  3. ORA-65096: invalid common user or role name

    CREATE USER xx IDENTIFIED BY yy DEFAULT TABLESPACE USERS TEMPORARY TABLESPACE TEMP PROFILE "DEF ...

  4. IO流的应用————小型资源管理器

    小型资源管理器 private void LoadTreeView() { DirectoryInfo dir = new DirectoryInfo(@"E:\"); Direc ...

  5. Cogs 309. [USACO 3.2] 香甜的黄油 dijkstra,堆,最短路,floyd

    题目:http://cojs.tk/cogs/problem/problem.php?pid=309 309. [USACO 3.2] 香甜的黄油 ★★   输入文件:butter.in   输出文件 ...

  6. windows ntp安装及调试

    Setting up NTP on Windows It's very helpful that Meinberg have provided an installer for the highly- ...

  7. Java StringTokenizer Example

    In Java, you can use StringTokennizer class to split a String into different tokenas by defined deli ...

  8. tomcat install on Linux

    1)下载apache-tomcat-6.0.10.tar.gz 2)#tar -zxvf apache-tomcat-6.0.10.tar.gz ://解压 3)#cp -R apache-tomca ...

  9. Stackdump: 一个可以离线看stackoverflow的工具

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Stackdump: 一个可以离线看stackoverflow的工具.

  10. BABOK - 企业分析(Enterprise Analysis)

    BABOK - 企业分析(Enterprise Analysis)概要 发表于2013年10月9日由周金根 描述 企业分析描述我们如何捕捉.提炼并明晰业务需要,并定义一个可能实现这些业务需要的一个方案 ...