<!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. Linux入门之常用命令（5）Bash

    bash优点 1.命令编辑能力  记录使用过的命令 ~/.bash_history 记录上次的历史命令 2.补全功能  指令补全两下tab 文件名补全 3.命令别名  alias [别名]=‘’ 4. ...

  2. submit text3的激活与使用

    SublimeText3常用快捷键和优秀插件 SublimeText是前端的一个神器,以其精简和可DIY而让广大fans疯狂.好吧不吹了直入正题 -_-!! 首先是安装,如果你有什么软件管家的话搜一下 ...

  3. POJ 3923 Ugly Windows（——考察思维缜密性的模拟题）

    题目链接: http://poj.org/problem?id=3923 题意描述: 输入一个n*m的屏幕 该屏幕内有至少一个对话框(每个对话框都有对应的字母表示) 判断并输出该屏幕内处于最表层的对话 ...

  4. POJ（1195）（单点修改，区间查询）（二维）

    题目大意 给定一个N*N的网格,刚开始每个网格的值都是0,接下来会对这些网格进行操作,有一下两种操作: 1."X Y A"对网格C[x][y]增加A 2."L B R T ...

  5. http://codeforces.com/contest/535/problem/C

    C. Tavas and Karafs time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  6. JavaScript高级（01）

    前端开发工具 1.1. WebStorm介绍和下载 l  介绍 WebStorm是JetBrains 推出的一款强大的HTML5编辑工具,拥有丰富的代码快速编辑,可以智能的补全代码.代码格式化.htm ...

  7. HTTPS与MITM

    HTTPS:基于SSL/TSL的HTTP协议 MITM:Man-In-The-Middle中间人攻击 Https下中间人攻击的思路: 1 去https化 2 向CA申请相似域名的证书 防范: 睁大双眼

  8. linux下rename用法--批量重命名

    Linux的rename 命令有两个版本,一个是C语言版本的,一个是Perl语言版本的,早期的Linux发行版基本上使用的是C语言版本的,现在已经很难见到C语言版本的了, 由于历史原因,在Perl语言 ...

  9. 干了这杯Java之ArrayList

    List存储一个有序元素合集 List接口的实现类有: ArrayList,LinkedList,Vector,Stack ArrayList一个数组型的List 默认容量为10 private st ...

  10. javascript小节

      javascript 语法总结 知识概要: (1)Javascript概述 1.1javascript是什么? 1.2JavaScript语言组成 1.3JavaScript与Html的结 ...