bootstrap提供了一个carousel(旋转木马)组件,我们称之为轮播。它可以轮播图片和文字,常常用来展示网站的关键信息。如下就是一个carousel:
[carousel demo](https://jsfiddle.net/1000copy/29r1fg71/)
代码如下:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<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>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1000x150" alt="First Slide">
</div>
<div class="item">
<img src="http://placehold.it/1000x150" alt="Second Slide">
</div>
<div class="item">
<img src="http://placehold.it/1000x150" alt="Third Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
解释
任何一个轮播,都需要通过class来标识,使用carousel符号指明它的类型。标识选用的标签是div。这是一个惯例而已,实际上,其他的块标签可以Ok的,比如nav、section。
值得一说的是类slide,它在css中没有定义,而是在carousel.js内使用的,这个js文件发现如果一个carousel有slide的类的话,就是平滑的播放,否则就是直接用下一个轮播项直接的生硬的替代前一个轮播项目。
carousel组件可以由轮播指示器、轮播控件、轮播内容构成。
-轮播 carousel
----轮播指示器 indicators
-------轮播指示器 indicator
----轮播内容 inner
-------轮播项目 item
----轮播控件 controls
-------轮播控件 control
轮播内容需要使用carousel-inner在class内标识。在其内可以放置一组内容,内容常常标题和图片。
轮播指示器使用carousel-indicators在class属性内标识。轮播内容有几组,指示器就可以有几个li元素。li元素上的两个属性,data-target此指示器相关的carousel。就是说,如果一个页面有多个carousel,那么这个data-target就可以区别它们。属性data-slide-to指明当前的li指向轮播内容的按次序的画面。数字0表示第一幅,数字1表示第二幅,以此类推。
稍微停顿的看看,有趣的发现就是这段代码中有不少data-前缀的属性,比如data-target、data-slide-to。只是一个惯例,有jquery引入的。jquery有提供一个.data()的函数,可以使用
$.data("xxx")
访问
<some-element data-xxx="1">
中的data-xxx的值。这个惯例非常方便,并且在标签使用上具备一致性,因此被广泛采用。如今html也提供了类似的api访问它。不仅仅是carousel控件,还有很多控件也会这样使用的。看到这些属性就可以知道该控件不仅仅依赖bootstrap.css,也还需要依赖bootstrap.js ,jquery.js 。记得添加链接到html内:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
轮播内容由carousel-inner在class属性内标识。在其标签内嵌的标签中为轮播条目,由item类标识。其中的当前显示项使用active标识。
标识、标识、标识。我提到了那么多的标识,是因为bootstrap就是一个声明式的框架,只要声明就好,背后的魔术是可以不需要开发者关心的,所谓的声明,其中一大部分就是做大量的标识。
轮播内容中的img,指向的是http://placehold.it/的内容,这是一个可以自动生成指定大小图片的网站,用来演示非常方便。此url后跟着的参数就是宽度X高度。
最后就是控件,用来操作轮播的翻页,翻页键需要carousel-control标识,并且可以选择left和right的类加入,用于标识向左翻页还是向右翻页。
参考:
http://ejohn.org/blog/html-5-data-attributes/
https://placehold.it/
http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-carousel.php
关于
作者:刘传君
创建过产品,创过业。不好动,读书机器。
可以通过 1000copy#gmail.com 联系到我
出品
http小书 http://www.ituring.com.cn/boo…
Git小书 http://www.ituring.com.cn/boo…