Bootstrap 简明教程
Bootstrap - Carousel demo
What is a carousel?
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. |
||
This example shows a carousel with indicators. |
||
This example shows a carousel with captions. |
||
This example shows a carousel with animation. |
||
This example shows a carousel with time interval. |
||
This example shows an autoplay carousel. |