boostrap手风琴代码案例

以下是一个基本的 Bootstrap 手风琴代码案例：

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          手风琴标题 1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        手风琴内容 1
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          手风琴标题 2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        手风琴内容 2
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          手风琴标题 3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        手风琴内容 3
      </div>
    </div>
  </div>
</div>

在上面的代码中，`id="accordion"` 用于将三个手风琴项目组成一个手风琴组，`data-parent="#accordion"` 用于指定手风琴组的父元素。每个手风琴项目都有一个标题和内容，标题使用 `class="card-header"`，内容使用 `class="card-body"`。`data-toggle="collapse"` 和 `data-target="#collapseOne"` 用于指定手风琴项目的标题和内容之间的联系。`aria-expanded="true/false"` 用于指定手风琴项目的状态。