自定义Bootstrap
来源: |
时间:2018-11-09
|
|

自定义Bootstrap 4

基本定制

专业提示:不要忘记运行npm startyarn start立即获得您的更改反馈!

自定义JHipster应用程序外观的最简单方法是覆盖CSS样式src/main/webapp/content/css/global.css,或者如果选择了Sass选项,则该src/main/webapp/content/scss/global.scss文件。

使用Sass比纯CSS更容易,更简洁,更强大,因为Bootstrap也是用Sass编写的,请参考Bootstrap 关于主题官方文档

如果要在自己的文件中使用Bootstrap partials,请在scss文件开头将其导入如下所示scss例如,使用border-radius mixin:

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

确保只导入部分而不是主Sass文件,否则最终会生成可能导致问题的重复CSS。

要更改默认的Bootstrap设置(如颜色,border-radius等),请在部分文件中添加或更改属性的值 src/main/webapp/content/scss/_bootstrap-variable.scss

Bootstrap _variables.scss中定义的所有值都可以在此处覆盖。


J

提交
查看更多评论
没有更多评论