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. 基本算法思想Java实现的详细代码

    基本算法思想Java实现的详细代码 算法是一个程序的灵魂,一个好的算法往往可以化繁为简,高效的求解问题.在程序设计中算法是独立于语言的,无论使用哪一种语言都可以使用这些算法,本文笔者将以Java语言为 ...

  2. mybooklist.cn 书单de故事六月十六日

    1.我的30年30本书 刘苏里书单北京万圣书园总经理,以经营人文社科类图书著称.生于1960年,1983年毕业于北京大学国际政治系,1986年毕业于中国政法大学研究生院.

  3. wxpython grid

    构建Grid方法,效果如下: 其它构建grid方法和grid的使用见:还可以见下载资源中的wxpython教程第5章的 gridGeneric.py gridModel.py gridNoModel. ...

  4. C#操作CAD-读取和修改数据

    我们操作cad最主要的目的就是读取和修改或者删除数据,因为内容较多,在此我们先讲一下基础,后续慢慢讲解. 1.cad数据读取和修改前都要进行锁定操作,以避免一个文档被多个用户修改而发生冲突. Data ...

  5. sql server性能分析--执行sql次数和逻辑次数

    目前在做一个项目优化时,想通过数据库层分析sql server系统性能,查了一下网上代码,修改了一下标题和DMVs代码,以下代码可以用来分析系统运行一段时间后,那些语句是系统忙的sql语句.做为参考. ...

  6. 定时备份SQL Server数据库

    一.手动备份: 1.整个数据库备份:选择数据库 => 右键任务 => 备份: 2.导出一张表的框架:选择表 => 编写表脚本为 => CREATE到: 3.导出一张表的数据:  ...

  7. MySQL的基础(优化）2

    1.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用索引而进行全表扫描. 2.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉 ...

  8. Android 高级UI设计笔记09：Android实现无限滚动列表

    1. 无限滚动列表应用场景: ListView和GridView已经成为原生的Android应用实现中两个最流行的设计模式.目前,这些模式被大量的开发者使用,主要是因为他们是简单而直接的实现,同时他们 ...

  9. Android NDK r8 Cygwin CDT 在window下开发环境搭建 安装配置与使用 具体图文解说

    版权声明:本博客全部文章均为原创.欢迎交流.欢迎转载:转载请勿篡改内容,而且注明出处,谢谢! https://blog.csdn.net/waldmer/article/details/3272500 ...

  10. softmax实现cifar10分类

    将cifar10改成单一通道后,套用前面的softmax分类,分类率40%左右,想哭... .caret, .dropup > .btn > .caret { border-top-col ...