twitter-bootstrap Bootstrap 等效于 HTML5Boilerplate 的 .visuallyhidden
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14876754/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap equivalent of HTML5Boilerplate's .visuallyhidden
提问by Prembo
Is there a Twitter Bootstrap equivalent of HTML5Boilerplate's .visuallyhidden non-semantic helper class? I can't see anything similar in the CSS files. The purpose of the .visuallyhidden class is to visually hide it, but make the text available to screenreaders. Is there a different Bootstrappy approach to achieve the same goal?
是否有与 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;
}
The related Bootstrap non-semantic helper classes don't achieve the same effect:
相关的 Bootstrap 非语义辅助类没有达到相同的效果：
// Some of Twitter Bootstrap's non-semantic helper classes
.hide {
display: none;
}
.invisible {
visibility: hidden;
}
回答by Matt Ryan
You can use the Bootstrap class .sr-onlyeither in your HTML (non-semantic) or as a mixin. Here's the definition:
您可以.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;
}
回答by Volker E.
Well,
好，
.text-hide {
background-color: transparent;
color: transparent;
border: 0;
font: 0/0 a;
text-shadow: none;
}
Edit 2013-11-25:
In Bootstrap v3.0.1 (as Dean stated correctly in his comment below) .text-hidedoes partly what you want. Earlier than that up to Bootstrap v3 the class name was .hide-text.
It's originally meant for image-replacement, therefore it leaves the 'display' property unchanged.
编辑 2013-11-25：在 Bootstrap v3.0.1 中（正如 Dean 在下面的评论中正确指出的那样）.text-hide部分满足您的需求。在 Bootstrap v3 之前，类名是.hide-text.
它最初用于图像替换，因此它使 'display' 属性保持不变。
See https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757for a full explanation of all properties in this rule, like the wonderful 0/0 aworkaround for CSS validator.
有关此规则中所有属性的完整解释，请参阅https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757，例如0/0 aCSS 验证器的出色解决方法。
One further reading on the .hide-textclass:
https://github.com/twitter/bootstrap/issues/2362#issuecomment-4501223
关于该.hide-text课程的进一步阅读：https:
//github.com/twitter/bootstrap/issues/2362#issuecomment-4501223
There's also an issue filed in Bootstrap with your question: https://github.com/twitter/bootstrap/issues/6452
在 Bootstrap 中还有一个问题与您的问题有关：https: //github.com/twitter/bootstrap/issues/6452
