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's documentation ,该类用于隐藏仅用于 screen readers 的信息来自渲染页面的布局。
Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.
这里是 example使用的样式:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
Is it important or can I remove it? Works fine without.
这很重要,不要删除它。
出于可访问性目的,您应该始终考虑使用屏幕阅读器。无论如何,类的使用都会隐藏元素,因此您不应该看到视觉差异。
如果您有兴趣阅读有关可访问性的内容:
Web Accessibility Initiative (WAI)
MDN Accessibility documentation
https://stackoverflow.com/questions/19758598/