Bootstrapのカスタマイズ

基本的なカスタマイズ

tip

npm startを実行し、変更のフィードバックを即座に得ることをお忘れなく！

プロの技:npm startを実行して、変更のフィードバックをすぐに得ることを忘れないでください!

BootstrapもSassで記述されているため、Sassを使用することは、プレーンなCSSよりも簡単で、簡潔で、強力です。Bootstrapのテーマに関する公式ドキュメントを参照してください。

自分のscssファイルでBootstrapのパーシャルを使用したい場合は、以下のようにscssファイルの先頭にインポートしてください。たとえば、border-radius mixinを使用するには、次のように指定します。

@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins/border-radius";

メインのSassファイルではなく、部分的なファイルのみをインポートするようにしてください。そうしないと、重複したCSSが生成され、問題が発生する可能性があります。

色やborder-radiusなどのデフォルトのブートストラップ設定を変更するには、部分ファイルsrc/main/webapp/content/scss/_bootstrap-variables.scssでプロパティの値を追加または変更します。

Bootstrapの_variables.scssで定義されているすべての値は、ここで上書きできます。