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