Bootstrap 4のカスタマイズ パーマリンク to " Bootstrap 4のカスタマイズ"

基本的なカスタマイズ パーマリンク to "基本的なカスタマイズ"

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

JHipsterアプリケーションの外観をカスタマイズする最も簡単な方法は、 src/main/webapp/content/css/global.cssのCSSスタイルを上書きします。または、Sassオプションを選択した場合は、src/main/webapp/content/scss/global.scssファイルを上書きします。

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-variable.scssでプロパティの値を追加または変更します。

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