• Bootstrap学习第二天轮播插件


    Bootstrap不仅提供了整套的样式,还提供了一系列插件,帮助开发者构建更受欢迎的网站。

    Bootstrap的轮播插件用起来很简单,代码如下。

    <!DOCTYPE html>

    <html lang="en">

      <head>

        <meta charset="utf-8">

        <title>Bootstrap, from Twitter</title>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta name="description" content="">

        <meta name="author" content="">

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

        <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

      </head>

      <body>

    <div id="myCarousel" class="carousel slide">

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

      <div class="carousel-inner">

         <div class="item active">

                        <img src="Demo_lunbo1.jpg" alt="">

                        <div class="carousel-caption">

                          <h4>八月十五回家拍摄</h4>

                          <p>八月十五回家时正赶上下雨,雨后的天空挂上了彩虹</p>

                        </div>

                      </div>

                      <div class="item">

                        <img src="Demo_lunbo2.jpg" alt="">

                        <div class="carousel-caption">

                          <h4>眼睛里的景色更迷人</h4>

                          <p>照片中的彩虹总不如眼睛看到的美。</p>

                        </div>

                      </div>

                      <div class="item">

                        <img src="Demo_lunbo3.jpg" alt="">

                        <div class="carousel-caption">

                          <h4>雨后的黄昏</h4>

                          <p>美好的东西总是短暂的,一会天就黑了。</p>

                        </div>

                      </div>

      </div>

      <!-- Carousel nav -->

      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>

      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>

    </div>

        <script src="bootstrap/js/jquery.js"></script>

            <script src="bootstrap/js/bootstrap.js"></script>

      </body>

    </html>

     

  • 相关阅读:
    Jmeter 将正则表达式提取的参数传给全局(跨线程组使用变量)
    pod的状态分析
    前端 -- html介绍和head标签
    Python ----- 线程和进程
    网络编程 ------ 基础
    面向对象相关操作
    面向对象 --- 进阶篇
    python --- 面向对象
    python的模块和包的详细说明
    常用模块------时间模块 , random模块 ,os模块 , sys模块
  • 原文地址:https://www.cnblogs.com/stjwy/p/5947670.html
Copyright © 2020-2023  润新知