手风琴 Accordion
手风琴将多个折叠面板组合在同一容器中，一次只展开一项，点击标题即可切换。面板内容任意，常用在 FAQ、表单分组与设置项中。
基础示例
默认状态下第一项展开，其余折叠；展开任意一项时，同容器内其他面板自动收起。
这是第一个面板的内容。 它默认处于展开状态。面板通过
data-bs-parent 关联到外层容器，因此同一容器内同时只会展开一项。你可以在面板里放任意内容——段落、列表、表单，甚至另一个组件。
默认折叠的面板。点击标题即可展开，同时项目一会自动收起——这就是手风琴（Accordion）名称的由来。
第三个面板。注意展开本项目时，项目一与项目二都会收起；这是
data-bs-parent 提供的「同时仅一项展开」行为。
HTML 示例
始终展开（允许同时展开多项）
去掉折叠面板上的 data-bs-parent 属性，各项即相互独立，可以同时保持展开状态。
这个面板没有设置
data-bs-parent，因此展开后不会影响其他面板的状态。
点击我展开，再点第一个项目——两个面板可以同时打开，互不干扰。
HTML 示例
无边框（Flush）
添加 accordion-flush 类移除默认边框与圆角，适合放在浅色表面上与其他内容融为一体。
Flush 手风琴没有外边框和圆角，顶部与底部边缘贴合容器，非常适合 FAQ 列表这样的场景。
可以。手风琴由 Bootstrap 实用类组成，你可以通过覆盖 CSS 变量或添加自定义类来调整配色、圆角与间距。
HTML 示例
自定义图标
隐藏默认的箭头图标，改用自定义的加号图标；展开时加号旋转 45° 变为乘号。
通过 CSS 隐藏默认
::after 箭头，并在按钮内放置 SVG 图标；利用 :not(.collapsed) 状态类控制图标旋转。
展开时加号旋转 45° 变成乘号，收起时恢复——这是手风琴自定义图标最常见的交互模式之一。
HTML 示例