Odpowiednik Bootstrap dla HTML5Tablica płyty.nieobsługiwana

Question

Czy istnieje odpowiednik Bootstrap na Twitterze w ukrytej klasie HTML5Boilerplate? Nonsemantical helper? Nie widzę czegoś podobnego w plikach CSS. Celem .visiblehidden klasy jest wizualnie ukryć, ale udostępnić tekst dla osób czytających screen. Czy istnieje inne podejście Bootstrappy do osiągnięcia tego samego celu?

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

Odnośne Bootstrap non-semantyczne klasy pomocnika nie osiągnąć ten sam efekt:

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

.invisible { 
    visibility: hidden; 
} 

Answer 1

Można użyć klasy Bootstrap .sr-only albo w kodzie HTML (nie- semantic) lub jako mixin. Oto definicja:

.sr-only { 
    position: absolute; 
    width: 1px; 
    height: 1px; 
    padding: 0; 
    margin: -1px; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    border: 0; 
} 

Answer 2

No

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

Edycja 25.11.2013: W Bootstrap v3.0.1 (jak powiedział prawidłowo Dean w swoim komentarzu poniżej) .text-hide robi częściowo to, co chcesz. Wcześniej niż do Bootstrap v3 nazwa klasy to .hide-text.
Jest to oryginalnie przeznaczone do zastępowania obrazu, dlatego pozostawia niezmienioną właściwość "wyświetlania".

Pełne wyjaśnienie wszystkich właściwości w tej regule, takie jak wspaniałe obejście walidatora CSS, można znaleźć w artykule https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757.

Jedno dodatkowe czytanie od klasy .hide-text:
https://github.com/twitter/bootstrap/issues/2362#issuecomment-4501223

Jest także problemem złożonym w Bootstrap z pytaniem: https://github.com/twitter/bootstrap/issues/6452