自定义样式

使用 CSS 定义

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

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

使用 LESS 定义

Bootstrap v3 使用 Less 来作为 CSS 的预处理器。

/src/themes/(主题名)/(布局名)/less/
├── layouts/
├── sections/
├── vars-customs.less
├── vars-site.less
└── vars.less

/src/themes/(主题名)/global/less/
├── bootstrap/
├── bootstrap_extend/
├── components/
├── vars-bootstrap.less
├── vars-components.less
└── vars.less

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

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

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

轻松定制

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

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

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

/src/themes/(主题名)/global/src/less/vars_bootstrap.less
/src/themes/(主题名)/global/src/less/vars_color.less
/src/themes/(主题名)/(布局名)/less/vars_site.less

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

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