Bootstrap 简明教程

Bootstrap 中的轮播是一个幻灯片组,可让用户以循环播放序列显示多个图像、视频或其他类型的元素。这是一个响应性且动态的组件,可轻松自定义。

A carousel in bootstrap is a slideshow component that allows users to display multiple images, videos, or other types of content in a looping sequence. It is a responsive and dynamic component that can be easily customized.

Bootstrap 提供一套类型,用于创建轮播组件并对其进行自定义。

Bootstrap provides a set of classes that can be used to create a carousel component and customize it.

用于添加轮播的两种主要类型:

Two main classes for adding carousel are:

class

description

.carousel

This class sets up the basic structure of the carousel

.carousel-item

This class is used to define the individual slides within the carousel

用于在轮播中自定义幻灯片的可选类型:

Optional classes to customize the slides in a carousel are:

class

description

.slide

Adds a sliding animation to the carousel

.active

Defines the initial active slide

.carousel-indicators

Adds navigation indicators to the bottom of the carousel

.carousel-control-prev and carousel-control-next

Adds left and right arrow buttons to the carousel for manual navigation

.carousel-caption

Adds a caption or description to each slide in the carousel

以下是一些走马灯示例:

Some of the examples of the carousels are as follows:

Example

Description

Download link

This example shows a basic carousel.

Download

This example shows a carousel with indicators.

Download

This example shows a carousel with captions.

Download

This example shows a carousel with animation.

Download

This example shows a carousel with time interval.

Download

This example shows an autoplay carousel.

Download