zoukankan      html  css  js  c++  java
  • 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 图片轮播 例子弄完

  • 相关阅读:
    直接从国家统计局上找数据,并分析人口数据变化,做成可视化图
    Python爬虫:爬取某日头条某瓜视频,有/无水印两种方法
    教你如何爬取美团网数据,就是那么的简单
    你所在的城市空气质量如何?用Python可视化分析空气质量
    Python爬取股票数据,让你感受一下什么是一秒钟两千条数据
    小伙用Python制作一个小游戏,结果6秒就结束,怎么难玩?
    Python数据可视化:一张很漂亮的商业图
    反射练习题1
    字符串格式化总结补充与有序字典
    反射应用实例:importlib模块
  • 原文地址:https://www.cnblogs.com/lsyw/p/11052757.html
Copyright © 2011-2022 走看看