<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移动设备优先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <script language="JavaScript">

    </script>
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-md-3">

            <div data-ride="carousel" id="carousel_container" class="carousel slide">
                <!--data-ride="carousel"开始就轮播-->
                <!--图片容器 -->
                <div class="carousel-inner">
                    <div class="item">
                        <img src="http://img4.imgtn.bdimg.com/it/u=3432487329,2901563519&fm=27&gp=0.jpg" alt="pic"/>
                        <div class="carousel-caption">
                            <h4>标题</h4>
                            <p>这里是内容。。。。。</p>
                        </div>

                    </div>
                    <div class="item active"><img src="http://d.hiphotos.baidu.com/zhidao/pic/item/42a98226cffc1e1791f35a0e4990f603738de945.jpg"/></div>
                    <div class="item"><img src="http://cdnq.duitang.com/uploads/item/201505/03/20150503090831_hrBkG.jpeg"/></div>
                </div>

                <!--小圆圈容器 -->
                <ol class="carousel-indicators">
                    <li data-slide-to="0" data-target="#carousel_container"></li>
                    <li data-slide-to="1" data-target="#carousel_container"></li>
                    <li data-slide-to="2" data-target="#carousel_container"></li>
                </ol>
                <!--左右按钮容器 -->
                <a href="#carousel_container" data-slide="prev" class="left carousel-control">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>

                <a href="#carousel_container" data-slide="next" class="right carousel-control">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div>

        </div>
        <div class="col-md-9"></div>
    </div>

</div>
</body>
</html>

bootstrap轮播图代码

⒃bootstrap组件 轮播图 基础案例的更多相关文章

  1. Bootstrap中轮播图

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

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

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

  3. Bootstrap实现轮播图

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

  4. 基于BootStrap的轮播图

    准备 先设计一个承载轮播图的区域:四周向外阴影.扁平圆角: 1 #myShuffArea{ 2 width: 50%; 3 height: 300px; 4 border: solid 1px gai ...

  5. 手机端用swiper组件 轮播图设置后右侧出现空白 及 部分手机浏览器打开网页空白

    我的方法是设置内容css overflow:hidden;width:100%; ok. 之前搜到一个方法也可以,就是设置css height: auto;overflow-y: scroll; 但是 ...

  6. BootStrap自定义轮播图播放速度

    $('.carousel').carousel({      interval: 3000 });

  7. 第124天：移动web端-Bootstrap轮播图插件使用

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  8. 移动web——bootstrap响应式轮播图

    基本介绍 1.bootstrap有轮播图的模板,我们只需要改动下就行. 2.这里我们将介绍桌面版本和移动版本最后是综合版本 桌面版本 1.这里的图片设置是有窍门的,不再去添加img标签,而是作为a标签 ...

  9. bootstrap轮播图组件

    一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...

随机推荐

  1. YYHS-NOIP2017Training0928-ZCC loves Isaac

    题目描述 [背景]ZCC又在打Isaac.这次他打通了宝箱关进入了表箱关.[题目描述]表箱关有一个房间非常可怕,它由n个变异天启组成.每个天启都会在进入房间后吐出绿弹并炸向某一个位置且范围内只有一个天 ...

  2. JAVA 局部变量表

    1. 除了 long,double 占用两个slot 之外,其他类型均占用一个slot. 2.在内容相同的情况下, 实例方法(不加 static) 会比 类方法 (static)对占用一个局部变量位置 ...

  3. Hive任务优化（2）

    JOIN优化 1.大多数情况下,Hive会对每对Join连接对象启动一个MapReduce任务. 2.多表关联时,如果每个ON子句都使用相同的连接键的话,那么只会产生一个MapReduce Job. ...

  4. CentOS 引导 Win10 启动项

    因为无聊,所以想尝试一下双系统,所以在win10的基础之上,装了一个Linux系统,之前装过Ubuntu,几乎都是自动完成的无任何压力.但是想着Ubuntu好像更新换代有点快,所以换了个能用比较久的C ...

  5. hdu 4778 Gems Fight! 状态压缩DP

    Gems Fight! Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 327680/327680 K (Java/Others)T ...

  6. 使用python实现后台系统的JWT认证(转)

    今天的文章介绍一种适用于restful+json的API认证方法,这个方法是基于jwt,并且加入了一些从oauth2.0借鉴的改良. 1. 常见的几种实现认证的方法 首先要明白,认证和鉴权是不同的.认 ...

  7. 利用ASP.netCore自带DI(DependencyInjection)实现批量依赖注入

    ASP.net Core自带DI(依赖注入),用法如下: services.AddScoped(typeof(IProductService), typeof(ProductService)); 如果 ...

  8. Java公开课-01.类和对象

    一,类和对象的含义 1.类:类是具有相同属性(静态特征)和行为(功能 )的一系列事物的集合. eg:以下俩者是不是类 1)汽车  √ 2)小胖桌子上那个红色的杯子  × 2.对象:被精确限定到一个特殊 ...

  9. ASP.NET没有魔法——开篇-用VS创建一个ASP.NET Web程序

    为什么写这一系列文章? 本系列文章基于ASP.NET MVC,在ASP.NET Core已经发布2.0版本,微服务漫天的今天为什么还写ASP.NET?. 答:虽然现在已经有ASP.NET Core并且 ...

  10. javascript字符串对象

    String字符串对象 1. 字符串粗体展示: var a = "陈冠希喜欢拍电影";   document.writeln(a.bold()+"<br/>& ...