前端学习笔记：bootstrap(12)

最新推荐文章于 2024-08-24 08:11:19 发布

黄道婆

最新推荐文章于 2024-08-24 08:11:19 发布

阅读量449

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/elizabethxxy/article/details/101324609

版权

本文是前端学习笔记，详细介绍了Bootstrap的轮播图组件，包括其组成类样式名、相关属性，以及如何创建一个带有指示器和控制按钮的轮播图实例。内容涵盖carousel的容器类、指示器、图片容器、图片标题和控制按钮的用法，以及数据属性如data-ride和data-interval的设置。

摘要由CSDN通过智能技术生成

前端学习笔记：bootstrap(12)

(2)轮播图
这个组件用于轮播显示一组图片，类似于旋转木马，页面加载就自动运行，也可以通过点击左右的两个箭头向左或向右翻页。
a.组成的类样式名
类样式名字描述
carousel slide 轮播图最外面容器
carousel-indicators 指示器：中间的小圆点
carousel-inner 内部放所有图片的容器
carousel-caption 图片标题
carousel-control 下面的控制按钮

b.相关的属性
属性名作用
data-ride="carousel" 指定当前是一个轮播图，加载时自动运行
data-interval="2000" 间隔的时间间隔，单位是毫秒
data-target="#myPic" 指定轮播图div容器的id值

案例需求：参考文档，实现上面的轮播图的效果
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-