Bootstrap の概要
Bootstrap は、ナビゲーション、フォーム、ボタン のような既に作成された CSS や共通要素の JavaScript コンポーネントをつかった Web インターフェイスを設計するのに役立つフロントエンドのフレームワークです。 また、携帯電話やタブレットなど、さまざまな画面サイズのデバイスに合わせてサイトを調整する レスポンシブ グリッド レイアウト システム も備えています。 Bootstrap レイアウト システムを使用して、顧客が使用する可能性のある任意のデバイスで良く見える単一のサイトを作成できます。
Power Pages テンプレートは、最小限のカスタム スタイルを持つ標準の Bootstrap コンポーネントを使用します。 これらのテンプレートを使用すると、サイト全体で一貫してブランドや好みに合わせてテーマ (フォント、色など) を簡単に変更できます。
Power Pages は、Bootstrap バージョン 3.3.6 と Bootstrap バージョン 5 をサポートします。 Bootstrap バージョン 5 では、改善されたユーザー エクスペリエンス (UX) 機能と、アコーディオン、オフキャンバス、RTL サポートなどの新しいコンポーネントが提供されます。
新しい Power Pages サイトの場合は、環境に Bootstrap バージョン5 を設定する必要があります。 既存の Bootstrap バージョン 3 Web サイトをバージョン 5 に移行することもできます。
ブートストラップのカスタマイズ
任意またはすべての変数をカスタム値として設定し、これらの値に基づいてコンパイルされた Bootstrap のカスタマイズしたバージョンをダウンロードできます。
ブートストラップ変数の利点は、1 つの要素だけでなく、フレームワーク内のすべてのスタイルを定義できることです。 たとえば、変数 @font-size-base は、サイト上のテキスト (本文テキスト、見出し、その他すべてのテキスト要素) のデフォルトのサイズを指定します。 H1 見出しは、@font-size-base の 300 パーセントとして定義される場合があります。 この 1 つの変数を設定することにより、Website のすべての表記スケールを一貫性のある方法で制御します。
Bootstrap のカスタム バージョンを 公式 Bootstrap サイト を通じて作成することもできます、またはより簡単なインターフェイスや事前に設計されたテーマを提供するサードパーティ サイトを使用することもできます。 公式のブートストラップ カスタマイザー サイトには、ブートストラップのカスタマイズに関する詳細情報が記載されています。
Bootstrap のカスタマイズされたバージョンをダウンロードすると、次のディレクトリ構造が含まれます:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
使用したカスタマイズ アプリケーションによっては、ディレクトリの構造に bootstrap.min.css が含まれる場合があります。 これはカスタマイズが含まれるファイルです。 そのほかのファイルは、すべてのカスタムバージョンのブートストラップで同じであり、すでに Web サイトに含まれています。