【Bootstrap 轮播】
1、要设置一个轮播界面,需要注意以下几点:
1)根div 必须为 class="carousel slide"
2)根div下含有三块子div
a)<ol class="carousel-indicators">
b)<div class="carousel-inner">
c)<a class="carousel-control left"> 以及 <a class="carousel-control right"
<div id="myCarousel" class="carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div class="carousel-inner">
<div class="item active">
<img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
</div>
<div class="item">
<img src="/wp-content/uploads/2014/07/slide3.png" 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>
2、<div class="carousel-caption">可以添加标题
3、
-
通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。
- 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
- 使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。
- data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
-
通过 JavaScript:轮播(Carousel)可通过 JavaScript 手动调用,如下所示:
$('.carousel').carousel()
参考:http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
Bootstrap 轮播的更多相关文章
-
bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
-
Bootstrap 轮播(Carousel)插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
-
bootstrap轮播组件,大屏幕图片居中效果
在慕课网学习bootstrap轮播组件的时候,了解到轮播的图片都放在了类名为item下的img中 视频中老师对图片自适应采用给图片img设置width=100%完成,然而这样自适应处理图片在不同屏幕中 ...
-
bootstrap轮播组件之“如何关闭自动轮播”
在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...
-
bootstrap轮播图 两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
-
Bootstrap 轮播(Carousel)详解
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...
-
第二百四十八节,Bootstrap轮播插件
Bootstrap轮播插件 学习要点: 1.轮播插件 本节课我们主要学习一下 Bootstrap 中的轮播插件. 一.轮播 轮播插件就是将几张同等大小的大图,按照顺序依次播放. 基本实例. 第一步,给 ...
-
Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
-
第十篇.bootstrap轮播
使用bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入bootstrap.min.js. <div id="carous ...
随机推荐
-
学习ASP.NET Core,你必须了解无处不在的“依赖注入”
ASP.NET Core的核心是通过一个Server和若干注册的Middleware构成的管道,不论是管道自身的构建,还是Server和Middleware自身的实现,以及构建在这个管道的应用,都需要 ...
-
bzoj1008 [HNOI2008]越狱
1008: [HNOI2008]越狱 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 5099 Solved: 2207 Description *有 ...
-
Cache-control使用Cache-control:private学习笔记
其作用根据不同的重新浏览方式,分为以下几种情况:(1).打开新窗口值为private.no-cache.must-revalidate,那么打开新窗口访问时都会重新访问服务器.而如果指定了max-ag ...
-
ini 文件
INI文件是一个无固定标准格式的配置文件.它以简单的文字与简单的结构组成,常常使用在视窗操作系统,或是其他操作系统上,许多程序也会采用INI文件做为设置程序之用.视窗操作系统后来以注册表的形式替换掉I ...
-
使用jquery构建Metro style 返回顶部
个人一直对metro风格的东西情有独钟,偶然间在腾讯网看到一款小插件,蓝色Metro风格的,所以决定把它放到我的博客中,这样做应该不会有版权问题吧orz.. Complete code 后言 我把他原 ...
-
Java Networking: InetAddress
The InetAddress is Java's representation of an IP address. Instances of this class are used together ...
-
easyui page添加文本,js验证码
onLoadSuccess: function (db) { //db是后台数据的返回结果集 $.ajax({ url: "AjaxSource/Buex.ashx", data: ...
-
CentOS7 编译安装LNMP
(文章来自:http://www.cnblogs.com/i-it/p/3841840.html,请各位到这个网址去看原文的) LNMP(Linux-Nginx-Mysql-PHP),本文在CentO ...
-
Spring.net 学习IOC------属性注入
我们就完成我们的第一个spring.net学习IOC的"hello world!". 1> 我们新建一个C# 的控制台项目名为Spring,然后引入Spring.Core.d ...
-
mysql建立索引的几大原则
(转)仅供自己学习,特此记录 1.选择唯一性索引 唯一性索引的值是唯一的,可以更快速的通过该索引来确定某条记录.例如,学生表中学号是具有唯一性的字段.为该字段建立唯一性索引可以很快的确定某个学生的信息 ...