<!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. Naive and Silly Muggles hdu4720

    Naive and Silly Muggles Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/ ...

  2. 跨主机使用 Rex-Ray volume - 每天5分钟玩转 Docker 容器技术（77）

    上一节我们在 docker1 上的 MySQL 容器中使用了 Rex-Ray volume mysqldata,更新了数据库.现在容器已经删除,今天将演示在 docker2 中重新使用这个卷. 在 d ...

  3. 【转】Windows自动连接、断开无线网络

    前提是先连接到指定的WiFi网络上. 然后通过 netsh wlan export profile 将网络配置文件导出,然后使用如下命令添加配置文件到指定的网络接口上,再执行连接命令即可. netsh ...

  4. SqlServer和Oracle中一些常用的sql语句5 流程控制语句

    --在sql语句中 begin...end 用来设定一个程序块 相关于c#中的{} declare @yz real,@w int --声明变量 set @w=120 --为变量赋值 if @w< ...

  5. 比较两个文件不同以及生成SQL插入语句

    Tips 做一个终身学习的人! 日拱一卒,功不唐捐. 今天有个小小的需求,具体需求是这样的: 有两个文本文件,每个文件都有一些字符串文本: 比较第一个文件中,在第二个文件中,不存在的字符串文本: 把这 ...

  6. Spring3实战第二章第一小节 Spring bean的初始化和销毁三种方式及优先级

    Spring bean的初始化和销毁有三种方式 通过实现 InitializingBean/DisposableBean 接口来定制初始化之后/销毁之前的操作方法: 优先级第二通过 <bean& ...

  7. vb6.0的各种SHELL,CMD内部命令、外部命令、SHELL任意文件

    Private Declare Function ShellExecute Lib "shell32.dll" Alias "ShellExecuteA" (B ...

  8. win10 UWP button

    button有很多和wpf一样,可以看<深入浅出WPF> 我们可以在button的click写上 <Button Content="确定" Click=" ...

  9. win10 uwp 活动磁贴

    本文翻译:https://mobileprogrammerblog.wordpress.com/2015/12/23/live-tiles-and-notifications-in-universal ...

  10. mysql 中select for update 锁表的范围备注

    mysql的锁表范围测试 1.主键明确时,行级锁: 解释:指定主键并且数据存在时,仅锁定指定的行,其它行可以进行操作 实例:指定了锁定id=1的行且数据存在①,在更新1时lock wait超时②,但是 ...