如果你想创建额外的样式,比如特定公司的按钮颜色、背景实用工具或其他内容,你可以简单地使用以下SCSS模板创建AdminLTE的子版本。
在这个示例中,我们创建了一个名为.btn-custom-color
的自定义按钮类,具有额外的按钮样式和名为.my-custom-style
.
// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import '~admin-lte/build/scss/bootstrap-variables';
// Custom Theme Color START
$custom-color: #00FF00;
$theme-colors: map-merge((
'custom-color': $custom-color,
), $theme-colors);
// Custom Theme Color END
// Variables and Mixins
// ---------------------------------------------------
@import '~admin-lte/build/scss/variables';
@import '~admin-lte/build/scss/variables-alt';
@import '~admin-lte/build/scss/mixins';
@import '~bootstrap/scss/bootstrap';
@import '~admin-lte/build/scss/parts/core';
@import '~admin-lte/build/scss/parts/components';
@import '~admin-lte/build/scss/parts/extra-components';
@import '~admin-lte/build/scss/parts/pages';
@import '~admin-lte/build/scss/parts/plugins';
@import '~admin-lte/build/scss/parts/miscellaneous';
// Custom Style START
.my-custom-style {
background-color: $custom-color;
padding: .5rem 0;
}
// Custom Style END
的自定义类。
在这个示例中,我们创建了一个名为.btn-custom-color
的自定义类,具有额外的按钮样式。
// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import '~admin-lte/build/scss/bootstrap-variables';
@import '~bootstrap/scss/mixins';
$custom-color: #00FF00;
.btn-custom-color {
@include button-variant($custom-color, $custom-color);
}
警告!
这些示例只是原始的SCSS模板,你仍然需要一个SCSS -> CSS构建脚本来将SCSS编译成CSS!