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

Bootstrap 作者: Rector 657阅读 0评论 0收藏 收藏本文 编辑

郑重申明:本文未经许可,禁止任何形式转载

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 这个样式类非常重要,我们不能删除它。

阅读了该文章的人还浏览了...

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

发布于: 2018-01-03 09:14:00
分享扩散: