メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

カスタマイズの概要(Overview)

BootstrapをSass、グローバルオプションのボートロード、拡張カラーシステムなどでテーマ設定、カスタマイズ、拡張する方法を学習。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目

概要(Overview)

Bootstrapをカスタマイズする方法は複数ある。最適な方法は、プロジェクト、構築ツールの複雑さ、使用しているBootstrapのバージョン、ブラウザのサポートなどによって異なる。

推奨される2つの方法は以下のとおり:

  1. ソースファイルの使用や拡張のため、パッケージマネージャー経由でBootstrapを使用できる。
  2. Bootstrapのコンパイル済配布ファイルやjsDelivrのCDNを使用して、Bootstrapのスタイルの追加や再定義ができる。

ここでは、すべてのパッケージマネージャーの使用方法について詳しく説明することはできないが、独自のSassコンパイラでBootstrapを使用するためのガイダンスを提供する。

配布ファイルを使用したい場合は、これらのファイルを含める方法とHTMLページの実例について、導入ページを確認して、そこから使用するレイアウト、コンポーネント、動作の解説を参照する。

Bootstrapに慣れてきたら、グローバルオプションの利用方法、カラーシステムの利用と変更、コンポーネントの構築方法、増え続けるCSSカスタムプロパティのリストの使用方法、Bootstrapで構築する際にコードを最適化する方法について、この項目を引き続き参照する。

CSPと組み込みSVG(CSPs and embedded SVGs)v5.0.0-beta2追加

いくつかのBootstrapコンポーネントには、CSSに埋め込まれたSVGが含まれており、ブラウザやデバイス間で一貫して簡単にコンポーネントのスタイルを設定できる。より厳密なCSP(コンテンツ・セキュリティ・ポリシー)構成を持つ組織向けに、組み込みSVGのすべての事例(すべて background-image を経由して適用)を文書化したため、オプションがより徹底的に確認できる。

コミュニティでの会話に基づき、独自のコードベースでこれに対処するためにいくつかのオプションには、URLをローカルでホストされているアセットの置換、画像を削除してインライン画像を使用(すべてのコンポーネントでは不可能)、CSPの変更などがある。独自のセキュリティポリシーを注意深く確認し、必要に応じて最善の方法を決めることを推奨。