• bootstrap 图片轮播


    先找到想要存放这个轮播的地址位置:

    2,找到图片轮播代码,复制到上图圈上(bootstrap配件地址: https://getbootstrap.com )

     选择好需要的框架,点击右键

    进入开发者工具(F12)代码所在区域会高亮显示,需要用的代码复制下来粘贴到要用处就好 

    找到要拷贝出来的代码处,点击鼠标右键,找到 " Copy " "Copy HTML",复制出来的是HTML代码,另还需要复制CSS样式代码,一般情况,看到有"id","class"这样的标签,是选择器的标签,

    图片滚动 框架 具体代码如下(这里的CSS样式,因为已经下载了样式包,里面这里使用的样式都已包含了,就不需另在复制样式下来):

    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class=""></li>
    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
    <li data-target="#myCarousel" data-slide-to="2" class="active"></li>
    </ol>
    <div class="carousel-inner">
    <div class="carousel-item">
    <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"></rect></svg>
    <div class="container">
    <div class="carousel-caption text-left">
    <h1>Example headline.</h1>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
    </div>
    </div>
    </div>
    <div class="carousel-item">
    <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"></rect></svg>
    <div class="container">
    <div class="carousel-caption">
    <h1>Another example headline.</h1>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
    </div>
    </div>
    </div>
    <div class="carousel-item active">
    <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img"><rect width="100%" height="100%" fill="#777"></rect></svg>
    <div class="container">
    <div class="carousel-caption text-right">
    <h1>One more for good measure.</h1>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
    <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
    </div>
    </div>
    </div>
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
    </div>

     打开代码要用到的地方:

    删除一些这里不用的代码,结果如下:

     引导图片地址 <img src="image/1.jpeg">

    到此,使用bootstrap 图片轮播 例子弄完

  • 相关阅读:
    ORA-01439: column to be modified must be empty to change datatype
    解决rhel相关系统下yum找不到安装包的解决方法
    oracle的function和procedure返回值给shell
    [摘] SQLPLUS Syntax
    Unix/Linux中shell调用sqlplus的方式
    sqlplus连接数据库的4种方式
    shell调用sqlplus批量执行sql文件
    shell自定义函数
    Java创建Oracle数据库表
    TCP的三次握手(建立连接)和四次挥手(关闭连接)
  • 原文地址:https://www.cnblogs.com/lsyw/p/11052757.html
Copyright © 2020-2023  润新知