<!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. ThinkPHP中：add()和addAll()的区别

    1.add()是记录单条插入 // 添加一条数据 $User = M("User"); // 实例化User对象 $data['name'] = 'ThinkPHP'; $data ...

  2. CentOS7 +vsftpd （一）之 匿名

    CentOS7 +vsftpd (一)之 匿名 ftp的搭建是一个基础性的工作,CentOS7 +vsftpd 是一个比较容易实现的平台,但在搭建中问题会不少,本系列将通过四篇随笔与大家分享. 一.C ...

  3. TargetType Mismatch

    TargetType Mismatch 环境:windowsphone 8,silerlight toolkit, 页面报TargeType Mismatch错误或者 length 0,是因为Syst ...

  4. Python实战之Selenium自动化测试web登录

    #!/usr/bin/env python3 # -*- coding:utf-8 -*- from selenium import webdriver from selenium.webdriver ...

  5. 【转】Python实现修改Windows CMD命令行输出颜色（完全解析）

    用Python写命令行程序的时候,单一的输出颜色太单调.其实我们可以加些色彩,比如用红色表示警告,绿色表示结果正常等.网上也有几篇类似的帖子,但是没有把问题讲清楚,贴的代码也不是太清晰.这里,对Win ...

  6. 替代PhotoShop：GIMP图形编辑器的使用

    GIMP最早是linux环境下用于图形编辑的一款开源软件,目前的功能很已经很丰富,如果使用得当,在很多的图形编辑操作上完全可以替代收费的Photoshop(PS).目前GIMP已经发展成了多平台的开源 ...

  7. 使用Travis CI自动部署Hexo到GitHub

    原文链接(转载请注明出处):使用Travis CI自动部署Hexo到GitHub 前言 使用 hexo + gitPages 搭建个人博客的人都知道,每当要发表一篇博文,第一步得手动使用 hexo g ...

  8. win10 uwp 活动磁贴

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

  9. Android基础知识06—活动的四大启动模式

    ------ 活动的启动模式 ------ 在实际项目中应该根据特定的需求为每个活动指定恰当的启动模式. 四种启动模式: standard . singleTop . singleTask . sin ...

  10. Ubuntu系统下的实用软件推荐

    想要在ubuntu下工作? 又担心影响效率? 这些软件可以帮助你解决问题 ! 基本在windows上可以做到的功能, 在linux中也同样能够实现,而且自己寻找解决方案的过程才是最有趣的! 1.gua ...