Bootstrap折叠面板制作教程

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《如何用Bootstrap制作折叠面板》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

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

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

引入 Bootstrap 文件

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

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

创建基本折叠面板

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

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

  点击展开/收起



  

    这里是被隐藏的内容，点击按钮可切换显示状态。
  

说明：

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

默认展开的折叠面板

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

  

    页面加载后默认可见。
  

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

手风琴（Accordion）效果

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

  

    

      
        面板一
      
    
    

      

        这是第一个面板的内容。
      
    
  

  

    

      
        面板二
      
    
    

      

        这是第二个面板的内容。
      
    
  

关键点：

• accordion 容器包裹所有项
• 每个 accordion-item 代表一个面板
• data-bs-parent 确保在同一组内只能展开一个面板
• collapsed 类用于控制按钮的视觉状态

基本上就这些。利用 Bootstrap 的 collapse 组件，你可以快速构建响应式的折叠内容区域，提升用户体验，无需从零写动画逻辑。结构清晰、语义明确，适合各种信息聚合场景。

到这里，我们也就讲完了《Bootstrap折叠面板制作教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！