Bootstrap 4 手风琴 - Html

简介

Bootstrap 4 是目前最流行的前端 CSS 框架之一，它包含了很多常用的 UI 组件，帮助开发者快速构建美观易用的界面。而手风琴是其中非常常用的一个组件，用来展示在不同内容之间切换的效果比较好。

实现

在 Bootstrap 4 中，手风琴可以通过 <div> 标签配合一些类来实现，下面是完整的代码示例：

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Card 1 Title
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices, dui et commodo tristique, sem sapien pharetra ligula, sit amet porttitor enim elit in sapien. Morbi finibus euismod metus.
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Card 2 Title
        </button>
      </h5>
    </div>

    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Proin suscipit tempus nunc eu hendrerit. Fusce euismod diam sapien, a euismod justo efficitur non. In ut ipsum blandit, consequat arcu gravida, hendrerit turpis. Maecenas suscipit lacus lectus, at molestie lorem molestie sit amet.
      </div>
    </div>
  </div>
</div>

这个代码示例包含了两个手风琴卡片（<div class="card">），每个卡片包括卡片标题部分（<div class="card-header">）和卡片内容部分（<div class="card-body">）。在标题部分，使用了一个 <button> 标签来实现点击卡片标题时通过 JavaScript 展开或折叠卡片内容。其中，data-target 属性指向需要展示或折叠的内容部分标识。

在整个手风琴的外部，使用了一个 <div> 标签并设置 class="accordion"，并且设置每个卡片的父级为此 <div> 标签（data-parent="#accordionExample"）。这样就可以让 Bootstrap 4 自动管理手风琴，只展示一个卡片内容，其他卡片内容自动关闭。

总结

Bootstrap 4 手风琴是一个非常方便的组件，可以用来展示大量的内容在用户切换之间，尤其对于手机端来说特别友好，例如常见的常用问题列表就可以用手风琴来优化用户体验。以上就是实现手风琴的代码示例，希望能帮到你。