Bootstrap4 折叠

Bootstrap4折叠是一种常用的页面元素，可以折叠和展开内容段落和菜单列表。以下是一份关于Bootstrap4折叠的详细技术文档。

首先，在使用Bootstrap4折叠前，需要引用Bootstrap4的CSS和JS文件。可以在HTML文件头中通过以下代码引用：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>

在页面中，可以使用Bootstrap4的折叠组件。折叠组件有两个部分：触发器和折叠区域。触发器可以是按钮、链接或任何其他元素，当用户点击触发器时，折叠区域将展开或折叠。以下是一个简单的折叠组件示例：

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample">
  折叠内容
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    这是要折叠的内容
  </div>
</div>

触发器部分是一个按钮，按钮上有btn和btn-primary样式类。data-toggle="collapse"属性指示这是一个折叠元素。data-target属性指示折叠的目标是ID为collapseExample的元素。在折叠目标部分，id属性必须与data-target属性匹配，collapse样式类进行内容的折叠，card和card-body样式类可用于美化展开内容。

在折叠中，还有一些可选的参数可以使用。例如，可以配置折叠内容的状态（展开或折叠），并且可以在折叠状态变化时触发事件。以下是示例代码：

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" onclick="myFunction()">
  折叠内容
</button>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    这是要折叠的内容
  </div>
</div>

<script>
function myFunction() {
  if ($("#collapseExample").hasClass("show")){
    // 折叠内容已展开，执行此处代码
  } else {
    // 折叠内容已折叠，执行此处代码
  }
}
</script>

在上面的例子中，aria-expanded和aria-controls属性用于辅助技术，以帮助无障碍用户理解折叠。在用户单击折叠触发器时，onclick属性将触发myFunction()函数。myFunction()函数会检查折叠状态（展开或折叠），并根据需要执行相应代码。

总之，Bootstrap4的折叠组件是构建交互式页面时非常重要的一个元素，易于使用和定制，并且适用于各种设备和浏览器。通过使用Bootstrap4的折叠组件，您可以创建复杂的界面，提高用户的交互体验。