互動(Interactions)
可改變使用者如何與網頁內容互動的通用類。
On this page
文字選擇
改變內容被提取的方式,在使用者與它互動時。
當使用者點選時,這個段落將會被全選。
這個段落具有預設的提取行為。
當使用者點選的時候,此段落將不會被提取
<p class="user-select-all">當使用者點選時,這個段落將會被全選。</p>
<p class="user-select-auto">這個段落具有預設的提取行為。</p>
<p class="user-select-none">當使用者點選的時候,此段落將不會被提取</p>
Pointer事件
Bootstrap提供.pe-none與.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">這個連接無法被點擊,因為其pointer-events屬性繼承自父層。</a> 。然而, <a href="#" class="pe-auto">這個連接具有pe-auto類別,因此可以被點擊</a>。</p>
.pe-none類別(以及其所設置的pointer-events CSS屬性)只會阻止pointer的交互作用(mouse,stylus,touch)。預設下帶有.pe-none的連接以及控制元件仍可以被鍵盤使用者聚焦、啟動。為了確保即使對于鍵盤用戶,它們也完全被消除互動,你需要添加額外的屬性如tabindex=“-1”(避免它們取得鍵盤用戶的聚焦)以及aria-disabled=“true”(以向輔助技術傳達這些元件被有效的禁用),并可能需要使用JavaScript以完全避免這些元件被啟用。對于一些控制元素來說,請考慮改用disabled HTML屬性。
Sass
Utilities API
Interaction utilities are declared in our utilities API in scss/_utilities.scss
.
"user-select": (
property: user-select,
values: all auto none
),
"pointer-events": (
property: pointer-events,
class: pe,
values: none auto,
),