HTML5Boilerplate的.visuallyhidden的Bootstrap等效项

Question

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

// 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

您可以在您的超文本标记语言中(非语义的)或混合使用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;
}

Answer 2

井,

.text-hide {
    background-color: transparent;
    color: transparent;
    border: 0;
    font: 0/0 a;
    text-shadow: none;
}

编辑2013-11-25：在Bootstrap v3.0.1中(正如院长在下面的评论中正确地指出的)，.text-hide部分地做了你想要的事情。在此之前，Bootstrap v3的类名是.hide-text。

它最初是用于图像替换的，因此它保留了“display”属性不变。

有关此规则中所有属性的完整解释，请参阅https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757，就像用于CSS验证器的精彩0/0 a变通方法一样。

关于.hide-text类的进一步阅读：

https://github.com/twitter/bootstrap/issues/2362#issuecomment-4501223

Bootstrap中还有一个问题与您的问题相关：https://github.com/twitter/bootstrap/issues/6452