Bootstrap 简明教程
Bootstrap - Collpase
本章将讨论 Bootstrap 的折叠。折叠是指切换内容可见性。这使用 Bootstrap 的 JavaScipt 插件和一些类实现。
-
用于折叠的 JavaScript 插件用于显示和隐藏信息。当映射到特定元素以进行切换时，按钮或锚点充当触发器。
-
折叠元素时，高度将从其当前值动态调整为零。由于 CSS 处理动画的方式，因此无法将填充应用于 .collapse 元素。
Basic example
基本折叠按以下示例运作。单击按钮可通过类更改显示和隐藏另一个元素：
-
Class .collapse hides content.
-
Class .collapsing helps transitions.
-
Classes .collapse.show displays content.
使用具有 data-bs-target 属性的按钮是个不错的主意。您还可以使用具有 role="button" 的 <a> 链接（尽管从语义角度不建议这样做）。这两种情况下 data-bs-toggle="collapse" 都很有必要。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap plugin - Collapse</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Collapse using link
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Collapse using button
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
The collapse JavaScript plugin used to display and hide content.
</div>
</div>
</body>
</html>Horizontal
折叠插件支持水平折叠。针对直接子元素设置宽度，并添加 .collapse-horizontal 修饰符类以转换宽度，而不是高度。您可以进一步自定义，使用宽度实用程序、创建自己的 Sass 或使用内联样式。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap plugin - Collapse</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Collapse With Toggle Width
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse collapse-horizontal" id="collapseWidthExample">
<div class="card card-body" style="width: 300px;">
The collapse plugin supports horizontal collapsing.
</div>
</div>
</div>
</body>
</html>Multiple toggles and targets
可以使用多个目标来切换多个元素，将它们分配给一个常见组，并使用单个 <button> 或 <a> 标记隐藏/显示。以下要点有助于我们更好地理解这一点：
-
通过在 <button> 或 <a> 的 data-bs-target 属性中分配公共类，元素可以引用多个元素以显示和隐藏这些元素。
-
多个 <button> 或 <a> 元素可以显示和隐藏同一元素，如果它们各自使用其 data-bs-target 或 href 属性引用该元素。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap plugin - Collapse</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Collapse First Item</a>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Collapse Second Item</button>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Collapse Both Elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Example of multiple collpase and targets.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Example of multiple collapse and targets.
</div>
</div>
</div>
</div>
</body>
</html>