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 这个样式类非常重要,我们不能删除它。
版权声明:本作品系原创,版权归码友网所有,如未经许可,禁止任何形式转载,违者必究。
发表评论
登录用户才能发表评论, 请 登 录 或者 注册