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. Lua运算符

    + 加- 减* 乘/ 除^ 幂% 求余# 求长度= 赋值< 小于> 大于== 等于<= 不大于=> 不小于~= 不等于and 逻辑与or 逻辑或not 逻辑非.. 连接字符串

  2. Delphi TdxBarDockControl 用法

    1.放个TdxBarManager在窗体上2.放个TdxBarDockControl在panel上,把它的BarManager属性设置为dxBarManager13.双击dxBarManager1,新 ...

  3. Linux文件虚拟机系统只读Read-only file system的快速解决方法

    问题描述:上周公司的私有云(底层架构是Openstack+KVM,目前稳定性还不够好,开发团队在改进中)一个计算节点挂掉,之后恢复后发现这个计算节点的所有Linux系统都变成只读了,复制文件提示:Re ...

  4. 今天遇到的i++问题之记录

    今天逛贴吧看到的,与自己预想的不同,于是在群里求解后方得知答案,遂记录之.代码来袭. function a(){ var i=1; i++; alert(i); } var c = a(); c(); ...

  5. 《Differential Equations with Boundary-Value Problems》-chaper2-一阶线性方程

    学习微分方程中,一个很常见的疑惑就是,我们所熟悉的非齐次微分方程的通解是对应齐次方程的通解加特解,但是更为重要的是,我们需要知道这句话是怎么得来的. 我们探讨一个未知问题的一般思路是将其不断的与已知已 ...

  6. books

    <<learning opencv>>,   布拉德斯基 (Bradski.G.) (作者), 克勒 (Kaehler.A.) (作者),   这本书一定要第二版的,因为第二版 ...

  7. 七个你必须重视的 Git 使用技巧

    与其他技术相比,Git应该拯救了更多开发人员的饭碗.只要你经常使用Git保存自己的工作,你就一直有机会可以将代码退回到之前的状态,因此就可以挽回那些你深夜里迷迷糊糊犯下的错误. 尽管这么说,Git的命 ...

  8. 关于ASSERT(断言)的作用

    程序一般分为Debug 版本和Release 版本,Debug 版本用于内部调试,Release 版本发行给用户使用.断言assert 是仅在Debug 版本起作用的宏,它用于检查“不应该”发生的情况 ...

  9. sqlserver优化查询

    sql语句的优化分析   开门见山,问题所在 sql语句性能达不到你的要求,执行效率让你忍无可忍,一般会时下面几种情况. 网速不给力,不稳定. 服务器内存不够,或者SQL 被分配的内存不够. sql语 ...

  10. 反射——类（Class）

    本文原创,转载请注明原处! 红色代表的是基本组件:包(Package),修饰符(modifier),类(Class),字段(Field),构造器(Constructor)和方法(Method). 黄色 ...