我们来逐一分析一下相关的CSS样式。 首先是容器样式carousel，它只定义了一个相对定位position:relative;，所以在使用的过程中需要再次定义该元素的高度和宽度。其次是carousel-inner样式，该样式是图片集的容器，其内部放置了多个以item为样式的div元素，主要定义了定位和默认的隐藏与显示状态。 默认情况下，所有的图片都是隐藏的，只有设置了.active样式的图片才以块级元素的方式显示出来，其位置是通过left: 0来达到左对齐的目的。carousel-control是这两个箭头的z-index高度图片容器，其定义原理主要是，在记录大容器左边和右边的15%的距离，分别显示两个a链接，然后在a链接内部定义需要显示的小图标。
然后定义a链接内部的小图标。 关于小图标，作者定义了两种样式，一种是glyphicon表示左右方向字体图标，另外一种是icon的字符图标。字体样式glyphicon-chevron-left和glyphicon-chevron-right分别代表左右箭头；同理，字符样式icon-prev和icon-next分别代表另外一种形式的左右箭头，其字符是通过在before伪类上定义的。
首先，任何插件一般都有一个父容器，本插件也不例外，带有data-ride=”carousel”的div就是轮播插件的容器，容器的id为carousel-container，稍后会用到；还有两个样式，其中carousel样式做样式容器，而slide样式和fade类似，用来定义轮播图片的时候是否有特效。然后再看其内部结构，分为以下3个部分：
❑carousel-inner样式div内部包含多个含有item的div样式，在这些内部的div里，定义我们要显示的幻灯图片。
❑carousel-indicators样式ol内部定义了一组标示符，用户单击这些标示符可以直接显示相应的图片，而这些标示符上面都定义了类型data-slide-to=”2”这样的属性，其表示单击该标识符显示第3张图片（索引从0开始）。
❑另外两个a链接是一组，用于显示左右箭头，可以改变轮播的方向。 注意一下，这两个元素上定义的data-slide属性值只能是prev或者next（表示上一张、 下一张）。
需要特别说明的是，ol指示符元素在3个部分的位置可以任意定义，左右控制链接（a元素）可以放在ol前面，也可以放在ol后面，但是千万不能放在carousel-inner样式div的前面（会被其遮盖住）。另外，还有几点需要再解释一下（在源码分析时容易理解）：item样式上如果有active样式的话，则表示该图正在显示，其他图片则都隐藏；提示符上的data-target和左右控制链接href里的值都一样，其表示容器元素的id（或者样式），以便后期这些元素被单击的时候，可以很方便地找到容器元素。针对图片，轮播插件还提供了一个字幕说明样式（carouselcaption），紧接着img元素定义即可。
注意
Bootstrap基于CSS3实现动画过渡效果，所以IE 8、 IE 9不支持这些效果。
