互動

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

文字選取

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

當使用者按一下時，這個段落將會被全部選取。

這個段落有預設的選取行為。

當使用者按一下時，這個段落將不會被選取。

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>

指標事件

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

這個連結無法按一下。

這個連結可以按一下（這是預設行為）。

此連結無法按一下，因為 pointer-events 屬性從其父項繼承而來。不過，此連結有 pe-auto 類別，可以按一下。

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 實用程式 API

互動實用程式在 scss/_utilities.scss 中的實用程式 API 中宣告。瞭解如何使用實用程式 API。

scss/_utilities.scss

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