Bootstrap 轮播
【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 ...
随机推荐
- MySQL死锁问题分析及解决方法实例详解(转)
出处:http://www.jb51.net/article/51508.htm MySQL死锁问题是很多程序员在项目开发中常遇到的问题,现就MySQL死锁及解决方法详解如下: 1.MySQL常用 ...
- redis 连接超时。。
在虚拟机安装后.在项目中加入redis 想测试一下功能 然后在物理机死活连不上. 1.用物理机ping 虚拟机的IP 通.... 2.然后.把redis.conf 里面bind 0.0.0.0 依然没 ...
- Java-1.6-并发包-集合
List相关 对于List并发包就只扩展了一个CopyOnWriteArrayList<E> Set相关 对于Set,并发包扩展ConcurrentSkipListSet<E> ...
- git clone慢
hosts中添加git域名映射 git安装目录/etc/hosts同样修改
- otter 数据同步
阿里巴巴分布式数据库同步系统(解决中美异地机房) 基本介绍: https://github.com/alibaba/otter 快速使用: https://github.com/alibaba/ott ...
- <基础> PHP 字符串操作
explode — 使用一个字符串分割另一个字符串 array explode ( string $delimiter , string $string [, int $limit ] ) implo ...
- MVC基于角色权限控制--用户管理
用户管理模块包括 新增用户.修改用户.展示用户列表.删除用户.用户角色分配.用户角色删除.用户权限分配 这里只介绍关于权限有关的 用户角色分配.用户角色删除.用户权限分配 新建控制器 UserInfo ...
- Spring Cloud (3)B Ribbon 负载均衡 IRule
package com.service.config; import com.netflix.loadbalancer.IRule;import com.netflix.loadbalancer.Ra ...
- 小柒2012 / spring-boot-quartz
spring-boot-quartz 基于spring-boot+quartz的CRUD动态任务管理系统,适用于中小项目. 基于spring-boot 2.x +quartz 的CRUD任务管理系统: ...
- HTTP 错误 403.6 - Forbidden 解决方案
MSDN 的解决方案 原因 1 Ip 安全的 XML 元素的allowUnlisted属性的值为 false.此外,客户端计算机的 IP 地址不在ip 安全XML 元素之下 IP 地址的列表中.IIS ...