以下是一个简单的过渡效果示例，使用 Bootstrap 的 Collapse 插件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 过渡效果示例</title>
<!-- 引入 Bootstrap 样式表 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#demo" aria-expanded="false" aria-controls="demo">
切换内容
</button>
<div class="collapse" id="demo">
<div class="card card-body">
这是一个过渡效果的内容。
</div>
</div>
</div>
<!-- 引入 Bootstrap 的 JavaScript 文件（需要在文档末尾引入） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
在这个例子中，点击按钮将触发 Collapse 插件，使内容区域平滑地展开或收缩。data-bs-toggle 和 data-bs-target 属性用于指定触发元素和目标元素，aria-expanded 和 aria-controls 属性用于辅助屏幕阅读器。
除了 Collapse 插件，其他 Bootstrap 插件也使用了类似的过渡效果，你可以根据具体需求查阅 Bootstrap 文档以获取更多关于过渡效果的信息和使用方法。如果你希望在没有使用特定插件的情况下实现自定义的过渡效果，你可以使用 Bootstrap 提供的一些 CSS 类，比如 fade 类。
转载请注明出处：http://www.zyzy.cn/article/detail/12631/Bootstrap