当前位置：首页 > 文章列表 > 文章 > 前端 > Bootstrap折叠面板制作教程详解

Bootstrap折叠面板制作教程详解

2025-12-02 08:12:30 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《CSS中使用Bootstrap制作折叠面板教程》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

Bootstrap的collapse组件可快速实现内容展开收起，需引入CSS和JS文件，通过data-bs-toggle和data-bs-target控制显示隐藏，支持默认展开和手风琴效果，提升交互体验。

如何在CSS中使用Bootstrap制作折叠面板_Bootstrap collapse组件控制显示隐藏

在网页开发中，折叠面板（Collapse）是一种常见的交互组件，常用于显示或隐藏内容区域。Bootstrap 提供了 collapse 组件，可以轻松实现内容的展开与收起，无需编写额外的 JavaScript 代码即可完成基本功能。

引入 Bootstrap 文件

使用 collapse 组件前，需要确保页面已正确引入 Bootstrap 的 CSS 和 JS 文件。推荐使用 CDN 方式：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

注意：collapse 功能依赖于 Bootstrap 的 JavaScript 插件，所以必须引入 JS 文件，且 bootstrap.bundle.min.js 包含了 Popper，适用于大多数场景。

创建基本折叠面板

使用 data-bs-toggle="collapse" 属性控制目标元素的显示与隐藏。点击触发元素时，目标会平滑展开或收起。

示例：一个按钮控制一段文本的显示隐藏

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample">
  点击展开/收起
</button>

<div class="collapse" id="collapseExample">
  <div class="card card-body mt-2">
    这里是被隐藏的内容，点击按钮可切换显示状态。
  </div>
</div>

说明：

data-bs-toggle="collapse" 表示该元素为触发器
data-bs-target="#collapseExample" 指定目标元素的 ID
collapse 类应用在目标容器上，初始为隐藏状态

默认展开的折叠面板

如果希望内容默认处于展开状态，给目标元素添加 show 类即可：

<div class="collapse show" id="collapseExample">
  <div class="card card-body">
    页面加载后默认可见。
  </div>
</div>

添加 show 后，元素在初始化时就会显示。

手风琴（Accordion）效果

多个折叠面板组合成手风琴，常用于 FAQ 或分类内容展示。Bootstrap 提供了 accordion 类来实现互斥展开效果。

<div class="accordion" id="myAccordion">
  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelOne">
        面板一
      </button>
    </h2>
    <div id="panelOne" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
      <div class="accordion-body">
        这是第一个面板的内容。
      </div>
    </div>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-header">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelTwo">
        面板二
      </button>
    </h2>
    <div id="panelTwo" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
      <div class="accordion-body">
        这是第二个面板的内容。
      </div>
    </div>
  </div>
</div>

关键点：