• 文脈上の色付け
• 文脈上の背景
• 閉じるアイコン
• ▼記号
• クイック・フロート
• ブロックの中央寄せ
• clearfix
• コンテンツの表示・非表示
• スクリーンリーダーとキーボードナビゲーション
• 画像の入れ替え

文脈上の色付け

強調のための汎用クラスを使用して着色することで、何かしらの意図を伝達します。 これらはリンクに対しても適用され、デフォルトのリンクのスタイルのようにhover時にはやや暗い色になります。

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

特性のあるセレクトでの扱い
時折、別のセレクタの特性が原因で強調クラスを適用できない場合があります。 ただし、ほとんどの場合でクラス指定された<span>でテキストを囲むだけで回避することができます。

支援技術に対して意図を伝える
色を使用して意図を伝えるということは、視覚的な指示に限定されるため、 スクリーンリーダーのような支援技術を使用するユーザーにはその意図は伝わりません。 色で表現される意図を、コンテンツ自身からそれが明確に伝わるようにするか(色付けは、既にテキストやマークアップで提供されている意図を、より強固に示すためだけに使用されます)、 .sr-onlyクラスを使用した非表示テキストを使用して代わりに意図を含めるようにするなど、いずれかの対策を行ってください。

文脈上の背景

意図を付与するためにテキストを色付けするクラスと同様に、 要素の背景に意図的なクラスを容易に設定することができます。 アンカー(<a>)コンポーネントであれば、 テキストのクラスのようにhover時に少し暗い色になります。

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

特性のあるセレクトでの扱い
時折、別のセレクタの特性が原因で背景クラスを適用できない場合があります。 ただし、ほとんどの場合でクラス指定された<div>で要素を囲むだけで回避することができます。

支援技術に対して意図を伝える
テキストの色付けのクラスと同様に、その意図が純粋に説明されるものでは無いことに注意してください。

閉じるアイコン

モーダルやアラート(ウインドウ)等を閉じるのに使用される、一般的な閉じるアイコンとして使用されます。

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

▼記号

ドロップダウン機能を示す場合や方向を示すために使用されます。 デフォルトで、ドロップアップのメニューでは自動的に反転するので注意してください。

<span class="caret"></span>

クイック・フロート

クラスを使用して、要素を右または左にフロート(float)します。 特定の問題を避けるために、!importantが含まれます。 クラスは、mixinとして使用することも可能です。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// クラス
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// mixinを使用
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

navbarsに使用しないでください
汎用的なクラスを使用してnavbars内のコンポーネントを左右に寄せるには、 代わりに.navbar-leftまたは.navbar-rightを使用してください。 詳細については、navbarのドキュメントを参照してください。

ブロックの中央寄せ

要素にdisplay: blockとmarginを介した中央寄せを設定します。 mixinとクラスのどちらでも利用できます。

<div class="center-block">...</div>

// クラス
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// mixinとして使用
.element {
  .center-block();
}

clearfix

親要素へ.clearfixを追加することで、簡単にフロート(float)を解除(clear)できます。 Nicolas Gallagher氏によるmicro clearfixが利用されています。 mixinとして使用することも可能です。

<!-- クラスを使用 -->
<div class="clearfix">...</div>

// mixin自体
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// mixinを使用
.element {
  .clearfix();
}

コンテンツの表示・非表示

.showと.hiddenクラスを使用して、要素を表示または非表示(スクリーンリーダー用も含め)にします。 これらのクラスは、クイック・フロートのような特定なものとの衝突を避けるために!importantを使用します。 これらはブロック(レベル)要素での切り替えでのみ利用可能です。 mixinとして使用することも可能です。

.hideが利用可能ですが、常にスクリーンリーダーには作用せず、v3.0.1で非推奨となりました。 代わりに.hiddenまたは.sr-only を使用してください。

さらに、.invisibleは要素のvisibilityだけを切り替えるのに使用されます。 これはdisplayが変更されず、ドキュメントのフローに影響を受けたままになることを意味します。

<div class="show">...</div>
<div class="hidden">...</div>

// クラス
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// mixinを使用
.element {
  .show();
}
.another-element {
  .hidden();
}

スクリーンリーダーとキーボードナビゲーション

.sr-onlyが付けられると、スクリーンリーダーを除く全てのデバイスで要素を非表示にします。 フォーカスされた際(例えば、キーボードのみのユーザーによる操作)に再び要素を表示するには、 .sr-onlyに.sr-only-focusableを繋げます。 アクセシビリティのベストプラクティスに従う必要があります。 mixinとして使用することも可能です。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// mixinを使用
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

画像の入れ替え

.text-hideクラスまたはmixinは、 背景画像を持つ要素のテキストコンテンツを入れ替えるのに使用します。

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

 Back to top