Bootstrap チートシート

RTLチートシート

コンテンツ

文字の体裁

解説

表示見出し 1

表示見出し 2

表示見出し 3

表示見出し 4

表示見出し 5

表示見出し 6

見出し 1

見出し 2

見出し 3

見出し 4

見出し 5

見出し 6

これがリード文の字体です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

テキストをハイライトで表示する。

削除されたテキスト。

取り消されたテキスト。

挿入されたテキスト。

強調されたテキスト。

小さめの文字のテキスト。

太めの文字のテキスト。

Italic体のテキスト。

引用文です。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

文章の引用元の明示
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
  • アイテム5
    • 子アイテム1
    • 子アイテム2
    • 子アイテム3
    • 子アイテム4
  • アイテム6
  • アイテム7
  • アイテム8
  • 横並びアイテム1
  • 横並びアイテム2
  • 横並びアイテム3

イメージ

解説
Placeholderレスポンシブ・イメージ
古いインスタントカメラで撮影した写真に似た、白い境界線が付いた一般的な正方形のプレースホルダー画像200x200

テーブル

解説
# ファースト ラスト ハンドルネーム
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# ファースト ラスト ハンドルネーム
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
クラス名 見出し 見出し
Default テーブルのセル テーブルのセル
Primary テーブルのセル テーブルのセル
Secondary テーブルのセル テーブルのセル
Success テーブルのセル テーブルのセル
Danger テーブルのセル テーブルのセル
Warning テーブルのセル テーブルのセル
Info テーブルのセル テーブルのセル
Light テーブルのセル テーブルのセル
Dark テーブルのセル テーブルのセル
# ファースト ラスト ハンドルネーム
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

図表

解説
Placeholder400x300
上の画像のキャプション

フォーム

概要

解説
あなたのメールを他の人と共有することは決してありません。
ラジオボタン

無効のフォーム

解説
無効のラジオボタン

サイズ

解説

インプットグループ

解説
@
@example.com
https://example.com/users/
$ .00
textarea付き

フローティングラベル

解説

入力検証

解説
入力完了!
入力完了!
@
ユーザー名を入力してください
有効な市を入力してください
有効な州を選択してください
有効な郵便番号を入力してください
送信する前に同意する必要があります。

コンポーネント

アコーディオン

解説

これが最初のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を上書きして、これらのいずれかが変更可能。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが .accordion-body 内に入る可能性があることにも注意。

これは2番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を上書きして、これらのいずれかが変更可能。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが .accordion-body 内に入る可能性があることにも注意。

これは3番目のアイテムのアコーディオン本体。折り畳みプラグインが各要素のスタイル設定に使用する適切なクラスを追加するまで、デフォルトでは非表示になっている。これらのクラスは、CSSトランジションを経由した表示と非表示だけでなく、全体的な外観を制御。カスタムCSSを使用するか、デフォルトの変数を上書きして、これらのいずれかが変更可能。遷移によってオーバーフローが制限されるが、ほぼすべてのHTMLが .accordion-body 内に入る可能性があることにも注意。

アラート

解説

バッジ

解説

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New

見出しの例 New

Primary Secondary Success Danger Warning Info Light Dark

ボタン

解説

ボタングループ

解説

カード

解説
Placeholderカードの画像
カードのタイトル

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なサンプルテキスト。

進む
特徴
カードのタイトル

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なサンプルテキスト。

進む
カードのタイトル

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なサンプルテキスト。

  • アイテム1
  • アイテム2
  • アイテム3
Placeholder画像
カードのタイトル

これは、追加コンテンツへの自然な導入として、以下のサポートテキストを含む幅の広いカード。このコンテンツは少し長くなっている 。

最終更新:3分前

リストグループ

解説
  • アクティブアイテム
  • 無効のアイテム
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム1
  • アイテム2
  • アイテム3
  • アイテム4
  • アイテム5

ポップオーバー

解説

プログレスバー

解説
0%
25%
50%
75%
100%

スクロールスパイ

解説

第1の見出し

ゆっくり下へスクロールしてみて下さい。

これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示されることに注意。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを追加し続ける。

第2の見出し

スクロールの一番上が第2の見出しになると上部のナビゲーションバーの第2の見出しの部分がアクティブに変わります。

これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示されることに注意。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを追加し続ける。

第3の見出し

スクロールの一番上が第3の見出しになると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューの第3の見出しの部分がアクティブになります。

これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示されることに注意。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを追加し続ける。

第4の見出し

スクロールの一番上が第4の見出しになると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューの第4の見出しの部分がアクティブになります。

これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示されることに注意。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを追加し続ける。

第5の見出し

スクロールの一番上が第5の見出しになると上部のナビゲーションバーのアクティブの部分がドロップダウンに変わり、ドロップメニューの第5の見出しの部分がアクティブになります。

これは、スクロールスパイページのプレースホルダーコンテンツ。ページを下にスクロールすると、適切なナビゲーションリンクが強調表示されることに注意。これは、コンポーネントの実例全体で繰り返される。スクロールとハイライトを強調するために、ここにいくつかのサンプルコピーを追加し続ける。

スピナー

解説
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

トースト

解説

ツールチップ

解説

閉じる