Bootstrap 简明教程

Bootstrap - Collpase

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

This chapter will discuss about Bootstrap collpase. Collasping is toggling the content visibility. This is achieved using bootstrap’s javaScript plugins and some classes.

The JavaScript plugin for collapse is used to display and hide information. Buttons or anchors act as triggers when mapped to specific elements to toggle.
When an element is collapsed, the height will animate from its current value to zero. Due to how CSS handles animations, padding cannot be applied to a .collapse element.

Basic example

基本折叠按以下示例运作。单击按钮可通过类更改显示和隐藏另一个元素：

A basic collapse works as in the following example. Buttons when clicked show and hide another element via class changes:

Class .collapse hides content.
Class .collapsing helps transitions.
Classes .collapse.show displays content.

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

Using a button with the data-bs-target attribute is a good idea. You can also use an <a> link with a role="button" (although this is not advised from a semantic perspective). data-bs-toggle="collapse" is necessary in both situations.

Example

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

You can edit and try running this code using *Edit & Run *option.

    <!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>

Horizontal

折叠插件支持水平折叠。针对直接子元素设置宽度，并添加 .collapse-horizontal 修饰符类以转换宽度，而不是高度。您可以进一步自定义，使用宽度实用程序、创建自己的 Sass 或使用内联样式。

Horizontal collapsing is supported by collapse plugin. Set a width on the immediate child element and add the .collapse-horizontal modifier class to transition the width rather than the height. You can further customize by using width utilities, create your own unique Sass, or use inline styles.

Example

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

You can edit and try running this code using *Edit & Run *option.

  <!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>

Multiple toggles and targets

可以使用多个目标来切换多个元素，将它们分配给一个常见组，并使用单个 <button> 或 <a> 标记隐藏/显示。以下要点有助于我们更好地理解这一点：

Multiple targets can be used to toggle multiple elements assingning them to a common group and using a single <button> or <a> tag to hide/show. Following points helps us understand this better:

By assigning the common class in the data-bs-target attribute of the <button> or <a>, an element can reference multiple elements to show and hide them.
Multiple <button> or <a> elements can show and hide the same element if they each reference it with their data-bs-target or href attribute.

Example

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

You can edit and try running this code using *Edit & Run *option.

    <!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>

Accessibility

Use aria-expanded to communicate collapsible element’s status to assistive technology. Set aria-expanded="false" for closed collapsible elements and aria-expanded="true" for open ones.
The plugin toggles the attribute on the control based on whether the collapsible element is open or closed. Apply role="button" if the control element’s HTML element is not a button.
Modern screen readers and similar assistive technologies make use of the data-bs-target attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.