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. node:fs-extra模块

    var fs = require('fs-extra'); //复制 并会覆盖已有文件 fs.copy('./demo/index.html','./demo/index2.html' ,(err) ...

  2. Stage2--Python的数据类型

    说在前面: Stage1-Stage4简单介绍一下Python语法,Stage5开始用python实现一些实际应用,语法的东西到处可以查看到,学习一门程序语言的最终目的是应用,而不是学习语法,语法本事 ...

  3. oracle查询所有用户表的表名、主键名称、索引、外键等

    1.查找表的所有索引(包括索引名,类型,构成列): select t.*,i.index_type from user_ind_columns t,user_indexes i where t.ind ...

  4. 【转】JavaScript 简史

    本文来自众成翻译.JavaScript 毋庸置疑是当今最重要的语言之一.Web 的兴起已经把 JavaScript 带到一个前所未有的地步.下面我们来看看 JavaScript 在其短短历史中是如何演 ...

  5. mongodb 3.4 学习 (一) 安装

    https://www.mongodb.com/blog/post/capacity-planning-and-hardware-provisioning-mongodb-ten-minutes 安装 ...

  6. SpringMvc-view

    1.view视图:及springmvc返回到前端的页面,前面的所有跳转都是view的列子在此就不在举例了 2.在view界面中如何实现国际化? 2.1实现国际化有首先需要配置国际化资源文件:例如 英文 ...

  7. JAVA利用poi获取world文件内容

    本文主要简单介绍了利用poi包,读取world文件内容. 这个依然存在版本的问题,只能读取doc结尾的老版本文件. 话不多说,上代码: import java.io.File; import java ...

  8. pip下载太慢解决方法

    pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ --upgrade tensorflow 用清华的镜像下载会快很多.

  9. npm proxy设置网络代理 并使用taobao registry

    npm config set https-proxy http://server:portnpm config set proxy http://server:port npm set registr ...

  10. echart 折线图、柱状图、饼图、环形图颜色修改

    之前在做报表的时候用过echart 用完也就完了,而这次在用的时候已经忘了,所以这里简单记录一下,好记性不如烂笔头!!! 1.折线图修改颜色: xAxis: { type: 'category', b ...