类是做什么sr-only用的?重要还是我可以删除它?没有工作正常。
sr-only
这是我的例子:
<div class="btn-group"> <button type="button" class="btn btn-info btn-md">Departments</button> <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Sales</a></li> <li><a href="#">Technical</a></li> <li class="divider"></li> <li><a href="#">Show all</a></li> </ul> </div>
根据bootstrap 的文档,该类用于从渲染页面的布局中隐藏仅供 屏幕阅读器使用的信息。
如果您没有为每个输入添加标签,屏幕阅读器将无法处理您的表单。对于这些内联表单,您可以使用 .sr-only 类隐藏标签。
这是使用的示例样式:
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
重要还是我可以删除它?没有工作正常。
这很重要,不要删除它。
出于可访问性目的,您应该始终考虑使用屏幕阅读器。无论如何,类的使用都会隐藏元素,因此您不应该看到视觉差异。
如果您有兴趣阅读有关可访问性的信息:
无障碍网页倡议 (WAI)
MDN 可访问性文档