एचटीएमएल 5 बॉयलरप्लेट के बूटस्ट्रैप समकक्ष .visuallyhidden

Question

क्या कोई ट्विटर बूटस्ट्रैप एचटीएमएल 5 बॉयलरप्लेट के समतुल्य है। विज़िअलाइज्ड गैर-अर्थशास्त्री सहायक वर्ग? मैं सीएसएस फाइलों में कुछ भी नहीं देख सकता। .visuallyhidden कक्षा का उद्देश्य इसे दृष्टि से छिपाना है, लेकिन पाठ को स्क्रीनreaders को उपलब्ध कराएं। क्या एक ही लक्ष्य प्राप्त करने के लिए कोई अलग बूटस्ट्रैपी दृष्टिकोण है?

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

संबंधित बूटस्ट्रैप गैर अर्थ सहायक वर्गों को प्राप्त नहीं है एक ही प्रभाव:

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

.invisible { 
    visibility: hidden; 
} 

Answer 1

आप बूटस्ट्रैप वर्ग .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: में बूटस्ट्रैप v3.0.1 (जैसा कि डीन ने नीचे अपनी टिप्पणी में सही ढंग से कहा है) .text-hide आंशिक रूप से आप जो चाहते हैं वह करता है। इससे पहले बूटस्ट्रैप v3 तक कक्षा का नाम .hide-text था।
यह मूल रूप से छवि प्रतिस्थापन के लिए है, इसलिए यह 'प्रदर्शन' संपत्ति को अपरिवर्तित छोड़ देता है।

इस नियम में सभी गुणों के पूर्ण स्पष्टीकरण के लिए https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 देखें, जैसे अद्भुत 0/0 a सीएसएस सत्यापनकर्ता के लिए कामकाज।

एक .hide-text वर्ग पर आगे पढ़ने:
https://github.com/twitter/bootstrap/issues/2362#issuecomment-4501223

वहाँ भी एक मुद्दा अपने प्रश्न के साथ बूटस्ट्रैप में दायर किया गया है: https://github.com/twitter/bootstrap/issues/6452