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>

bootStrap的轮播的更多相关文章

  1. 基于bootstrap的轮播广告页，带图片和文字

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  2. bootstrap 获得轮播中的索引 getActiveIndex

    今天想用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:我肯定需要知道当前活动(显示图片)的索引号,那么bootstrap的轮播组件要怎么获得这个索引 ...

  3. Bootstrap中轮播图

    Bootstrap中轮播图插件叫作Carousel,为了清晰的表明每个标签在这里是什么意思,我把解释写在了下面的代码中. <!-- 以下容器就是整个轮播图组件的整体, 注意该盒子必须加上 cla ...

  4. 聊一聊 bootstrap 的轮播图插件

    今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式 引入js ...

  5. Bootstrap幻灯轮播如何支持触屏左右滑动手势？

    最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...

  6. bootstrap 图片轮播效果

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...

  7. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

  8. bootstrap 获得轮播中的索引或当前活动的焦点对象

    今天用bootstrap做一个轮播,当轮播滚到每张图的时候,在页面下面就显示相对应的内容,那么问题来了:为了轮播图的可扩展性,我们肯定需要知道当前活动(显示图片)的索引号,查了bootstrap文档, ...

  9. Bootstrap实现轮播图

    第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="t ...

  10. ⒃bootstrap组件 轮播图 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 软件项目技术点(2)——Canvas之坐标系转换

    AxeSlide软件项目梳理   canvas绘图系列知识点整理 默认坐标系与当前坐标系 canvas中的坐标是从左上角开始的,x轴沿着水平方向(按像素)向右延伸,y轴沿垂直方向向下延伸.左上角坐标为 ...

  2. Elipse plugin or Bundle & OSGI

    Develop and register service, lookup and use service! Android Design on service's publish-find-bind ...

  3. 01_Redis基础

    [Redis定义(参考了百度百科)] Redis是一个key-value存储系统.与Memchached类似,Redis支持的value类型更多,包括String.list.set.zset(有序集合 ...

  4. JSP初学者3

    reponse代表服务器对客户端的响应.大部分时候,程序无须使用response来响应客户端请求,因为有更简单的响应对象——out,它代表页面输出流. 但out无法响应生成非字符内容(out是JspW ...

  5. OFBiz部署与运行

    下载及部署命令:http://ofbiz.apache.org/download.html OFBiz的安装部署是基于ant的,官网的案例是执行load-demo任务和start任务.以下分析是以12 ...

  6. 时间序列算法理论及python实现（2-python实现）

    如果你在寻找时间序列是什么?如何实现时间序列?那么请看这篇博客,将以通俗易懂的语言,全面的阐述时间序列及其python实现. 时间序列算法理论详见我的另一篇博客:时间序列算法理论及python实现 - ...

  7. Jmeter入门9 __digest函数 jmeter字符串连接与登录串加密应用

     登录请求中加密串是由多个子串连接,再加密之后传输. 参数连接:${var1}${var2}${var3} 加密函数:__digest    (函数助手里如果没有该函数,请下载最新版本的jmeter5 ...

  8. 开始学习git

    今天看着廖雪峰的git使用教程开始学习git.不过没有将项目托管在github上,而是选择托管在了码云上. 看着明白做起来还是出了些问题,不过好在最后都解决了.果然眼高手低要不得. 试着将自己平时学习 ...

  9. 【[SCOI2009]粉刷匠】

    这好像是个暴力? 但是跑的挺快的 我们设\(dp[i][j][k]\)表示在第\(i\)行我们最远染到的位置是\(j\),这一行上一共染了\(k\)次最多能染对多少个格子 理性分析一下啊,每一行最多也 ...

  10. 【转】一看你就懂，超详细java中的ClassLoader详解

    http://blog.csdn.net/briblue/article/details/54973413 ClassLoader翻译过来就是类加载器,普通的java开发者其实用到的不多,但对于某些框 ...