<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

        <!--要在bootstrap之前引入jquery,bootstrap依赖JQUERY,因为bootstrapJS里要使用$这个jquery变量-->

        <script src="js/popper.js" type="text/javascript" charset="utf-8"></script>

        <!--如果你要用bootstrap使用一些提示性的交互，那么就需要引入提示性的框架popper.js,因为bootstrap的提示就是依赖popper-->

        <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>

    </head>

        <style type="text/css">

            .first {

                width:1600px;

                height: 500px;

            }

            .second {

                width:1600px;

                height: 500px;

            }

            .third {

                width:1600px;

                height: 500px;

            }

            .row{

                margin-top: 50px;

                text-align: center;

                margin-left: -150px;

            }

            .rowdatu .tuyi img{

                width: 500px;

                height: 500px;

            }

        </style>

    <body>

         <header>

      <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

        <a class="navbar-brand" href="#">Carousel</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">

          <span class="navbar-toggler-icon"></span>

        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">

          <ul class="navbar-nav mr-auto">

            <li class="nav-item active">

              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>

            </li>

            <li class="nav-item">

              <a class="nav-link" href="#">Link</a>

            </li>

            <li class="nav-item">

              <a class="nav-link disabled" href="#">Disabled</a>

            </li>

          </ul>

         <form class="form-inline mt-2 mt-md-0">

            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

           </form>

         </div>

       </nav>

     </header>

    <main role="main">

         <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height: auto;"/>

    <ol class="carousel-indicators">

     <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>

     <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>

     <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>

    </ol>

    <div class="carousel-inner">

          <div class="carousel-item active">

            <img class="first"  src="img/timg.jpg" alt="First slide">

            <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">

            <img class=" second" src="img/timg.jpg" alt="Second slide">

            <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">

            <img class="third" src="img/timg.jpg" alt="Third slide">

            <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="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">

          <span class="carousel-control-next-icon" aria-hidden="true"></span>

          <span class="sr-only">Next</span>

        </a>

      </div>

        <div class="row">

          <div class="offset-2 col-lg-3">

            <img class="rounded-circle" src="img/timg.jpg" alt="Generic placeholder image" width="140" height="140">

            <h2>Heading</h2>

            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>

            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>

          </div>

          <div class="col-lg-3">

            <img class="rounded-circle" src="img/timg.jpg" alt="Generic placeholder image" width="140" height="140">

            <h2>Heading</h2>

            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>

            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>

          </div>

          <div class="col-lg-3">

            <img class="rounded-circle" src="img/timg.jpg" alt="Generic placeholder image" width="140" height="140">

            <h2>Heading</h2>

            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

            <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>

          </div>

        </div>

   <hr class="rowdatu">

        <div class="row tuyi">

          <div class="col-md-7">

            <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>

            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

          </div>

         <div class="col-1">

           <img src="img/timg.jpg"/>

           </div>

          </div>

        </div>

        <hr class="featurette-divider">

        <div class="row tuer">

          <div class="col-md-7 order-md-2">

            <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>

            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

          </div>

           </div>

        </div>

        <hr class="featurette-divider">

        <div class="row tusan">

          <div class="col-md-7">

            <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>

            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>

          </div>

           <div class="col-md-4">

           <img src="img/timg.jpg"/>

           </div>

        </div>

    </body>

</html>

carousel.html的更多相关文章

  1. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  2. Carousel 旋转画廊特效的疑难杂症

    疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...

  3. 学会用bootstrap的modal和carousel

    bootstrap框架提供了很多好用的javascript组件,可以很方便的实现常用的js效果,比如点击弹出一个div(modal).下拉菜单.旋转木马(carousel或slider),非常适合前端 ...

  4. Bootstrap 之 Carousel

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...

  5. DevExpress Carousel 设置水平滑动列表

    DevExpress中Carousel控件的应用 Carousel,直译为旋转木马,即旋转视图,可以做为数据的展示或者菜单项. 要实现触摸左右滑动的效果,其实是比较容易的,直接在CarouselPan ...

  6. jquery 的3D Carousel插件参数说明

    这个插件大家都很熟悉了,但是在网上找了很久找不到相关的资料,只有自己琢磨研究了一下.有些参数一眼都可以看出意思,在此我只说一下每个图片要想带一些扩展信息怎么处理. 1:首先需要创建一个ul对象,然后里 ...

  7. Bootstrap之Carousel不能自动播放的解决办法(转)

    Bootstrap是一个非常好的css/javaScript框架,尤其对于移动端的自适应和适配能力都比较强. 用Bootstrap自带的Carousel写了一个图片轮播的广告部分,用js调用后却出现了 ...

  8. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  9. bootstrap源码分析之Carousel

    源码文件: Carousel.scssCarousel.js 实现原理: 隐藏所有要显示的元素,然后指定当前要显示的为block,宽.高自适应 源码分析: 1.Html结构:主要分为以四个部分  1. ...

  10. Owl Carousel – 支持触摸的 jQuery 响应式传送带插件

    Owl Carousel 是一个 jQuery 插件,使我们能够迅速地创建响应式传送带滑块.这个插件是触摸友好的,能与几乎任何的 HTML 内容兼容使用.另外,强大的选项设置支持分页/滑动速度,启用/ ...

随机推荐

  1. .Net Reactor混淆导致匿名类处理出现的问题处理分析

    .Net Reactor 是一款比较不错的混淆工具,比VS自带的那个好用很多,一直以来也陪伴着我们的成长,虽然没有完美的混淆工具,不过也算还是不错的,至少能在一定程度上对DLL进行一定的保护处理. 不 ...

  2. [Next] 初见next.js

    next 简介 Next.js 是一个轻量级的 React 服务端渲染应用框架 next 特点 默认情况下由服务器呈现 自动代码拆分可加快页面加载速度 简单的客户端路由(基于页面) 基于 Webpac ...

  3. phpStudy后门漏洞利用复现

    phpStudy后门漏洞利用复现 一.漏洞描述 Phpstudy软件是国内的一款免费的PHP调试环境的程序集成包,通过集成Apache.PHP.MySQL.phpMyAdmin.ZendOptimiz ...

  4. Git项目分支分配

    主要分支包含master分支与develop分支,临时分支可以分为: release: 从develop分出 ,是最终要发布的版本. feature: 实现某功能时推荐新建分支,从develop分出. ...

  5. 前端使用lodop插件进行打印设置

    先前梳理了后台打印导出参考:https://www.cnblogs.com/yyk1226/p/9856032.html,但是没有显示出来打印预览页面. 本章使用Lodop插件进行打印设置,实现打印机 ...

  6. SUSE Ceph 快速部署 - Storage6

    学习 SUSE Storage 系列文章 (1)SUSE Storage6 实验环境搭建详细步骤 - Win10 + VMware WorkStation (2)SUSE Linux Enterpri ...

  7. 手把手教你如何在Windows下allure与jenkins的集成生成让你一见钟情的测试报告 - 03（非常详细，非常实用）

    简介 好了,国庆假期结束,开始搬砖.为什么要把allure和jenkins集成了?原因是集成以后,我们就可以直接查看allure的结果,不需要重复输入命令.重复使用浏览器打开文件来查看allure的结 ...

  8. 用js做数字字母混合的随机四位验证码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 异步处理ServletRequest引发的血案

    我们的APP生产上出了一次比较严重的事故,许多用户投诉登录后能看到别人的信息,收到投诉后我们就开始查找问题,一般这样的问题都是线程安全引起的,所以查找原因的思路也是按线程安全的思路去查. 业务场景是这 ...

  10. 用深度学习做命名实体识别(七)-CRF介绍

    还记得之前介绍过的命名实体识别系列文章吗,可以从句子中提取出人名.地址.公司等实体字段,当时只是简单提到了BERT+CRF模型,BERT已经在上一篇文章中介绍过了,本文将对CRF做一个基本的介绍.本文 ...