修改Bootstrap手风琴配置：基于Bootstrap 4.1.0的组件调整需求

嘿，我帮你把这段Bootstrap 4.1.0的手风琴代码整理妥当，还整理了常用的配置修改方案，方便你调整：

完整可运行的手风琴代码示例 #

<div id="accordion" class="mt-3">
  <div class="card">
    <div class="card-header bg-dark text-white" id="headingOne">
      <h5 class="mb-0 fontBig text-center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Title 1
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        这里是Title 1对应的折叠内容区域，你可以替换成任意内容
      </div>
    </div>
  </div>
  <!-- 可添加更多手风琴面板 -->
  <div class="card">
    <div class="card-header bg-dark text-white" id="headingTwo">
      <h5 class="mb-0 fontBig text-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Title 2
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        这里是Title 2对应的折叠内容区域
      </div>
    </div>
  </div>
</div>

常用配置修改项 #

• 调整默认展开/收起状态：
  • 若想让面板默认收起，把目标面板的collapse show改为collapse，同时将标题栏的aria-expanded="true"改成aria-expanded="false"；反之，给collapse类加上show就能默认展开。
• 自定义标题栏样式：
  • 替换bg-dark text-white类可以快速切换标题栏主题，比如用bg-primary text-light换成蓝色主题，或者自定义CSS类来实现更个性化的样式。
  • 修改text-center为text-left/text-right可以调整标题的对齐方式，也可以调整fontBig类的字体大小属性。
• 修改手风琴的交互规则：
  • 默认手风琴同一时间只能展开一个面板，如果想要允许同时展开多个，只需要移除每个折叠面板上的data-parent="#accordion"属性即可。
• 调整整体布局间距：
  • 外层的mt-3是Bootstrap的间距类（margin-top: 1rem），你可以换成mt-4、mb-3等其他间距类，或者添加自定义CSS来调整手风琴的整体边距和内边距。

内容的提问来源于stack exchange，提问作者Luiscri