Bootstrap チートシート

RTL チートシート

コンテンツ

タイポグラフィ

ドキュメント

Display 1

Display 2

Display 3

Display 4

Display 5

Display 6

見出し 1

見出し 2

見出し 3

見出し 4

見出し 5

見出し 6

これは重要なパラグラフです。通常のパラフラフから独立しています。

マークタグを使ってテキストをハイライトできます。

この行は削除されたものとして扱われます。

この行はすでに不正確なものとして扱われます。

この行はドキュメントの補足として扱われます。

この行は下線が描画されます。

この行は細字になります。

この行は太字で描画されます。

この行は斜体で描画されます。

ブロック引用要素内のよく知られた引用です。

引用元のタイトルでの著名人
  • これはリストです。
  • 一切スタイル付けされていません。
  • 構造的にはそれでもリストです。
  • しかし、このスタイルは直後の子要素しか適用されません。
  • ネストされたリスト:
    • これはこのスタイルの影響を受けず
    • 行頭の記号が表示され
    • 適切な左方向へのマージンを持っています
  • これは時々役に立つかもしれません。
  • これはリストアイテムです。
  • これもそうです。
  • しかし、これらはインラインで表示されます。
Placeholderレスポンシブな画像
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera200x200

テーブル

ドキュメント
# 名前 ハンドルネーム
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
クラス ヘッダ ヘッダ
デフォルト セル セル
Primary セル セル
Secondary セル セル
Success セル セル
Danger セル セル
Warning セル セル
Info セル セル
Light セル セル
Dark セル セル
# 名前 ハンドルネーム
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Placeholder400x300
上の画像についてのキャプション。

Forms

このメールアドレスを他の人に公開することはありません。
ラジオボタン

無効なフォーム

ドキュメント
無効なラジオボタン

サイズ

ドキュメント

インプットグループ

ドキュメント
@
@example.com
https://example.com/users/
00 円
テキストエリア付き
良いですね!
良いですね!
@
ユーザーネームを入力してください。
市区町村を入力してください。
都道府県を選択してください。
有効な郵便番号を入力してください。
送信する前に同意する必要があります。

コンポーネント

アコーディオン

ドキュメント

これは1つ目のアコーディオンアイテムです。デフォルトでは見えておらず、コラプスプラグインが適切なクラスを付与することで見えるようになります。これらのクラスは、CSS 遷移と同様に見た目全体を制御しています。デフォルトの変数を上書きすることやカスタム CSS を用いることで自由に変更することができます。注目すべきは、.accordion-body 内部はどんな HTML でも構わない点です。遷移はオーバーフローを制限しないためです。

これは2つ目のアコーディオンアイテムです。デフォルトでは見えておらず、コラプスプラグインが適切なクラスを付与することで見えるようになります。これらのクラスは、CSS 遷移と同様に見た目全体を制御しています。デフォルトの変数を上書きすることやカスタム CSS を用いることで自由に変更することができます。注目すべきは、.accordion-body内部にはどんな HTML でも構わない点です。遷移はオーバーフローを制限しないためです。

これは3つ目のアコーディオンアイテムです。デフォルトでは見えておらず、コラプスプラグインが適切なクラスを付与することで見えるようになります。これらのクラスは、CSS 遷移と同様に見た目全体を制御しています。デフォルトの変数を上書きすることやカスタム CSS を用いることで自由に変更することができます。注目すべきは、.accordion-body内部にはどんな HTML でも構わない点です。遷移はオーバーフローを制限しないためです。

アラート

ドキュメント

バッジ

バッジ

サンプル見出し New

サンプル見出し New

サンプル見出し New

サンプル見出し New

サンプル見出し New

サンプル見出し New

サンプル見出し New

サンプル見出し New

Primary Secondary Success Danger Warning Info Light Dark

ボタン

ドキュメント

カード

ドキュメント
Placeholderキャプチャ画像
カードタイトル

カードのコンテンツになる適当なサンプルテキストです。

どこかへのリンク
注目
カードタイトル

カードのコンテンツになる適当なサンプルテキストです。

どこかへのリンク
カードタイトル

カードのコンテンツになる適当なサンプルテキストです。

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

これは下に自然に目を引く追加のテキストを持つ幅の広いカードです。このコンテンツは少し長くなっています。

3分前に最終更新

リストグループ

ドキュメント
  • 無効なアイテム
  • 2つ目のアイテム
  • 3つ目のアイテム
  • 4つ目のアイテム
  • 5つ目のアイテム
  • 1つ目のアイテム
  • 2つ目のアイテム
  • 3つ目のアイテム
  • 4つ目のアイテム
  • 5つ目のアイテム

ポップオーバー

ドキュメント

Scrollspy

ドキュメント

@fat

scrollspy サンプルのプレースホルダです。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

@mdo

scrollspy サンプルのプレースホルダです。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

scrollspy サンプルのプレースホルダです。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

scrollspy サンプルのプレースホルダです。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

scrollspy サンプルのプレースホルダです。吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。

そして追加のプレースホルダを置くこともできます。

スピナー

ドキュメント
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

トースト

ドキュメント

ツールチップ

ドキュメント