加载页面时，会打开包含类折叠的Bootstrap 4 div

。

在前端开发中，Bootstrap是一个流行的开源前端框架，提供了一系列的CSS和JavaScript组件，用于构建响应式的、移动优先的Web页面。其中，Bootstrap 4引入了一种被称为折叠（Collapse）的组件，用于创建可以展开和折叠的内容区域。

折叠组件允许在页面加载时隐藏一些内容，用户可以通过点击触发器来展开或折叠这些内容。触发器可以是按钮、链接或其他任何可点击的元素。使用Bootstrap 4的折叠组件可以提供更好的用户体验和页面交互。

在HTML中，通过添加特定的类来实现折叠功能。通常，包含类折叠的Bootstrap 4 div需要设置以下几个关键类：

1. collapse：指定要折叠的内容区域。
2. show：指示默认情况下是否显示折叠的内容。如果不添加此类，内容将在页面加载时隐藏。
3. collapsing：在折叠动画过渡期间自动添加，用于提供平滑的展开和折叠效果。
4. collapsed：用于标记触发器是否处于折叠状态。

以下是一个示例的HTML代码，展示了一个包含类折叠的Bootstrap 4 div的基本结构：

<div class="collapse show" id="collapseExample">
  <div class="card card-body">
    折叠内容
  </div>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  点击触发折叠
</button>

在上述代码中，div元素具有collapse和show类，表示这是一个折叠内容区域，并在页面加载时显示。触发折叠的按钮具有data-toggle和data-target属性，指定了要折叠的内容区域的ID。点击按钮时，折叠内容将展开或折叠。

对于开发者而言，使用Bootstrap 4的折叠组件可以方便地创建可折叠的内容区域，提高用户体验和交互效果。如果需要进一步了解Bootstrap 4折叠组件的详细信息，可以参考腾讯云官方文档中关于Bootstrap的相关介绍：腾讯云 - Bootstrap。