カスタマイズ
Sass、多数のグローバル オプション、広範なカラー システムなどを使用して Bootstrap をテーマ化、カスタマイズ、および拡張する方法を学びます。
概要
Bootstrap をカスタマイズするには、複数の方法があります。最適なパスは、プロジェクト、ビルド ツールの複雑さ、使用している Bootstrap のバージョン、ブラウザー サポートなどによって異なります。
推奨される 2 つの方法は次のとおりです。
- ソース ファイルを使用および拡張できるように、パッケージ マネージャー経由でBootstrapを使用します。
- Bootstrap のコンパイル済み配布ファイルまたはjsDelivrを使用して、Bootstrap のスタイルを追加またはオーバーライドできるようにします。
ここでは、すべてのパッケージ マネージャーの使用方法について詳しく説明することはできませんが、独自の Sass コンパイラで Bootstrap を使用するためのガイダンスを提供できます。
配布ファイルを使用する場合は、開始ページで、それらのファイルを含める方法と HTML の例を確認してください。そこから、使用したいレイアウト、コンポーネント、動作のドキュメントを参照してください。
Bootstrap に慣れてきたら、引き続きこのセクションを参照して、グローバル オプションの利用方法、カラー システムの利用と変更、コンポーネントの構築方法、増え続ける CSS カスタム プロパティのリストの使用方法、およびその方法の詳細を確認してください。 Bootstrap でビルドするときにコードを最適化します。
CSP と埋め込み SVG
いくつかの Bootstrap コンポーネントには、CSS に埋め込まれた SVG が含まれており、ブラウザーやデバイス間でコンポーネントを一貫して簡単にスタイル設定できます。より厳密なCSP構成を使用している組織の場合、埋め込み SVG のすべてのインスタンス (すべて を介して適用されますbackground-image) を文書化したので、オプションをより徹底的に確認できます。
- アコーディオン
- 閉じるボタン(アラートとモーダルで使用)
- フォームのチェックボックスとラジオ ボタン
- フォームスイッチ
- フォーム検証アイコン
- メニューを選択
- カルーセル コントロール
- Navbar トグル ボタン
コミュニティの会話に基づいて、独自のコードベースでこれに対処するためのいくつかのオプションには、URL をローカルでホストされているアセットに置き換える、画像を削除してインライン画像を使用する (すべてのコンポーネントで可能というわけではありません)、CSP を変更することが含まれます。独自のセキュリティ ポリシーを慎重に検討し、必要に応じて最適な方法を決定することをお勧めします。