轻松掌握Bootstrap4折叠面板制作：5步实现灵活布局与交互

Dec 24, 2025

—

Bootstrap是一个流行的前端框架，它可以帮助开发者快速构建响应式、移动设备优先的网站。Bootstrap4提供了许多有用的组件，其中包括折叠面板（Collapse），它允许用户通过点击来展开或收起内容。以下是如何使用Bootstrap4创建折叠面板的详细步骤：
第一步：引入Bootstrap4
首先，在你的HTML文档中引入Bootstrap4的CDN链接。你可以在以下链接中找到Bootstrap4的CDN链接：

Bootstrap4折叠面板制作

第二步：创建折叠面板的结构
接下来，你需要创建折叠面板的结构。在HTML中，使用

元素包裹你的折叠面板内容，并给它一个特定的ID。同时，使用

这里是折叠面板的内容。

第三步：添加折叠面板的样式
你可以使用Bootstrap的类来为折叠面板添加样式。在这个例子中，我们使用了
.card
类来创建卡片样式，
.collapse
类来创建折叠效果，以及
.card-body
类来添加内容样式。

第四步：启用折叠面板的交互
Bootstrap4使用JavaScript来处理折叠面板的交互。在上面的HTML中，我们已经使用了
data-toggle=”collapse”
和
data-target=”#collapseOne”
属性来指定哪个折叠面板应该被触发。
如果你需要使用JavaScript来控制折叠面板的显示和隐藏，可以使用以下代码：
document.addEventListener(‘DOMContentLoaded’, function () {
var coll = document.getElementsByClassName(“collapse”);
var i;

for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function () { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } }); 第五步：测试和优化完成以上步骤后，保存你的HTML文件并在浏览器中打开它。你应该能看到一个折叠面板，点击标题可以展开或收起内容。你可以通过调整样式和JavaScript来优化你的折叠面板，以满足你的具体需求。通过以上五个步骤，你可以轻松地使用Bootstrap4创建一个灵活布局和交互的折叠面板。这个组件不仅美观，而且功能强大，可以帮助你的网站或应用提供更好的用户体验。