9

是否有相当于 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;
}
4

2 回答 2

15

.sr-only您可以在 HTML（非语义）中或作为 mixin使用 Bootstrap 类。这是定义：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}
于 2013-10-12T23:39:05.940 回答
6

出色地，

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

编辑 2013-11-25：在 Bootstrap v3.0.1 中（正如 Dean 在下面的评论中正确指出的那样）.text-hide，您可以部分满足您的需求。在 Bootstrap v3 之前，类名是.hide-text.
它最初用于图像替换，因此它使“显示”属性保持不变。

有关此规则中所有属性的完整说明，请参阅https://github.com/h5bp/html5-boilerplate/commit/aa0396eae7570/0 a ，例如CSS 验证器的绝妙解决方法。

关于课程的进一步阅读.hide-text：
https ://github.com/twitter/bootstrap/issues/2362#issuecomment-4501223

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

于 2013-02-15T09:52:28.313 回答