Bootstrap チートシート

RTLチートシート

目次

タイポグラフィ

ドキュメント

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

これはリード段落です。通常の段落とは異なって目立ちます。

markタグを使用してテキストを強調表示できます。

このテキスト行は、削除されたテキストとして扱われます。

このテキスト行は、もはや正確ではないとして扱われます。

このテキスト行は、ドキュメントへの追加として扱われます。

このテキスト行は下線付きで表示されます。

このテキスト行は、細かい文字として扱われます。

この行は太字で表示されます。

この行は斜体で表示されます。


ブロッククォート要素に含まれる有名な引用。

Source Title の誰か
  • これはリストです。
  • 完全にスタイルが適用されていません。
  • 構造的には、まだリストです。
  • ただし、このスタイルは直下の子要素のみに適用されます。
  • ネストされたリスト
    • は、このスタイルの影響を受けません
    • は、まだ箇条書きを表示します
    • 適切な左マージンも持っています
  • 状況によっては、まだ役立つ場合があります。
  • これはリスト項目です。
  • そしてもう一つ。
  • しかし、それらはインラインで表示されます。
Placeholder Responsive image
A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera 200x200

テーブル

ドキュメント
# 先頭 末尾 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter
# 先頭 末尾 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter
クラス 見出し 見出し
デフォルト セル セル
プライマリ セル セル
セカンダリ セル セル
成功 セル セル
危険 セル セル
警告 セル セル
情報 セル セル
ライト セル セル
ダーク セル セル
# 先頭 末尾 ハンドル
1 マーク オットー @mdo
2 ジェイコブ ソーントン @fat
3 ラリー・ザ・バード @twitter

フォーム

あなたのメールアドレスを他の誰とも共有することはありません。
ラジオボタン

無効化されたフォーム

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

サイズ変更

ドキュメント

入力グループ

ドキュメント
@
@example.com
https://example.com/users/
$ .00
テキストエリア付き

バリデーション

ドキュメント
良さそうです!
良さそうです!
@
ユーザー名を選択してください。
有効な市区町村を入力してください。
有効な都道府県を選択してください。
有効な郵便番号を入力してください。
送信する前に同意する必要があります。

コンポーネント

アコーディオン

ドキュメント

これは最初の項目のアコーディオン本文です。 collapseプラグインが各要素のスタイルに使用される適切なクラスを追加するまで、デフォルトでは非表示になっています。これらのクラスは、全体的な外観と、CSSトランジションによる表示と非表示を制御します。カスタムCSSまたはデフォルト変数のオーバーライドを使用して、これらを変更できます。また、.accordion-body内にはほぼすべてのHTMLを使用できますが、トランジションはオーバーフローを制限することに注意してください。

これは2番目の項目のアコーディオン本文です。 collapseプラグインが各要素のスタイルに使用される適切なクラスを追加するまで、デフォルトでは非表示になっています。これらのクラスは、全体的な外観と、CSSトランジションによる表示と非表示を制御します。カスタムCSSまたはデフォルト変数のオーバーライドを使用して、これらを変更できます。また、.accordion-body内にはほぼすべてのHTMLを使用できますが、トランジションはオーバーフローを制限することに注意してください。

これは3番目の項目のアコーディオン本文です。 collapseプラグインが各要素のスタイルに使用される適切なクラスを追加するまで、デフォルトでは非表示になっています。これらのクラスは、全体的な外観と、CSSトランジションによる表示と非表示を制御します。カスタムCSSまたはデフォルト変数のオーバーライドを使用して、これらを変更できます。また、.accordion-body内にはほぼすべてのHTMLを使用できますが、トランジションはオーバーフローを制限することに注意してください。

アラート

ドキュメント

バッジ

ドキュメント

見出し例 新着

見出し例 新着

見出し例 新着

見出し例 新着

見出し例 新着

見出し例 新着

見出し例 新着

見出し例 新着

プライマリ セカンダリ 成功 危険 警告 情報 ライト ダーク

ボタン

ドキュメント

カード

ドキュメント
Placeholder Image cap
カードタイトル

カードタイトルを基に構築し、カードの内容の大部分を構成するいくつかの簡単な例テキスト。

どこかに移動
特集
カードタイトル

カードタイトルを基に構築し、カードの内容の大部分を構成するいくつかの簡単な例テキスト。

どこかに移動
カードタイトル

カードタイトルを基に構築し、カードの内容の大部分を構成するいくつかの簡単な例テキスト。

  • アイテム
  • 2番目のアイテム
  • 3番目のアイテム
Placeholder Image
カードタイトル

これは、追加のコンテンツへの自然な導入として、下に補足テキストが付いた幅の広いカードです。このコンテンツは少し長くなっています。

3分前に最終更新

リストグループ

ドキュメント
  • 無効な項目
  • 2番目のアイテム
  • 3番目のアイテム
  • 4番目の項目
  • そして5番目の項目
  • アイテム
  • 2番目のアイテム
  • 3番目のアイテム
  • 4番目の項目
  • そして5番目の項目

ポップオーバー

ドキュメント

スクロールスパイ

ドキュメント

最初の見出し

これは、スクロールスパイページのプレースホルダーコンテンツです。ページをスクロールダウンすると、適切なナビゲーションリンクが強調表示されます。コンポーネントの例全体で繰り返し使用されます。スクロールと強調表示を強調するために、さらに例となるコピーを追加し続けています。

2番目の見出し

これは、スクロールスパイページのプレースホルダーコンテンツです。ページをスクロールダウンすると、適切なナビゲーションリンクが強調表示されます。コンポーネントの例全体で繰り返し使用されます。スクロールと強調表示を強調するために、さらに例となるコピーを追加し続けています。

3番目の見出し

これは、スクロールスパイページのプレースホルダーコンテンツです。ページをスクロールダウンすると、適切なナビゲーションリンクが強調表示されます。コンポーネントの例全体で繰り返し使用されます。スクロールと強調表示を強調するために、さらに例となるコピーを追加し続けています。

4番目の見出し

これは、スクロールスパイページのプレースホルダーコンテンツです。ページをスクロールダウンすると、適切なナビゲーションリンクが強調表示されます。コンポーネントの例全体で繰り返し使用されます。スクロールと強調表示を強調するために、さらに例となるコピーを追加し続けています。

5番目の見出し

これは、スクロールスパイページのプレースホルダーコンテンツです。ページをスクロールダウンすると、適切なナビゲーションリンクが強調表示されます。コンポーネントの例全体で繰り返し使用されます。スクロールと強調表示を強調するために、さらに例となるコピーを追加し続けています。

スピナー

ドキュメント
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...
読み込み中...

トースト

ドキュメント

ツールチップ

ドキュメント