1.1如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        #myslide{

            width: 500px;

        }

    </style>

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

    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>

    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>

    <script src="bootstrap-3.3.7/js/docs.min.js"></script>

</head>

<body>

    <div class="container">

            <div class="page-header">

                <div class="h1">shithisoos <small>轮播</small></div>

            </div>

        <!--图片  -->

        <div class="carousel slide" id="myslide" data-ride="carousel">

            <!-- 先是小圆点 -->

            <ol class="carousel-indicators">

                <li  data-target="#myslide" data-slide-to="0"></li>

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

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

            </ol>

            <!-- 图片 -->

            <div class="carousel-inner">

                    <div class="item active">

                            <img src="data:images/a.jpg" >

                            <div class="carousel-caption">

                                    图片一

                            </div>

                     </div>

                     <div class="item ">

                            <img src="data:images/b.jpg" >

                            <div class="carousel-caption">

                                    图片二

                            </div>

                     </div>

                     <div class="item ">

                            <img src="data:images/c.jpg" >

                            <div class="carousel-caption">

                                    图片三

                            </div>

                     </div>

        <!-- 两边的< >号 -->

        <a class="left carousel-control" href="#myslide" role="button" data-slide="prev">

        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

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

        </a>

        <a class="right carousel-control" href="#myslide"

        role="button" data-slide="next">

        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">

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

            </div>

        </div>

    </div>

</body>

</html>

最新文章

  1. 无限循环轮播图之JS部分（原生JS）
  2. Ios二维码扫描（系统自带的二维码扫描）
  3. 【Go语言】错误与异常处理机制
  4. 作业七：团队项目——Alpha版本冲刺阶段-05
  5. EF 存储过程
  6. webstorm 快捷键
  7. php 双向队列类
  8. Validation of viewstate MAC failed machinekey生成、使用方法
  9. zabbix安装笔记
  10. Python第三方库的安装方法总结
  11. 使用FsCheck编写Property-based测试
  12. SpringMVC归纳-2(Session会话、拦截器)
  13. 将本地代码通过git命令上传到github的流程
  14. 169. Majority Element (Array)
  15. Shell基础知识（三）
  16. 2017-4-18/缓存、CDN
  17. tensorflow函数（2）
  18. 实验四 使用ASP.NET内置对象 总结
  19. oracle监听理解 命名理解
  20. CSS之BFC、IFC、FFC and GFC

热门文章

  1. iDempiere 使用指南 系统安装 以及 virtualbox虚拟机下载
  2. sketchup 与 ArcGIS 10 的交互（转）
  3. Revolution of Unix
  4. Easy deployment
  5. Web开发——前后台异步调用
  6. 【起航计划 035】2015 起航计划 Android APIDemo的魔鬼步伐 34 App-&gt;Service-&gt;Local Service Controller
  7. WinBatch基础命令
  8. gamemakerstudio:Sprite的原点
  9. sqlserver row_number函数的用法
  10. Android（java）学习笔记51：ScrollView用法