Bootstrap学习笔记(7)--轮播
说明:
1. 幻灯片效果,外面的div有个id="myppt",class="carousel slide"这个是有图片滑动效果,不加就是直接瞬间换图片,data-interval是每张图片停留时间,默认5000毫秒,data-ride="carousel"是页面加载完就自动播放,默认是点击后才会自动播放。
2. 里面有三个小div,分别是:
(1)class="carousel-inner",内容,放图片,每个图片有个类class="item",加个active类表示当前激活。
(2)class="carousel-indicators",指示器,就是下面的三个小圆圈,点哪个就跳到哪张图片,data-slide-to="0"是跳到第0张图片,data-target="#myppt",是确认属于哪个幻灯片组合的(为啥觉得多此一举?都已经在这个大div里面了,难道是为了能操控其他div里的图片?不要还不行,日了狗了!)。
(3)class="carousel-control",左右导航,data-slide="prev"和data-slide="next"是上一页和下一页,跟上面的data-slide-to有异曲同工之妙,href="#myppt",同样同上,这里也可以用data-target="#myppt"。另外,&lssaquo和&rssaquo是大于号,小于号的转义字符,可以设置字体大小,作为左右导航的图标。
其他功能参考http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
<div id="myppt" class="carousel slide" data-interval="1000" data-ride="carousel">
<div class="carousel-inner">
<img class="item active" src="1.jpg" alt="">
<img class="item" src="2.jpg" alt="">
<img class="item" src="3.jpg" alt="">
</div>
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myppt"></li>
<li data-slide-to = "1" data-target="#myppt"></li>
<li data-slide-to = "2" data-target="#myppt"></li>
</ol>
<a class="carousel-control left" data-slide="prev" href="#myppt">‹</a>
<a class="carousel-control right" data-slide="next" href="#myppt">›</a>
</div>
效果图(侵删。。):
Bootstrap学习笔记(7)--轮播的更多相关文章
- Bootstrap 学习笔记12 轮播插件
轮播插件: <!-- data-ride="carousel"自动播放 --> <div id="myCarousel" class=&quo ...
- BootStrap学习(7)_轮播图
一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果 ...
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
- 使用Ajax+jQuery来实现前端收到的数据在console上显示+简单的主页设计与bootstrap插件实现图片轮播
1.实现前端输入的数据在console上显示 上一篇是解决了在前端的输入信息在cygwin上显示,这次要给前台们能看见的数据,因为数据库里插入的数据少,所以写的语句翻来覆去就那几个词,emmm···当 ...
- 使用BootStrap框架中的轮播插件
在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...
- Bootstrap学习笔记-布局
Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...
- Bootstrap历练实例:轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
随机推荐
- Fragment 简介 基础知识 总结 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
- SQL INNER JOIN
A INNER JOIN command is queries that combine data from more than 1 table.For two tables that want to ...
- Mac那些相见恨晚的技巧
Mac那些相见恨晚的技巧 https://mp.weixin.qq.com/mp/homepage?__biz=MzAxNzcwMTA4Ng==&hid=2&sn=4f42926a59 ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- 谋哥:《App自推广》开篇之回到远古人类
[谋哥每天一干货.第六十八篇] 这两天帮谋天团的杨整体验他的App--"闪聊"的内測新版,改版后这款App命名为"美丫",一款致力于打造国内首款专注于女性社交的 ...
- Toast.makeText 方法出错 java.lang.RuntimeException
接手以前同事留下的代码,今天突然出现了一个bug: java.lang.RuntimeException: Can't create handler inside thread that has no ...
- UDP Sockets in C#
UDP provides an end-to-end service different from that of TCP. In fact, UDP performs only two functi ...
- PHP Libxml函数
PHP Libxml 函数 PHP Libxml 简介 Libxml 函数和常量与 SimpleXML.XSLT 以及 DOM 函数一起使用. 安装 这些函数需要 Libxml 程序包. 在 xmls ...
- error: command 'gcc' failed with exit status 1 while installing eventlet
Ubuntu安装Python包出错解决办法 : sudo apt-get install python-dev sudo apt-get install libevent-dev