ブートストラップCSSヘルパークラスリファレンス
文章
以下のクラスでテキストの色を使って意味を追加します。リンクはホバーすると暗くなります：
| Class | Description | Example |
|---|---|---|
| .text-muted | Text styled with class "text-muted" | |
| .text-primary | Text styled with class "text-primary" | |
| .text-success | Text styled with class "text-success" | |
| .text-info | Text styled with class "text-info" | |
| .text-warning | Text styled with class "text-warning" | |
| .text-danger | Text styled with class "text-danger" |
バックグラウンド
以下のクラスで背景色を介して意味を追加します。リンクは、テキストクラスと同じように、ホバーすると暗くなります。
| Class | Description | Example |
|---|---|---|
| .bg-primary | Table cell is styled with class "bg-primary" | |
| .bg-success | Table cell is styled with class "bg-success" | |
| .bg-info | Table cell is styled with class "bg-info" | |
| .bg-warning | Table cell is styled with class "bg-warning" | |
| .bg-danger | Table cell is styled with class "bg-danger" |
他の
| Class | Description | Example |
|---|---|---|
| .pull-left | Floats an element to the left | |
| .pull-right | Floats an element to the right | |
| .center-block | Sets an element to display:block with margin-right:auto and margin-left:auto | |
| .clearfix | Clears floats | |
| .show | Forces an element to be shown (display:block) | |
| .hidden | Forces an element to be hidden (display:none) | |
| .invisible | Forces an element to be invisible (visibility:hidden). Will take up space on page even though it is invisible | |
| .sr-only | Hides an element to all devices except screen readers | |
| .sr-only-focusable | Combine with .sr-only to show the element again when it is focused (e.g. by a keyboard-only user) | |
| .text-hide | Helps replace an element's text content with a background image | |
| .close | Indicates a close icon | |
| .caret | Indicates dropdown functionality (will reverse automatically in dropup menus) |
レスポンシブユーティリティ
これらのクラスは、メディアクエリを介してデバイスごとにコンテンツを表示および/または非表示にするために使用されます。
ビューポートブレークポイント間でコンテンツを切り替えるには、使用可能なクラスの1つまたは組み合わせを使用します。
| クラス | 超小型デバイス 電話（<768px） | 小型デバイス タブレット（≥768px） | 中型デバイス デスクトップ（992px以上） | 大型デバイス デスクトップ（≥1200px） |
|---|---|---|---|---|
| .visible-xs- * | 見える | 隠れた | 隠れた | 隠れた |
| .visible-sm- * | 隠れた | 見える | 隠れた | 隠れた |
| .visible-md- * | 隠れた | 隠れた | 見える | 隠れた |
| .visible-lg- * | 隠れた | 隠れた | 隠れた | 見える |
| .hidden-xs | 隠れた | 見える | 見える | 見える |
| .hidden-sm | 見える | 隠れた | 見える | 見える |
| .hidden-md | 見える | 見える | 隠れた | 見える |
| .hidden-lg | 見える | 見える | 見える | 隠れた |
隠れた
画面サイズに応じて要素を非表示にします。
例
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>
結果：
Example
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.
v3.2.0以降、のクラスには3つのバリエーションがあり、CSS
プロパティ値.visible-*-*ごとに1つずつあります。display
| クラスのグループ | CSSディスプレイ |
|---|---|
| 目に見える-*-ブロック | 表示ブロック; |
| .visible-*-インライン | 表示：インライン; |
| .visible-*-inline-block | 表示：インラインブロック; |
たとえば、小さい（sm）画面の場合、使用可能な.visible-*-*クラスは.visible-sm-block、、、.visible-sm-inlineおよび.visible-sm-inline-blockです。
クラス.visible-xs、、、およびは.visible-sm、v3.2.0で非推奨になりました。.visible-md.visible-lg
例
<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: