Bootstrap 3中的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;
}

是重要的还是我可以删除它?工作正常,没有。

重要的是,请勿删除它。

您应该始终将屏幕阅读器用于辅助功能。使用该类无论如何都会隐藏该元素,因此您不应看到视觉上的差异。

如果您有兴趣阅读有关可访问性的信息:

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

Bootstrap中.row的作用是什么?

Bootstrap中的offset是什么意思?

spring boot中的bootstrap yaml是什么

Bootstrap 4中的Bootstrap 3'btn-default'类的等效项是什么?

Bootstrap 3.x中使用的.map文件是什么?

Bootstrap 4.1中的bd-highlight是什么?

Bootstrap中单个元素表单组的目的是什么?

Bootstrap 4中的class =“ mb-0”是什么?

Bootstrap 4中的'.well'等价类是什么

Bootstrap中的阶段和块类是什么?

在Bootstrap 4.3.1中覆盖_variables的正确方法是什么?

Bootstrap在angular js教程中是什么意思?

vtiger crm 7中的bootstrap vtlib脚本是什么?

此类在bootstrap中的含义是什么:text-left-not-xs?

bootstrap 5 中的等效 zf-each-breakpoint 是什么?

client.dns.lookup选项中的“ use_all_dns_ips”和“ resolve_canonical_bootstrap_servers_only”之间的确切区别是什么?

Bootstrap是什么意思?

--only = dev在package.json中是什么意思?

在bootstrap中,改变表单中class =“ form-group”的高度的可接受方法是什么?

Bootstrap3:将navbar-collapse div更改为全屏菜单的正确方法是什么?

在Vue CLI 3项目中使用自定义Bootstrap SASS的步骤是什么?

在React / Bootstrap 4中,禁用按钮以防止重复提交表单的正确方法是什么?

Bootstrap中“ row”类的含义是什么,它与容器的区别,以及它如何与col-***-*堆叠?

在Bootstrap 4中添加多个类的正确方法是什么?

在bootstrap中增加侧面填充物的最佳实践是什么?

用父容器.container删除嵌套Bootstrap .col中的填充的最佳实践是什么?

什么可以替代Bootstrap 3中的导航列表?

我bootstrap @ next的npm是什么?

让 bootstrap 4 工作的正确方法是什么