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>

Pointer事件

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-eventsCSS属性)仅阻止与指针(鼠标、手写笔、触摸)的交互。默认情况下，带有.pe-none的链接和控件对于键盘用户来说仍然是可聚焦和可操作的。为了确保它们甚至对键盘用户来说都是完全无效的，您可能需要添加更多的属性，如tabindex=-1(以防止它们接收键盘焦点)和`aria-disabled=`true(传达它们被辅助技术有效禁用的事实)，并可能使用JavaScript来完全防止它们被操作。

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

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

CSS

Sass utilities API

Interaction utilities 在我们的utilities API中声明在 scss/_utilities.scss。了解如何使用 utilities API。

scss/_utilities.scss

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