Bootstrap5 手风琴（Accordion）

听海边涛声

于 2024-09-02 18:03:19 发布

阅读量683

点赞数 1

文章标签： bootstrap 前端

本文链接：https://blog.csdn.net/panghuangang/article/details/141821431

版权

https://getbootstrap.com/docs/5.3/components/accordion/

手风琴菜单和小部件广泛用于web应用程序中。主要作用是管理少量区域内的大量内容和导航列表。使用bootstrap5折叠插件，可以创建手风琴来显示或隐藏内容。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
</head>

<body>
  <div class="container">
    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button type="button" class="accordion-button" data-bs-toggle="collapse"
            data-bs-target="#collapseOne">频道1</button>
        </h2>
        <div class="collapse accordion-collapse" id="collapseOne" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <p>频道1的内容</p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button type="button" class="accordion-button" data-bs-toggle="collapse"
            data-bs-target="#collapseTwo">频道2</button>
        </h2>
        <div class="collapse accordion-collapse" id="collapseTwo" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <p>频道2的内容</p>
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <h2 class="accordion-header">
          <button type="button" class="accordion-button" data-bs-toggle="collapse"
            data-bs-target="#collapseThree">频道3</button>
        </h2>
        <div class="collapse accordion-collapse" id="collapseThree" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            <p>频道3的内容</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="bootstrap5/js/bootstrap.bundle.min.js"></script>
</body>

</html>