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！

額外樣式 / 自訂外觀

警告！