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. Android-adb shell 读取手机系统文件

    1.首先保证手机是root 状态 2.运行 adb shell 页面以后 su root 3.ls 就会发现目录结构可以显示了

  2. ORA-12504: TNS:listener was not given the SERVICE_NAME in CONNECT_DATA

    Centos5.5 安装Oracle11g客户端,配置了本地的net服务后,用sqlplus连接报错: tnsnames.ora配置如下 orcl = (DESCRIPTION = (ADDRESS ...

  3. 学习手工创建表，表关系以及用exists 来查询

    ---创建表a If exists(select * from sysobject where [name]=='a' and xType = 'u') Begin Drop table aa End ...

  4. AKKA初体验

    关于thread和actor下面这段话讲的很好Experienced developers have learned to be very careful with unrestricted thre ...

  5. slua 中使用 lua5.3

    因为我们服务器极有可能要迁移到 skynet 上,它基于 lua5.3,而服务器和客户端会公用很多lua代码,所以在考虑在客户端 slua 中使用 lua5.3. 经过编译后,发现 slua 对 lu ...

  6. poj 1265 Area（Pick定理）

    Area Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5666   Accepted: 2533 Description ...

  7. Bzoj 2834: 回家的路 dijkstra,堆优化,分层图,最短路

    2834: 回家的路 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 62  Solved: 38[Submit][Status][Discuss] D ...

  8. 329. Longest Increasing Path in a Matrix

    最后更新 三刷? 找矩阵里的最长路径. 看起来是DFS,实际上也就是.但是如果从每个点都进行一次DFS然后保留最大的话,会超时. 这里需要结合DP,dp[i][j]表示以此点开始的最长路径,这样每次碰 ...

  9. [Javascript] Linting JavaScript with ESLint

    ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and othe ...

  10. MFC 一个类訪问还有一个类成员对象的成员变量值

    作者:卿笃军 原文地址:http://blog.csdn.net/qingdujun/article/details/35263857 MFC中一个类要訪问另外一个类的的对象的成员变量值,这就须要获得 ...