互動（Interactions）

改變使用者與網站內容互動方式的通用類別。

文字選取（Text selection）

變更使用者與內容互動時的選取方式。

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

html

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

指標事件（Pointer events）

Bootstrap 提供 .pe-none 和 .pe-auto 類別來防止或新增元素互動。

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

html

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

.pe-none 類別（以及它設定的 pointer-events CSS 屬性）僅防止與指標（滑鼠、觸控筆、觸控）的互動。帶有 .pe-none 的連結和控制項預設仍可供鍵盤使用者聚焦和操作。為確保它們對鍵盤使用者也完全無效，您可能需要新增額外的屬性，例如 tabindex="-1"（防止它們接收鍵盤焦點）和 aria-disabled="true"（向輔助技術傳達它們實際上已停用的事實），並可能使用 JavaScript 來完全防止它們被操作。

如果可能的話，更簡單的解決方案是：

對於表單控制項，新增 disabled HTML 屬性。
對於連結，移除 href 屬性，使其成為非互動式錨點或佔位連結。

CSS

Sass utilities API

互動通用類別在 scss/_utilities.scss 中的 utilities API 中宣告。了解如何使用 utilities API。

scss/_utilities.scss

"user-select": (
  property: user-select,
  values: all auto none
),
"pointer-events": (
  property: pointer-events,
  class: pe,
  values: none auto,
),