学习 Bootstrap 5 之 Interactions

学习 Bootstrap 5 之 交互

• Interactions
• • 1. 网页文本选择 (Text selection)
  • • (1). 全部选中 class = "user-select-all
    • (2). 按词选中 class="user-select-auto" (默认)
    • (3). 不可选中 class="user-select-none"
  • 2. 鼠标指针事件 (Pointer events)
  • • 注意
    • 简单处理

Interactions

Bootstrap 5 官方文档
用户如何与网页内容交互

1. 网页文本选择 (Text selection)

(1). 全部选中 class = "user-select-all

(2). 按词选中 class=“user-select-auto” (默认)

(3). 不可选中 class=“user-select-none”

<p class="user-select-all">全部选中</p>
<p class="user-select-auto">按词选中</p>
<p class="user-select-none">不可选中</p>

2. 鼠标指针事件 (Pointer events)

Bootstrap 提供了 .pe-none 和 .pe-auto类来阻止或添加元素交互事件

  <p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">这个链接</a>不能被点击跳转</p>
  <p><a href="#" class="pe-auto">这个链接</a> 点击可以跳转 (默认方式)</p>
  <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">这个链接</a>不能被点击, 因为它的<code>pointer-events</code>属性继承自父元素<a href="#" class="pe-auto">这个链接</a>拥有<code>pe-auto</code>类, 所有可以点击跳转</p>

默认情况下, 超链接是可以点击的, 如果父类元素设置了不可点击属性, 则超链接是不可点击的

注意

  .pe-none类只能阻止鼠标、手写笔点击、触摸点击的交互, 默认情况下, 带有.pe-none类的链接和控件对键盘用户来说仍然是可聚焦的和可操作的, 为了确保对这些用户依然是不可交互的, 你需要添加更多的属性, 例如 tabindex="-1" (用来防止接收键盘焦点) 和 aria-disabled=“true” (用来方式使用辅助技术)

简单处理

1. 对于表单控件, 添加 disabled html属性
2. 对于超链接, 移除href属性