Bootstrap - 摺疊

本章將討論 Bootstrap 摺疊。摺疊是切換內容可見性。這是使用 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-horizontal修飾符類以轉換寬度而不是高度。您可以透過使用寬度實用程式、建立您自己的唯一 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屬性為使用者提供額外的快捷方式，以便直接導航到可摺疊元素本身。

列印頁面