跳到主题内容 跳到文档导航栏

交互(Interactions)

实用程序类,用于更改用户与网站内容的交互方式。

在本页面

文本选择

更改用户与内容交互时选择内容的方式。

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>
The .pe-none类(以及它设置的 pointer-events CSS属性)只阻止与指针(鼠标、手写笔、触摸)的交互。默认情况下,带有 .pe-none的链接和控件对于键盘用户仍然是可聚焦和可操作的。为了确保即使是键盘用户也能完全禁用它们,您可能需要添加更多属性,如tabindex="-1"(防止它们接收键盘焦点)和aria-disabled="true"(向辅助技术传达它们被有效禁用的事实),并可能使用JavaScript来完全防止它们被禁用可采取行动。对于表单控件,请考虑改用disabled HTML属性。