css - Bootstrap 相当于 HTML5Boilerplate 的 .visuallyhidden

Question

是否有 HTML5Boilerplate 的 .visuallyhidden 非语义助手类的 Twitter Bootstrap 等价物？我在 CSS 文件中看不到任何类似的东西。 .visuallyhidden 类的目的是在视觉上隐藏它，但让屏幕阅读器可以看到文本。是否有不同的 Bootstrappy 方法来实现相同的目标？

// HTML5Boilerplate's non-semantic helper class
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}  

相关的 Bootstrap 非语义帮助类没有达到相同的效果:

// Some of Twitter Bootstrap's non-semantic helper classes
.hide {
    display: none;
}

.invisible {
    visibility: hidden;
}

Answer 1

您可以在您的 HTML(非语义)中或作为混合使用 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;
}