学习 Bootstrap 5 之 Interactions
2022/1/18 23:40:45
本文主要是介绍学习 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” (用来方式使用辅助技术)
简单处理
- 对于表单控件, 添加
disabled
html属性 - 对于超链接, 移除
href
属性
这篇关于学习 Bootstrap 5 之 Interactions的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升