文本选择
控制用户是否可以选择元素内的文本:
| 类名 | 效果 |
|---|
.user-select-all | 单击即可全选文本 |
.user-select-auto | 浏览器默认选择行为 |
.user-select-none | 禁止选择文本 |
<p class="user-select-all">点击此处自动全选文本</p>
<p class="user-select-none">此文本不可被选中</p>
指针事件
控制元素是否响应鼠标/触摸事件:
| 类名 | 效果 |
|---|
.pe-none | 元素不响应指针事件(点击穿透) |
.pe-auto | 元素正常响应指针事件 |
<a href="#" class="pe-none" tabindex="-1" aria-disabled="true">禁用链接</a>
<button class="btn btn-primary pe-none">禁用按钮(维持样式)</button>
光标样式
| 类名 | 光标 | 用途 |
|---|
.cursor-auto | auto | 浏览器默认 |
.cursor-pointer | pointer | 可点击元素 |
.cursor-wait | wait | 加载状态 |
.cursor-text | text | 文本输入区域 |
.cursor-move | move | 可拖拽元素 |
.cursor-not-allowed | not-allowed | 禁用状态 |
<span class="cursor-pointer text-primary">鼠标悬停变手型</span>
<span class="cursor-not-allowed text-secondary">禁用状态光标</span>
<span class="cursor-wait">等待状态光标</span>
组合使用
<button class="btn btn-secondary pe-none cursor-not-allowed">
<i class="bi-lock me-1"></i>禁用按钮
</button>
<div class="user-select-none cursor-pointer" onclick="alert('点击')">
可点击但不可选中的区域
</div>
.pe-none 会阻止所有点击事件,如果需要禁用样式但保留可点击性,请使用 disabled 属性。