互动

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

文本选择

🌐 Text selection

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

🌐 Change the way in which the content is selected when the user interacts with it.

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.

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>

指针事件

🌐 Pointer events

Bootstrap 提供 .pe-none 和 .pe-auto 类来防止或添加元素交互。

🌐 Bootstrap provides .pe-none and .pe-auto classes to prevent or add element interactions.

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.

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 来完全阻止其可操作性。

🌐 The .pe-none class (and the pointer-events CSS property it sets) only prevents interactions with a pointer (mouse, stylus, touch). Links and controls with .pe-none are, by default, still focusable and actionable for keyboard users. To ensure that they are completely neutralized even for keyboard users, you may need to add further attributes such as tabindex="-1" (to prevent them from receiving keyboard focus) and aria-disabled="true" (to convey the fact they are effectively disabled to assistive technologies), and possibly use JavaScript to completely prevent them from being actionable.

如果可能的话，更简单的解决方案是：

🌐 If possible, the simpler solution is:

对于表单控件，添加 disabled HTML 属性。
对于链接，移除 href 属性，使其成为非交互式锚点或占位链接。

CSS

Sass 工具 API

🌐 Sass utilities API

交互工具在我们的 scss/_utilities.scss 工具 API 中声明。了解如何使用工具 API。

🌐 Interaction utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

scss/_utilities.scss

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