我们来逐一分析一下相关的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不支持这些效果。