Bootstrap 简明教程

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

此示例展示了一个基本的走马灯。

Download

此示例展示了一个带有指示符的走马灯。

Download

此示例展示了一个带有标题的走马灯。

Download

此示例展示了一个带有动画的走马灯。

Download

此示例展示了一个带有时间间隔的走马灯。

Download

此示例展示了一个自动播放走马灯。

Download