Bootstrap: 样式CSS：carousel轮换 图片的使用
Bootstrap 轮播（Carousel）插件
Bootstrap轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
如果您想要单独引用该插件的功能，那么您需要引用 carousel.js。或者，您可以引用bootstrap.js 或压缩版的 bootstrap.min.js。
js和css的引入：
<link href="scripts/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="scripts/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap/3.3.4/js/bootstrap.min.js"></script>
html代码
<body>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="" class="active"></li>
<li data-target="#myCarousel" data-slide-to=""></li>
<li data-target="#myCarousel" data-slide-to=""></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="data:images/snLine.gif" alt="First slide">
</div>
<div class="item">
<img src="data:images/snLine.jpg" alt="Second slide">
</div>
<div class="item">
<img src="data:images/usLine2.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播（Carousel）导航 -->
<a class="carousel-control left" href="#myCarousel"
data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel"
data-slide="next">›</a>
</div>
</body>
效果图：
Bootstrap: 样式CSS：carousel轮换 图片的使用的更多相关文章
- Bootstrap全局CSS样式之button和图片
.btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...
- bootstrap全局CSS样式学习
参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...
- bootstrap 全局 CSS 样式
http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...
- bootstrap课程4 bootstrap的css样式有哪些内容需要注意
bootstrap课程4 bootstrap的css样式有哪些内容需要注意 一.总结 一句话总结: 1.如何选择产品(框架)的版本? 大版本下的最后一个版本,但是同时又要选择稳定的版本,也就是如果做产 ...
- 从覆盖bootstrap样式谈css选择器优先级
样式优先级 首先简单说几个定义样式的方式: 元素内嵌: <li><a href="" style="color:#ffffff;">SH ...
- Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...
- Bootstrap全局CSS样式之表格
.table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...
- Bootstrap全局CSS样式之表单
.form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...
- Bootstrap基本CSS样式
一.简介.使用 1.简介 Bootstrap 来源于 Twitter,是一款基于 Html.Css.JavaScript 的前端UI框架.可以方便.快速的开发web界面. 教程:https://www ...
随机推荐
- 【转】BlueDroid介绍
原文网址:http://www.cnblogs.com/hzl6255/p/3887547.html 自从Android 4.2开始,Android开始使用自己的蓝牙协议栈BlueDroid,而不是b ...
- linux内核驱动中_IO, _IOR, _IOW, _IOWR 宏的用法与解析
在驱动程序里, ioctl() 函数上传送的变量 cmd 是应用程序用于区别设备驱动程序请求处理内容的值.cmd除了可区别数字外,还包含有助于处理的几种相应信息. cmd的大小为 32位,共分 4 个 ...
- datax中oracleWriter
在使用datax的oraclewriter时,由于对oracle的不熟悉,以及c++编译的不熟悉,颇费了一些周折.在此,记录一下,供再次使用的人参考. 1.oracleWriter :oracle提供 ...
- Problem 2214 Knapsack problem 福建第六届省赛
题目链接:http://acm.fzu.edu.cn/problem.php?pid=2214 题目大意:给你T组数据,每组有n个物品,一个背包容量B,每件有体积和价值.问你这个背包容纳的物品最大价值 ...
- 18. 4Sum
#include <string>#include <stack>#include <vector>#include <map>#include < ...
- ln命令
图形化界面创建ln 命令行界面创建ln 命令行界面创建ln 后续,更新
- 制作一个html中闪动的title 来提示消息
var flashTitlePlayer = { start: function (msg) { this.title = document.title; if (!this.action) { tr ...
- 用Android++在Visual Studio中用C/C++开发Android应用
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Android++在Visual Studio中用C/C++开发Android应用.
- Office激活密钥
Retail密钥: PHX9Q-N9GKW-CG4VF-MHCWR-367TX PB44J-GNX2R-BJJYX-HJW6R-Q9JP9 6PVPD-CNWDQ-G734C-DG7BM-VQTXK ...
- Android仿微信UI布局视图（圆角布局的实现）
圆角button.或布局能够在xml文件里实现,但也能够使用图片直接达到所需的效果,曾经版本号的微信就使用了这样的方法. 实现效果图: watermark/2/text/aHR0cDovL2Js ...