Skip to main content Skip to docs navigation

カスタマイズ Customize

Sassを使用してBootstrapのテーマ設定、カスタマイズ、拡張を行う方法を学びます。グローバルオプション、拡張可能なカラーシステムなども利用できます。

概要

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

推奨する2つの方法は次のとおりです:

  1. パッケージマネージャー経由でBootstrapを使用して、ソースファイルを使用および拡張できるようにします。
  2. Bootstrapのコンパイル済み配布ファイルまたはjsDelivrを使用して、Bootstrapのスタイルに追加または上書きできるようにします。

すべてのパッケージマネージャーの使用方法の詳細については説明できませんが、独自のSassコンパイラでBootstrapを使用する方法についてのガイダンスを提供できます。

配布ファイルを使用したい場合は、はじめにページを確認して、これらのファイルを含める方法とHTMLページの例を確認してください。そこから、使用したいレイアウト、コンポーネント、動作についてのドキュメントを参照してください。

Bootstrapに慣れてきたら、このセクションを引き続き探索して、グローバルオプションの利用方法、カラーシステムの使用と変更方法、コンポーネントの構築方法、CSSカスタムプロパティの増加するリストの使用方法、Bootstrapでビルドする際のコードの最適化方法について詳しく学んでください。

CSPと埋め込みSVG

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

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