Bootstrap - 折叠

本章将讨论 Bootstrap collpase。折叠是切换内容的可见性。这是使用 bootstrap 的 javaScript 插件和一些类来实现的。

  • 用于折叠的 JavaScript 插件用于显示和隐藏信息。当映射到特定元素进行切换时，按钮或锚点充当触发器。

  • 当元素折叠时，高度将从当前值变为零。由于 CSS 处理动画的方式，填充不能应用于.collapse元素。

基本示例

基本折叠的工作原理如下例所示。单击时按钮通过类更改显示和隐藏另一个元素：

  • .collapse类隐藏内容。

  • 类.collapsing有助于转换。

  • 类.collapse.show显示内容。

使用带有data-bs-target属性的按钮是一个好主意。您还可以使用带有role="button"的<a>链接（尽管从语义角度来看不建议这样做）。data-bs-toggle="collapse"在这两种情况下都是必要的。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap plugin - Collapse</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
          Collapse using link
        </a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
          Collapse using button
        </button>
      </p>
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          The collapse JavaScript plugin used to display and hide content.
        </div>
      </div>
    </body>
    </html>

水平的

水平折叠由折叠插件支持。在直接子元素上设置宽度并添加.collapse-horizo​​ntal修饰符类以过渡宽度而不是高度。您可以使用宽度实用程序进一步自定义、创建自己独特的 Sass 或使用内联样式。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap plugin - Collapse</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <p>
      <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
        Collapse With Toggle Width 
      </button>
    </p>
    <div style="min-height: 120px;">
      <div class="collapse collapse-horizontal" id="collapseWidthExample">
        <div class="card card-body" style="width: 300px;">
          The collapse plugin supports horizontal collapsing.
        </div>
      </div>
    </div>
  </body>
  </html>

多个切换和目标

多个目标可用于切换多个元素，将它们分配到一个公共组，并使用单个<button>或<a>标签来隐藏/显示。以下几点可以帮助我们更好地理解这一点：

  • 通过在<button>或<a>的data-bs-target属性中分配公共类，一个元素可以引用多个元素来显示和隐藏它们。

  • 如果多个<button>或<a>元素各自使用其data-bs-target或href属性引用该元素，则它们可以显示和隐藏同一元素。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap plugin - Collapse</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
      <p>
        <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Collapse First Item</a>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Collapse Second Item</button>
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Collapse Both Elements</button>
      </p>
      <div class="row">
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample1">
            <div class="card card-body">
              Example of multiple collpase and targets.
            </div>
          </div>
        </div>
        <div class="col">
          <div class="collapse multi-collapse" id="multiCollapseExample2">
            <div class="card card-body">
              Example of multiple collapse and targets.
            </div>
          </div>
        </div>
      </div>
    </body>
    </html>

无障碍

  • 使用 aria-expanded 将可折叠元素的状态传达给辅助技术。对于关闭的可折叠元素设置aria-expanded="false" ，对于打开的可折叠元素设置 aria-expanded="true" 。

  • 该插件根据可折叠元素是打开还是关闭来切换控件上的属性。如果控制元素的 HTML 元素不是按钮，则应用role="button" 。

  • 现代屏幕阅读器和类似的辅助技术利用data-bs-target属性为用户提供直接导航到可折叠元素本身的附加快捷方式。