互动（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.

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>

指针事件

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.

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 来完全防止它们可操作。

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

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

CSS

Sass utilities API

交互实用程序在我们的实用程序 API 中声明，位于 scss/_utilities.scss 中。了解如何使用实用程序 API

scss/_utilities.scss

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