1. 简介
在网页设计中，光标的样式对用户交互和页面体验起到了重要的作用。CSS提供了一种通过修改光标样式的方式，以使其更符合页面的设计和要求。在本文中，我们将探讨在禁用状态下如何修改光标样式，以及如何在Bootstrap 4中修改光标样式。
2. 禁用状态下修改光标样式
2.1 使用CSS伪类选择器
在禁用状态下，我们可以使用CSS伪类选择器来修改光标样式。常用的伪类选择器有:disabled、:hover和:focus等。
input:disabled {
cursor: not-allowed;
}
在上面的代码中，我们使用:disabled伪类选择器来选中所有禁用状态的输入框，并设置光标样式为not-allowed，即表示不允许操作。
需要注意的是，伪类选择器只能选中部分特定状态的元素，不能修改整个页面的光标样式。如果需要修改整个页面的光标样式，可以通过修改body元素的样式来实现。
2.2 使用JavaScript
除了使用CSS伪类选择器，我们还可以使用JavaScript来修改禁用状态下的光标样式。
var inputs = document.querySelectorAll('input:disabled');
for (var i = 0; i < inputs.length; i++) {
inputs[i].style.cursor = 'not-allowed';
}
在上面的代码中，我们首先使用document.querySelectorAll方法选中所有禁用状态的输入框，然后使用style.cursor属性来修改其光标样式。
3. 在Bootstrap 4中修改光标样式
Bootstrap 4是一个流行的CSS框架，它提供了一系列样式和组件，可以快速构建响应式网页。在Bootstrap 4中，我们可以使用cursor类来修改光标样式。
3.1 使用内置的光标类
Bootstrap 4提供了一些内置的光标类，可以直接应用到元素上。
<div class="cursor-pointer">This is a div with pointer cursor</div>
<a href="#" class="cursor-not-allowed">This is a link with not-allowed cursor</a>
在上面的代码中，我们分别使用cursor-pointer和cursor-not-allowed类来修改元素的光标样式。
3.2 自定义光标样式
除了使用内置的光标类，我们还可以通过自定义样式来修改光标样式。
.custom-cursor {
cursor: url('custom-cursor.png'), auto;
}
在上面的代码中，我们定义了一个.custom-cursor类，并使用url属性来设置自定义的光标样式。其中，'custom-cursor.png'是一个自定义的光标图片。
4. 总结
在本文中，我们学习了如何在禁用或Bootstrap 4中修改光标样式。在禁用状态下，我们可以使用CSS伪类选择器或JavaScript来修改光标样式。而在Bootstrap 4中，我们可以直接使用内置的光标类来修改光标样式，或者通过自定义样式来实现。
通过修改光标样式，我们能够提升用户交互和页面体验，使页面更加符合设计和要求。