bootstrap提供了一个carousel（旋转木马）组件，我们称之为轮播。它可以轮播图片和文字，常常用来展示网站的关键信息。如下就是一个carousel：
[carousel demo](https://jsfiddle.net/1000copy/29r1fg71/)
代码如下：
解释
任何一个轮播，都需要通过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")访问
中的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...