Additional Styles / Custom Skin

如果你想创建额外的样式，比如特定公司的按钮颜色、背景实用工具或其他内容，你可以简单地使用以下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！

额外样式 / 自定义皮肤

警告！