Bootstrap 提供了一系列的交互方式(Interactions),可改变使用者如何与网页内容互动的通用类。这些类可以改变用户与网页元素的互动方式,提升用户体验。本教程将介绍更改用户与内容交互时选择内容的方式和Pointer事件。
一、文本选择
更改用户与内容交互时选择内容的方式。请注意,Internet Explorer 和旧版 Edge 不支持alluser-select的值,因此,这两个浏览器都不支持 .user-select-all。
<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 the default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
<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 the default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
<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 the default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
通过更改$user-selects_variables中的 Sass 列表来自定义可用类
二、Pointer事件
Bootstrap提供.pe-none与.pe-auto类别,以移除、添加元素的互动性。链接可被点击是指能够发挥链接的作用,不同于文字可被点选是能被选择复制。
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pe-none" tabindex="-1" aria-disabled="true">这个连接不可被点击这个连接不可被点选</a> </p>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pe-auto">这个连接可以被点击(此为预设行为).</a>
<p class="pe-none"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" tabindex="-1" aria-disabled="true">这个连接无法被点击,因为其pointer-events属性继承自父层。</a> 。然而, <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pe-auto">这个连接具有pe-auto类别,因此可以被点击</a>。</p>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pe-none" tabindex="-1" aria-disabled="true">这个连接不可被点击这个连接不可被点选</a> </p>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pe-auto">这个连接可以被点击(此为预设行为).</a>
</p>
<p class="pe-none"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" tabindex="-1" aria-disabled="true">这个连接无法被点击,因为其pointer-events属性继承自父层。</a> 。然而, <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pe-auto">这个连接具有pe-auto类别,因此可以被点击</a>。</p>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pe-none" tabindex="-1" aria-disabled="true">这个连接不可被点击这个连接不可被点选</a> </p>
<p><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pe-auto">这个连接可以被点击(此为预设行为).</a>
</p>
<p class="pe-none"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" tabindex="-1" aria-disabled="true">这个连接无法被点击,因为其pointer-events属性继承自父层。</a> 。然而, <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="pe-auto">这个连接具有pe-auto类别,因此可以被点击</a>。</p>
注意:
- .pe-none类别(以及其所设置的pointer-events CSS属性)只会阻止pointer的交互作用(mouse,stylus,touch)。
- 预设下带有.pe-none的连接以及控制元件仍可以被键盘使用者聚焦、启动。为了确保即使对于键盘用户,它们也完全被消除互动,你需要添加额外的属性如tabindex=“-1”(避免它们取得键盘用户的聚焦)以及aria-disabled=“true”(以向辅助技术传达这些元件被有效的禁用),并可能需要使用JavaScript以完全避免这些元件被启用。
- 对于一些控制元素来说,请考虑改用disabled HTML属性。