引導程序相當於HTML5Boilerplate的.visuallyhidden

是否存在與HTML5Boilerplate的.visuallyhidden非語義助手類相當的Twitter Bootstrap？我在CSS文件中看不到任何類似的東西。 .visuallyhidden類的目的是爲了直觀地隱藏它，但讓文本可供屏幕閱讀器使用。是否有不同的Bootstrappy方法來實現相同的目標？引導程序相當於HTML5Boilerplate的.visuallyhidden

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

來源

2013-02-14 Prembo

您可以使用引導類.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; 
}

來源

2013-10-12 23:39:05

好，

.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/aa0396eae757以獲得對此規則中所有屬性的完整說明，如奇妙的用於CSS驗證程序的0/0 a解決方法。

其中關於.hide-text類進一步閱讀：
https://github.com/twitter/bootstrap/issues/2362#issuecomment-4501223

還有在引導提起你的問題一個問題： https://github.com/twitter/bootstrap/issues/6452

來源

2013-02-15 09:52:28

如果有必要將非語義類放到源代碼中，請考慮一下！ ;） – 2013-02-15 09:53:41

您好Volker，其實我使用Compass/SASS，所以我不會以非語義的方式使用它們。我將它們用作CSS（SASS）中各種元素的「mixins」。感謝您指出拉請求。我會等到它出現在我正在使用的指南針插件中。 – Prembo 2013-02-16 03:12:28

來自引導源的報價：擡頭！ v3僅以'.hide-text（）'啓動，但根據我們的mixin被重用爲具有相同名稱的類的模式，這並不成立。從v3.0.1開始，我們添加了'.text-hide（）'和不贊成的'.hide-text（）'。所以使用'.text-hide'。 – 2013-11-25 02:45:16

引導程序相當於HTML5Boilerplate的.visuallyhidden

回答

相關問題