跳到主要内容

交互工具

控制用户与元素交互的行为,包括文本选择、指针事件和光标样式。

文本选择

控制用户是否可以选择元素内的文本:

类名效果
.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-autoauto浏览器默认
.cursor-pointerpointer可点击元素
.cursor-waitwait加载状态
.cursor-texttext文本输入区域
.cursor-movemove可拖拽元素
.cursor-not-allowednot-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 属性。


本网站使用 Cookie 来提升您的浏览体验。隐私政策