Бутстрап-эквивалент HTML5Boilerplate .visuallyhidden

Question

Есть ли тестовый эквивалент Twitter-бутстрапов класса HTML5Boilerplate. Невидимый не семантический вспомогательный класс? Я не вижу ничего подобного в файлах CSS. Цель класса visvishidden - визуально скрыть его, но сделать текст доступным для чтения с экрана. Есть ли другой подход 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

Вы можете использовать класс Bootstrap .sr-only либо в вашем HTML (не семантический) или как смесь. Вот определение:

.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 для валидатора CSS 0/0 a.

Еще одно показание на .hide-text класса:
https://github.com/twitter/bootstrap/issues/2362#issuecomment-4501223

Там также вопрос подал в Bootstrap с вопросом: https://github.com/twitter/bootstrap/issues/6452