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

你还可以使用以下 SCSS 模板在 AdminLTE 之上创建皮肤。

在此示例中，我们创建了一个名为 .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！

其他样式/自定义皮肤

警告！