博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Bootstrap学习第二天轮播插件
阅读量:4624 次
发布时间:2019-06-09

本文共 1574 字,大约阅读时间需要 5 分钟。

 

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>

 

 

转载于:https://www.cnblogs.com/stjwy/p/5947670.html

你可能感兴趣的文章
POJ 3169 Layout
查看>>
正则表达式
查看>>
SSL JudgeOnline 1455——电子老鼠闯迷宫
查看>>
类1(this指针/const成员函数/类作用域/外部成员函数/返回this对象的函数)
查看>>
51nod1103(抽屉原理)
查看>>
C++ TCP客户端网络消息发送接收同步实现
查看>>
装饰器
查看>>
-------- Rootkit 核心技术——利用 nt!_MDL 突破 KiServiceTable 的只读访问限制 Part II --------...
查看>>
05_ssm基础(四)之Spring基础二
查看>>
扬州社保关系转入
查看>>
程序员跳槽全攻略pdf
查看>>
Visual Basic开发实战1200例(第I卷)pdf
查看>>
详细讲解Quartz.NET
查看>>
Hibernate五大核心接口简介
查看>>
提高生产性工具(四) - XML数据库的尝试
查看>>
ural 1005 Stone Pile DP
查看>>
15个极好的Linux find命令示例(二)
查看>>
sql loader
查看>>
UIDatePicker封装
查看>>
破损的键盘
查看>>