Bootstrap交互方式

2023-11-27 49

Bootstrap 提供了一系列的交互方式(Interactions),可改变使用者如何与网页内容互动的通用类。这些类可以改变用户与网页元素的互动方式,提升用户体验。本教程将介绍更改用户与内容交互时选择内容的方式和Pointer事件。

一、文本选择

更改用户与内容交互时选择内容的方式。请注意,Internet Explorer 和旧版 Edge 不支持alluser-select的值,因此,这两个浏览器都不支持 .user-select-all。

Bootstrap交互方式

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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类别,以移除、添加元素的互动性。链接可被点击是指能够发挥链接的作用,不同于文字可被点选是能被选择复制。

Bootstrap交互方式

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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属性。
  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
Bootstrap交互方式
上一篇: Bootstrap图片替换
Bootstrap交互方式
下一篇: Bootstrap溢出