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-targethref属性引用该元素,则它们可以显示和隐藏同一元素。

例子

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

<!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属性为用户提供直接导航到可折叠元素本身的附加快捷方式。