首页 / Bootstrap / 正文

[Bootstrap]Bootstrap 3中的sr-only css 样式类是什么?

3138 发布于: 2018-01-03 读完约需4分钟

Bootstrap 3中的sr-only 样式类是什么?重要吗?不使用它可以吗?
比如有以下 Bootstrap 3 的HTML布局代码:

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>

回答这个问题之前,我们首先明确一个 sr-only 这个类是什么?
sr-only:全称是 screen reader only,意为:(仅供)屏幕阅读器。
通过Bootstrap 的官方文档可以知道,这个 class 主要用于增强屏幕阅读器的 accessbility(可访问性)。
以下是 .sr-only 的样式:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

从样式的定义以及上文书写的HTML代码来看,sr-only 这个样式类非常重要,我们不能删除它。

版权声明:本作品系原创,版权归码友网所有,如未经许可,禁止任何形式转载,违者必究。

上一篇: .NET[C#]泛型集合List<T>中如何按照泛型的某个属性排序,除了Linq你还能想什么哪些方式?

下一篇: .NET[C#]如何将一个枚举序列化成对应的字符串?

本文永久链接码友网 » [Bootstrap]Bootstrap 3中的sr-only css 样式类是什么?

分享扩散:

发表评论

登录用户才能发表评论, 请 登 录 或者 注册