只在Bootstrap 3中？
什么是类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辅助功能文档
正如JoshC所说，该类用于隐藏用于屏幕阅读器的信息。 但是，不仅要隐藏标签，您可能会考虑隐藏有远见的用户的内部链接“跳到主要内容”，如果您有复杂的导航或在内容之前添加了页眉，盲人用户可能需要这样做。 他们需要多次按下箭头键才能通过屏幕阅读器访问。
如果您希望您的网站与屏幕阅读器进行更多互动，请使用W3C标准化的ARIA属性，我绝对建议您访问Google在线课程，该课程最多只需1-2小时，或者至少可以观看Google的40分钟视频。
据世界卫生组织报告，2.85亿人有视力障碍。 所以建立一个可访问的网站很重要。
我在navbar的例子中发现了这个，并简化了它。
<ul class="nav">
<li><a>Default</a></li>
<li><a>Static top</a></li>
<li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>
你会看到哪一个被选中（ sr-only部分被隐藏）：
如果您使用屏幕阅读器，您会听到选择了哪一个：
作为这种技术的结果，盲人应该在您的网站上轻松浏览。
链接地址: http://www.djcxy.com/p/13249.html上一篇: only in Bootstrap 3?