学习 Bootstrap 5 之 交互
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” (用来方式使用辅助技术)
简单处理
- 对于表单控件, 添加
disabledhtml属性 - 对于超链接, 移除
href属性
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/122810.html
