Bootstrap チートシート

LTR データテーブル

コンテンツ

テキスト

使用方法

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

見出し1

見出し2

見出し3

見出し4

見出し5

見出し6

これは、他のマークアップから目立たせるように設計された、独特のマークアップです。

mark 要素を使用して、テキストを選択できます。

この行は削除されたテキストとして扱う必要があります。

この行は、もはや正確ではないものとして扱う必要があります。

この行は、ドキュメントに追加されたものとして扱う必要があります。

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

この行は小さな詳細を含むものとして扱う必要があります。

この行は太字のテキストを含みます。

この行はイタリック体のテキストを含みます。


blockquote 要素内に配置された、魅力的な引用

有名な人物 in ソースのタイトル
  • これは項目リストです。
  • 見た目としてはそうではないように設計されていますが。
  • バックエンドではリストとして処理されます。
  • このスタイルはトップレベルリストのみに適用されます。
  • ネストされたリスト
    • このスタイルの影響を受けません。
    • これらは箇条書きされます。
    • 隣に余白があります。
  • このスタイルは場合によっては便利です。
  • これはリスト内のアイテムです。
  • これもそうです。
  • しかし、隣り合って表示されます。

画像

使用方法
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
クラス 見出し 見出し
デフォルト セル セル
プライマリ セル セル
セカンダリ セル セル
成功 セル セル
危険 セル セル
警告 セル セル
情報 セル セル
ライト セル セル
ダーク セル セル
# ハンドルネーム
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

フォーム

使用方法
Placeholder 400x300
上記の画像の説明。

フォーム

概要

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

無効化されたフィールド

使用方法
無効なラジオボタン

サイズ

使用方法

入力グループ

使用方法
私の名前は
その他
https://example.com/users/
.00 $
textarea付き

フローティングラベル付きフィールド

使用方法

バリデーション

使用方法
有効です!
有効です!
@
ユーザー名を選択してください。
有効な市区町村を入力してください。
有効な都道府県を選択してください。
有効な郵便番号を入力してください。
フォームを送信する前に同意する必要があります。

項目

アコーディオン

使用方法

これはアコーディオン項目1の内容です。Bootstrapが各アコーディオン項目に適切なクラスを追加するまで、コンテンツはデフォルトで非表示になります。これらのクラスはスタイルを制御し、CSSトランジションを使用してアコーディオンセクションの表示と非表示を切り替えます。これらのCSSクラスをカスタマイズしたり、Bootstrapのデフォルト値を変更したりすることで、これらの動作を変更できます。任意のHTMLをここに配置できますが、トランジションによってoverflowが制限される場合があります。

これはアコーディオン項目2の内容です。Bootstrapが各アコーディオン項目に適切なクラスを追加するまで、コンテンツはデフォルトで非表示になります。これらのクラスはスタイルを制御し、CSSトランジションを使用してアコーディオンセクションの表示と非表示を切り替えます。これらのCSSクラスをカスタマイズしたり、Bootstrapのデフォルト値を変更したりすることで、これらの動作を変更できます。任意のHTMLをここに配置できますが、トランジションによってoverflowが制限される場合があります。

これはアコーディオン項目3の内容です。Bootstrapが各アコーディオン項目に適切なクラスを追加するまで、コンテンツはデフォルトで非表示になります。これらのクラスはスタイルを制御し、CSSトランジションを使用してアコーディオンセクションの表示と非表示を切り替えます。これらのCSSクラスをカスタマイズしたり、Bootstrapのデフォルト値を変更したりすることで、これらの動作を変更できます。任意のHTMLをここに配置できますが、トランジションによってoverflowが制限される場合があります。

アラート

使用方法

バッジ

使用方法

見出しの例 新規

見出しの例 新規

見出しの例 新規

見出しの例 新規

見出しの例 新規

見出しの例 新規

見出しの例 新規

見出しの例 新規

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

ボタン

使用方法

カード

使用方法
Placeholder غطاء الصورة
カードの見出し

カードの見出しを補完し、カードコンテンツの大部分を形成する、いくつかのクイックテキストの例。

どこかに移動
特徴
カードの見出し

カードの見出しを補完し、カードコンテンツの大部分を形成する、いくつかのクイックテキストの例。

どこかに移動
カードの見出し

カードの見出しを補完し、カードコンテンツの大部分を形成する、いくつかのクイックテキストの例。

  • アイテム
  • 別のアイテム
  • 3番目のアイテム
Placeholder صورة
カードの見出し

追加のコンテンツのための自然な紹介として、サポートテキストを下にした、より広いカードです。このコンテンツは少し長くなっています。

3分前に更新

リストグループ

使用方法
  • 無効なアイテム
  • 2番目のアイテム
  • 3番目のアイテム
  • 4番目のアイテム
  • そして5番目のアイテム
  • アイテム
  • 2番目のアイテム
  • 3番目のアイテム
  • 4番目のアイテム
  • そして5番目のアイテム

ポップオーバー

使用方法

タブ

使用方法

@fat

タブの動作を示すコンテンツ。簡単に言うと、タブは複数のセクションを持つ長い記事であり、これらのサブセクションへのアクセスを容易にするナビゲーションバーがあります。

@mdo

エアコンの採算性を改善するかどうかとは別に、エネルギー需要は増加します。前述のMITの記事によると、見過ごせない点があります。それは、この需要が現在のエネルギー供給システムにどのような圧力をかけるかということです。ピーク時の電力需要を満たすために、すべての電力網を再構築し、拡張する必要があります。暑さが厳しいと、人々は屋内に留まり、エアコンをさらに稼働させる傾向があり、他のさまざまな機器や機器を使用します。

一つ

これらの機器の同時使用は、前述のように、電力網に圧力をかけます。しかし、単に電力網の容量を増やすだけでは不十分です。センサ、監視システム、ソフトウェアを使用して、建物がいつ占有されているか、いつエネルギーが必要か、いつ暑さが少なくなり人が外に出かけて電力消費が減少するかを特定する、スマートグリッドの開発が必要です。

二つ

残念ながら、これらの革新的な解決策はすべて高価であり、そのため一部の民間企業や節約志向の市民にとって非現実的です。環境意識の高い一部の人々は、エネルギー消費の削減に努めており、エネルギー効率が高く環境に優しいエアコンの重要性を認識しています。しかし、多くの組織は、法的インセンティブがない限り、気候変動対策やエネルギー浪費の抑制という動機だけで行動を起こすことはありません。気候変動に関心を寄せる政府は、適切な法律を制定する必要があります。規制、インセンティブ、支援を通じて、企業がオフィスでより効率的なソリューションを採用することを促進できます。

三つ

前述の緩和策の数と多様性から明らかなように、これらの課題に対処するために必要な技術は、私たちの手に届く範囲内にありますが、さらなる改善とより大きな投資が必要となる可能性があります!

特定のセクションに属さない追加コンテンツを含めることも可能です。

ツールチップ

使用方法
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…
ダウンロード中…

通知

使用方法

ヒント

使用方法