Bootstrap4 折叠学习笔记

折叠组件

Bootstrap4 提供了一个非常方便的折叠组件，可以用于隐藏/显示大块的内容。折叠组件包括两部分：控制按钮和内容区域。

控制按钮

控制按钮用来触发展开/折叠内容区域，它需要一个 data-toggle 属性来指示它的作用，和一个 data-target 或 href 属性来指定要展开/折叠的内容区域的选择器。例如：

htmlCopy Code
<button class="btn btn-primary" data-toggle="collapse" data-target="#content">点击展开/折叠</button>

如果你希望控制按钮有一个状态图标（展开/折叠），可以使用 data-* 属性来定义它们。例如：

htmlCopy Code
<button class="btn btn-primary" data-toggle="collapse" data-target="#content" data-expanded-icon="fa fa-minus" data-collapsed-icon="fa fa-plus">点击展开/折叠</button>

你可以使用 font-awesome 图标或自定义 CSS 类来定义这些图标。

内容区域

内容区域是要展开/折叠的区域，需要使用 id 属性给它一个唯一的标识符，然后在控制按钮中使用 data-target 或 href 属性来引用它。例如：

htmlCopy Code
<div id="content" class="collapse">
  <p>这里是要展开/折叠的内容。</p>
</div>

你也可以设置展开或折叠的状态，通过添加 show 类或 hide 类来设置初始状态。例如：

htmlCopy Code
<div id="content" class="collapse show">
  <p>这里是初始状态为展开的内容。</p>
</div>

或者

htmlCopy Code
<div id="content" class="collapse hide">
  <p>这里是初始状态为折叠的内容。</p>
</div>

折叠示例

下面是一个使用 Bootstrap4 折叠组件实现的折叠示例：

htmlCopy Code
<div class="container mt-3">
  <h2>Bootstrap4 折叠示例</h2>
  <p>点击下面的按钮来展开/折叠内容。</p>
  <button class="btn btn-primary" data-toggle="collapse" data-target="#content" data-expanded-icon="fa fa-minus" data-collapsed-icon="fa fa-plus">点击展开/折叠</button>
  <div id="content" class="collapse show">
    <p>这是要展开/折叠的内容。</p>
  </div>
</div>

可以看到，当我们点击按钮时，内容区域会打开或关闭，同时按钮上的图标也会改变。

以上就是 Bootstrap4 折叠组件的简单使用和实现方法，希望对你有所帮助！