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%

スクロールスパイ

解説

@fat

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

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

@mdo

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

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

メニュー1

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

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

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

メニュー2

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

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

メニュー3

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

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

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

スピナー

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

トースト

解説

ツールチップ

解説

閉じる