• 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 图片轮播 例子弄完

  • 相关阅读:
    响应式设计的 5 个 CSS 实用技巧
    iframe的高度自适应的方法
    HDOJ1285 比赛排名(拓扑排序)
    GENIA项目GENIA语料库
    HDOJ1102 修路问题(最小生成树Prim)
    二叉树的一些操作
    GENIA项目综述论文(E99)
    GENIA项目主页
    读《统计自然语言处理》有笔记——语料库与知识词汇库
    HDOJ2535 ( Vote ) 【水题】
  • 原文地址:https://www.cnblogs.com/lsyw/p/11052757.html
Copyright © 2020-2023  润新知