9

HTML5Boilerplateの.visuallyhidden非セマンティックヘルパークラスに相当するTwitterBootstrapはありますか？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;
}

関連するBootstrapの非セマンティックヘルパークラスは、同じ効果を達成しません。

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

.invisible {
    visibility: hidden;
}
4

2 に答える 2

15

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;
}
于 2013-10-12T23:39:05.940 に答える
6

上手、

.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」プロパティは変更されません。

CSSバリデーターのすばらしい回避策など、このルールのすべてのプロパティの完全な説明については、https：//github.com/h5bp/html5-boilerplate/commit/aa0396eae757を参照してください。0/0 a

.hide-textクラスに関するもう1つの読み物：
https ：//github.com/twitter/bootstrap/issues/2362#issuecomment-4501223

あなたの質問でBootstrapに提出された問題もあります： https ：//github.com/twitter/bootstrap/issues/6452

于 2013-02-15T09:52:28.313 に答える