<!DOCTYPE html>
<html lang="zh">
<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>
<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css"/>
<script src="../../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
作者:bilaisheng@163.com
时间:2017-10-16
描述:bootstrap插件 ,由别人定义好jquery插件技术进行开发,插件是没有办法仅通过CSS就能控制
而是通过js/jquery 控制. 必须引入jquery/bootstrap.min.js 增加轮播图正中间小圆点
增加左右两侧箭头
顺序: 小圆点>轮播图片>左右箭头
--> <style type="text/css">
.mt50{margin-top: 50px;}
.carousel-inner >.item img{width: 100%;height: 300px;} </style>
<div class="container mt50"><!--viewport视口 1170px-->
<div class="carousel slide" data-ride="carousel" data-interval="1000"> <!--轮播图正中间小圆点-->
<ol class="carousel-indicators">
<li class="active"></li>
<li></li>
<li></li>
</ol> <!--轮播图片-->
<div class="carousel-inner">
<div class="item active">
<img src="http://img-cdn2.luoo.net/site/201710/59df32615f7cf.jpg"/>
</div>
<div class="item">
<img src="http://img-cdn2.luoo.net/site/201710/59db18dd28759.jpg"/>
</div>
<div class="item">
<img src="http://img-cdn2.luoo.net/site/201710/59ddf17c9ce1e.jpg"/>
</div>
</div> <!--左右箭头-->
<!--左侧-->
<a href="" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<!--右侧-->
<a href="" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> </body>
</html>

Bootstrap-轮播图-No.3的更多相关文章

  1. bootstrap轮播图 两侧半透明阴影

    用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...

  2. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  3. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  4. 动态请求数据并放入bootstrap轮播图

    下面是前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

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

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

  6. bootstrap轮播图组件

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

  7. bootstrap轮播图

    <!doctype html><html><head> <meta charset="utf-8"> <title>使用 ...

  8. Bootstrap 轮播图(Carousel)插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. bootstrap轮播图不能显示左右箭头

    引入font文件夹即可 原文 :http://www.imooc.com/qadetail/64277

  10. Bootstrap 我的学习记录4 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

  1. 学习笔记:CentOS7学习之二十二: 结构化命令case和for、while循环

    目录 学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...

  2. ESXi 虚拟机 提示 无法打开本地虚拟机的 xxx.vmx 的本地管道的 问题解决.

    1. 今天同事与我联系, 说一个虚拟机出现连不上, vcenter控制台关闭虚拟机之后 再次打开报错: 2. 自己最开始的解决方法 移除虚拟机, 进入服务器的datastore 重新注册, 结果发现问 ...

  3. Python解Leetcode: 539. Minimum Time Difference

    题目描述:给定一个由时间字符组成的列表,找出任意两个时间之间最小的差值. 思路: 把给定的链表排序,并且在排序的同时把60进制的时间转化成十进制整数: 遍历排序的数组,求出两个相邻值之间的差值: 求出 ...

  4. Kubernetes---Pod状态示例

    ⒈Pod 中只有一个容器并且正在运行,容器成功退出 ·记录事件完成  ·如果restartPolicy为:  Always:重启容器:Pod phase仍为Running  OnFailure:Pod ...

  5. Laravel框架与ThinkPHP框架的不同

    作为一个PHP菜鸟初学Laravel框架 在学习过程中我发现了其与TP框架的不同点,由于时间问题和认识还不够完善我先写出其中几点,有错误的地方希望各位大牛斧正... 1.渲染模版方式的不同:在Lara ...

  6. PHP后台开发小经验

    js页面传参数 js的参数传输是关键,尤其是当一个页面的数据需要分步骤上传时. 同样的删除功能,不会操作批量删除时可以尝试单个删除,功能差不多,实现功能的方法也千千万,先做成它是第一位. 主页面很多条 ...

  7. python保留字及其说明

    保留字 说     明 and 用于表达式运算,逻辑与操作 as 用于类型转换 assert 断言,用于判断变量或条件表达式的值是否为真 break 中断循环语句的执行 class 用于定义类 con ...

  8. easyui datagrid 合并相同行

    $.extend($.fn.datagrid.methods, { autoMergeCells: function (jq, fields) { return jq.each(function () ...

  9. 怎样查看 MySQL 版本号

    1. 在命令行中直接查看版本号 mysql -V 2. 在 mysql --help 中查找与版本相关的信息 mysql --help | grep Ver 3. 在mysql命令行里面查看版本信息 ...

  10. C#连接Oracle数据库的方法

    目前了解C#中连接Oracle数据库的方法有3种,分布是微软的System.Data.OracleClient,Oracle的Oracle.DataAccess.Client和Oracle的Oracl ...