zoukankan      html  css  js  c++  java
  • Bootstrap 轮播(Carousel)插件

    轮播插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是非常灵活的。可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型。

    下面是一个简单的幻灯片,使用轮播(carousel)插件显示一个循环播放元素的通用组件,为了现实轮播,您只需要添加带有标签的代码即可。

    实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport"content="width=device-width,initial-scale=1.0" />
    <script src="jQuery/jquery-2.1.4.js"></script>
    <link rel="stylesheet"href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container"style="padding:20px">
    <div class="carousel slide"id="myCarousel">
    <!--轮播(carousel)指针-->
    <ol class="carousel-indicators">
    <li data-target="#myCarousel"data-slide-to="0"class="active"></li>
    <li data-target="#myCarousel"data-slide-to="1"></li>
    <li data-target="#myCarousel"data-slide-to="2"></li>
    </ol>
    <!--轮播(carousel)项目-->
    <div class="carousel-inner">
    <div class="item active">
    <img src="Images/slide1.png"alt="First slide" />
    </div>
    <div class="item">
    <img src="Images/slide2.png"alt="Second slide" />
    </div>
    <div class="item">
    <img src="Images/slide3.png" />
    </div>
    </div>
    <!--轮播(Carousel)导航-->
    <a href="#myCarousel"class="carousel-control left"data-slide="prev">&lsaquo;</a>
    <a href="#myCarousel"class="carousel-control right"data-slide="next">&rsaquo;</a>
    </div>
    </div>
    </body>
    </html>

  • 相关阅读:
    Docker 笔记
    Win10 Docker 安装使用
    golang struct转map
    Golang 中错误与异常需要重新认识
    Golang 中三种读取文件发放性能对比
    GoLang中如何使用多参数属性传参
    GoLang中flag标签使用
    Windows本地搭建Edusoho环境
    edusoho上传视频弹出abort之解决方案
    XAMPP启动mysql遇到的问题
  • 原文地址:https://www.cnblogs.com/melao2006/p/5009952.html
Copyright © 2011-2022 走看看