<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.2/js/bootstrap.bundle.js"></script>
</head>
<body>
<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/static/demo/images/shanghai-1.jpg" alt="Shanghai" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Shanghai</h3>
<p>We had such a great time in Shanghai!</p>
</div>
</div>
<div class="carousel-item">
<img src="/static/demo/images/beijing.jpg" alt="Beijing" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Beijing</h3>
<p>Thank you, Beijing!</p>
</div>
</div>
<div class="carousel-item">
<img src="/static/demo/images/wuhan.jpg" alt="Wuhan" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>Wuhan</h3>
<p>We love the Reganmian!</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
<div class="container-fluid mt-3">
<h3>轮播实例</h3>
<p>本例演示如何创建带有指示器和控件的轮播。</p>
</div>
</body>
</html>
