交互方式

改变用户与网站内容交互方式的实用工具类。

文本选择

当用户与内容交互时，改变选择内容的方式。

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.

<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 类来防止或添加元素交互。

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.

<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属性。