Bootstrap - 互動

本章討論 Bootstrap 實用工具類，這些類可以改變使用者與網站內容互動的方式。

文字選擇

本節演示 Bootstrap 實用工具類 user-select-* 如何改變使用者互動過程中內容的選擇方式。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Interactions</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 class="user-select-all">When the user clicks on this paragraph, the entire text will be selected.</p>
        <p class="user-select-auto">The select behavior of this paragraph is set to its default state.</p>
        <p class="user-select-none">When the user clicks on this paragraph, it will not be selectable.</p>
    </body>
    </html>

指標事件

Bootstrap 類 .pe-none 和 .pe-auto 類分別阻止和啟用元素互動，如下例所示。

示例

您可以使用 編輯和執行 選項編輯並嘗試執行此程式碼。

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Interactions</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>Use the "pe-none" class to make the <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">link</a> inactive.</p>
    <p>Use the "pe-auto" class to make the <a href="#" class="pe-auto">link</a> active.</p>
    <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link </a> is not active due to the inherited pointer-events property. Now, <a href="#" class="pe-auto">This link</a> is an active.</p>
  </body>
  </html>

.pe-none 類及其應用的 pointer-events CSS 屬性旨在停用使用指標（例如滑鼠、手寫筆或觸控輸入）與元素的互動。預設情況下，帶有 .pe-none 的連結和控制元件對於鍵盤使用者仍然是功能性和可訪問的。
為了對鍵盤使用者實現完全停用，可以為鍵盤使用者新增其他屬性。這些屬性可能包括 tabindex="-1" 以阻止鍵盤焦點，aria-disabled="true" 向輔助技術指示其停用狀態，也可以使用 JavaScript 完全阻止對其的任何操作。

如果可能，可以用更簡單的方法實現

對於表單控制元件：您可以在 HTML 中新增 disabled 屬性。
對於連結：從連結中刪除 "href" 屬性，有效地將它們變成非互動式或佔位符元素。

列印頁面