カスタマイズの概要(Overview)
BootstrapをSass、グローバルオプションのボートロード、拡張カラーシステムなどでテーマ設定、カスタマイズ、拡張する方法を学習。
※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
概要(Overview)
Bootstrapをカスタマイズする方法は複数ある。最適な方法は、プロジェクト、構築ツールの複雑さ、使用しているBootstrapのバージョン、ブラウザのサポートなどによって異なる。
推奨される2つの方法は以下のとおり:
- ソースファイルの使用や拡張のため、パッケージマネージャー経由でBootstrapを使用できる。
- 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の変更などがある。独自のセキュリティポリシーを注意深く確認し、必要に応じて最善の方法を決めることを推奨。
ページ移動
ページがありません