Bootstrap 5 折叠学习笔记

Bootstrap 5 折叠是一种用于隐藏/展示大块内容的功能。通过折叠，用户可以看到关键信息，并隐藏不必要的细节。

基本用法

Bootstrap 5 的折叠使用了 data-bs-toggle 和 data-bs-target 属性来控制折叠内容的显示和隐藏。以下是一个基本的折叠示例：

htmlCopy Code
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        折叠标题 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        折叠内容 1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        折叠标题 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        折叠内容 2
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        折叠标题 3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        折叠内容 3
      </div>
    </div>
  </div>
</div>

在上面的例子中，我们使用了 data-bs-toggle 和 data-bs-target 属性来控制折叠菜单的显示和隐藏。当点击折叠标题时，相应的折叠内容就会显示出来。

注意，在折叠标题按钮中，我们使用了 aria-expanded 和 aria-controls 属性来指定当前折叠是否展开，以及对应的折叠内容的控制标识。

折叠样式

Bootstrap 5 的折叠功能还提供了一些样式选项，可以通过添加一些类来实现自定义的外观效果。

手风琴效果

手风琴效果是指只有一个折叠内容能够展开的效果。要实现这个效果，只需要在父元素上添加 accordion 类，同时在每个 accordion-item 上添加 accordion-collapse 类。在创建折叠标题按钮时，需要将 data-bs-parent 属性设置为折叠元素的父元素 ID。

htmlCopy Code
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        折叠标题 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        折叠内容 1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        折叠标题 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        折叠内容 2
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        折叠标题 3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        折叠内容 3
      </div>
    </div>
  </div>
</div>

内边距和外边距

Bootstrap 5 的折叠组件还提供了一些类，用于控制折叠标题和折叠内容的内边距和外边距。这些类包括：

• .accordion：父元素，用于包装所有折叠项。
• .accordion-item：每个折叠项的容器。
• .accordion-header：折叠标题的容器。
• .accordion-button：折叠标题按钮。
• .accordion-body：折叠内容的容器。

htmlCopy Code
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        折叠标题 1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body p-3">
        折叠内容 1
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        折叠标题 2
      </button>
    </h2>
    <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div class="accordion-body p-3">
        折叠内容 2
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
        折叠标题 3
      </button>
    </h2>
    <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
      <div class="accordion-body p-3">
        折叠内容 3
      </div>
    </div>
  </div>
</div>

在上面的例子中，我们使用了 .p-3 类来为折叠内容添加内边距。

结论

通过 Bootstrap 5 的折叠组件，可以实现非常灵活的页面元素隐藏和展示效果。掌握了折叠的基础用法和样式调整方法后，可以在实际项目中快速应用。