自定义样式

使用 CSS 定义

页面的样式文件位于/public/css文件夹,第三方插件样式文件位于/public/vendor/(插件名)文件夹下,主题相关的样式文件位于/public/themes/(布局名)/css下,主题相关的皮肤样式文件位于/public/themes/(布局名)/css/skins下。

Notes:使用 CSS 定义时,您还必须禁用所有的 Gulp 的 Sass 编译任务。

使用 Sass 定义

Bootstrap v4 使用 Sass 来作为 CSS 的预处理器。

/src/themes/(布局名)/scss/
├── layouts/
├── sections/
├── skins/
├── _vars*.scss
└── site.scss

/src/themes/global/scss/
├── bootstrap/
├── bootstrap_extend/
├── components/
├── layouts/
├── sections/
├── vendor/
├── web-icons/
├── _vars*.scss
├── ...
└── bootstrap.scss

当编译布局Sass文件时,会使用/src/下的 Sass 文件,如果需要修改 Sass 文件编译后输出的位置,可通过配置/build/configuration/config.json实现。

如果您所购买的产中不包含 Gulp 自动构建的部分,您可以通过在线升级的方式购买自动构建部分。升级

Notes:如果您是一个 SCSS 的新手,请访问 Sass官网Sass中文网

轻松定制

此章节只针对于使用 SCSS 的用户。

为了使 CSS 更便于维护,更主题化和便于扩展,我们已经增加了许多功能,并使用了 variables(变量), mixins(混合), functions(函数)等方式。它们位于/src/themes/global/scss/bootstrap-extend/mixins文件夹下,您可以通过您喜欢的方式进行编码。

核心变量定义在以下几个文件中:

/src/themes/global/src/scss/_vars*.scss
/src/themes/(布局名)/scss/_vars*.scss

更多的变量在SCSS文件头部定义,如:

$alert-padding-horizontal:        20px;
$alert-list-padding-left: 13px;
$alert-list-item-padding-left: 7px;