Bootstrap 简明教程
Bootstrap - Carousel demo
What is a carousel?
Bootstrap 中的轮播是一个幻灯片组,可让用户以循环播放序列显示多个图像、视频或其他类型的元素。这是一个响应性且动态的组件,可轻松自定义。
Bootstrap 提供一套类型,用于创建轮播组件并对其进行自定义。
用于添加轮播的两种主要类型:
class |
description |
.carousel |
此类型设置轮播的基本结构 |
.carousel-item |
此类型用于定义轮播内的各个幻灯片 |
用于在轮播中自定义幻灯片的可选类型:
class |
description |
.slide |
向轮播添加滑动动画 |
.active |
定义初始活动幻灯片 |
.carousel-indicators |
向轮播底部添加导航指示器 |
.carousel-control-prev and carousel-control-next |
向轮播添加左右箭头按钮,以便手动导航 |
.carousel-caption |
为走马灯中的每一张幻灯片增加一个标题或描述 |
以下是一些走马灯示例:
Example |
Description |
Download link |
此示例展示了一个基本的走马灯。 |
||
此示例展示了一个带有指示符的走马灯。 |
||
此示例展示了一个带有标题的走马灯。 |
||
此示例展示了一个带有动画的走马灯。 |
||
此示例展示了一个带有时间间隔的走马灯。 |
||
此示例展示了一个自动播放走马灯。 |