View on GitHub

互動 (Interactions)

可改變使用者如何與網頁內容互動的通用類別

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

立即上課去

文字選擇

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

當使用者點選時，這個段落將會被全選。

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

當使用者點選的時候，此段落將不會被選取

<p class="user-select-all">當使用者點選時，這個段落將會被全選。</p>
<p class="user-select-auto">這個段落具有預設的選取行為。</p>
<p class="user-select-none">當使用者點選的時候，此段落將不會被選取</p>

Pointer 事件

Bootstrap 提供 .pe-none 與 .pe-auto 類別，以移除、添加元素的互動性。

這個連結不可被點選

這個連結可以被點選 (此為預設行為).

這個連結無法被點選，因為其 pointer-events 屬性繼承自父層。然而這個連結具有 pe-auto 類別，因此可以被點選。

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">這個連結</a> 不可被點選</p>
<p><a href="#" class="pe-auto">這個連結</a> 可以被點選 (此為預設行為).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">這個連結</a> 無法被點選，因為其 <code>pointer-events</code> 屬性繼承自父層。然而 <a href="#" class="pe-auto">這個連結</a> 具有 <code>pe-auto</code> 類別，因此可以被點選。</p>

.pe-none 類別 (以及其所設置的 pointer-events CSS 屬性) 只會阻止 pointer 的交互作用 (mouse, stylus, touch)。預設下帶有 .pe-none 的連結以及控制元件仍可以被鍵盤使用者聚焦、啟動。為了確保即使對於鍵盤用戶，它們也完全被消除互動，你需要添加額外的屬性如 tabindex="-1" (避免它們取得鍵盤用戶的聚焦) 以及 aria-disabled="true" (以向輔助技術傳達這些元件被有效的禁用)，並可能需要使用 JavaScript 以完全避免這些元件被啟用。

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

對於表單控制元件，添加 disabled HTML 屬性。

對於連結，移除 href 屬性，使其成為非交互式的錨點或是 placeholder 連結。

Sass

Utilities API

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

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