テキスト
以下のクラスでテキストの色を介して意味を追加します。 ホバーに暗くなりリンク：
| クラス | 説明 | 例 |
|---|---|---|
| .text-muted | クラスとスタイル付きテキスト"text-muted" | それを試してみてください |
| .text-primary | クラスとスタイル付きテキスト"text-primary" | それを試してみてください |
| .text-success | クラスとスタイル付きテキスト"text-success" | それを試してみてください |
| .text-info | クラスでスタイルテキスト"text-info" | それを試してみてください |
| .text-warning | クラスでスタイルテキスト"text-warning" | それを試してみてください |
| .text-danger | クラスとスタイル付きテキスト"text-danger" | それを試してみてください |
バックグラウンド
以下のクラスと背景色を介して意味を追加します。 リンクは、テキストだけのクラスのようなホバーに暗くなります。
| クラス | 説明 | 例 |
|---|---|---|
| .bg-primary | テーブルセルは、クラスでスタイル設定され"bg-primary" | それを試してみてください |
| .bg-success | テーブルセルは、クラスでスタイル設定され"bg-success" | それを試してみてください |
| .bg-info | テーブルセルは、クラスでスタイル設定され"bg-info" | それを試してみてください |
| .bg-warning | テーブルセルは、クラスでスタイル設定され"bg-warning" | それを試してみてください |
| .bg-danger | テーブルセルは、クラスでスタイル設定され"bg-danger" | それを試してみてください |
他の
| クラス | 説明 | 例 |
|---|---|---|
| .pull-left | 左に要素を浮かびます | それを試してみてください |
| .pull-right | 右に要素フロート | それを試してみてください |
| .center-block | 要素を設定しdisplay:blockとmargin-right:autoとmargin-left:auto | それを試してみてください |
| .clearfix | フロートをクリアします | それを試してみてください |
| .show | 表示される要素を強制的に | それを試してみてください |
| .hidden | 非表示にするための要素を強制的に | それを試してみてください |
| .sr-only | スクリーンリーダーを除くすべてのデバイスに要素を非表示にします | それを試してみてください |
| .sr-only-focusable | それがフォーカスされるときに再び要素を表示する.SR-のみと結合（キーボードのみのユーザーによって） | それを試してみてください |
| .text-hide | 背景画像と要素のテキストコンテンツを交換するのに役立ちます | それを試してみてください |
| .close | 閉じるアイコンを表示します | それを試してみてください |
| .caret | （dropupメニューに自動的に逆になります）、ドロップダウン機能を示します | それを試してみてください |
レスポンシブユーティリティ
これらのクラスは、表示および/またはメディアクエリを介してデバイスによるコンテンツを非表示にするために使用されています。
全体でコンテンツを切り替えるための1つまたは利用可能なクラスの組み合わせを使用してviewportブレークポイント：
| クラス | 余分な小型デバイス電話（<768px） | 小型デバイスの錠（≥768px） | ミディアムデバイスデスクトップ（≥992px） | 大型機器デスクトップ（≥1200px） |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
以下のようにv3.2.0 、 .visible-*-*クラス3つのバリエーション、各CSSのための1つに来るためのdisplayプロパティの値：
| クラスのグループ | CSSの表示 |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
小（用などsm ）の画面は、利用可能な.visible-*-*クラスは次のとおりです。 .visible-sm-block 、 .visible-sm-inline 、および.visible-sm-inline-block 。
クラス.visible-xs 、 .visible-sm 、 .visible-md 、および.visible-lg V3.2.0のよう推奨されていません 。
例
<h2>Example</h2>
<p>Resize this page to see how the text below
changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA
SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a
SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a
MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a
LARGE screen.</h1>結果：
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
»それを自分で試してみてください