交互

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

本页目录

文本选择

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

当用户点击时，这段文字将被全部选中。

这一段具有默认的选择行为。

当用户点击时，这段文字将无法被选中。

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

此链接无法点击。

此链接可以被点击（这是默认行为）。

此链接无法点击，因为 pointer-events 属性是从其父项继承的。然而，这个链接有一个 pe-auto 类并且可以被点击。

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 工具 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,
),