bootstrap5.2自定义按钮背景颜色

528 阅读1分钟

原理:引入scss配置文件,修改原文件的配置,然后编译生成修改后的自定义bootstrap.custom.css文件,来覆盖默认bootstrap.css文件。

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../lib/bootstrap/scss/functions";

// 2. Include any default variable overrides here
$red: #FF4150;
$green: #5F8934;
$blue: #FF7300 !default;
$cyan: #03528E;
$red: #DF2222;

// 3. Include remainder of required Bootstrap stylesheets
@import "../lib/bootstrap/scss/variables";

// 4. Include any default map overrides here

// 5. Include remainder of required parts
@import "../lib/bootstrap/scss/maps";
@import "../lib/bootstrap/scss/mixins";
@import "../lib/bootstrap/scss/root";

// 6. Optionally include any other parts as needed
@import "../lib/bootstrap/scss/utilities";

@import "../lib/bootstrap/scss/reboot";
@import "../lib/bootstrap/scss/type";
@import "../lib/bootstrap/scss/images";
@import "../lib/bootstrap/scss/containers";
@import "../lib/bootstrap/scss/grid";
@import "../lib/bootstrap/scss/helpers";
@import "../lib/bootstrap/scss/buttons";
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant( $value, $value, $hover-background: shade-color($value, $btn-hover-bg-shade-amount), $hover-border: shade-color($value, $btn-hover-border-shade-amount), $active-background: shade-color($value, $btn-active-bg-shade-amount), $active-border: shade-color($value, $btn-active-border-shade-amount) );
    }
    @else if $color == "dark" {
      @include button-variant( $value, $value, $hover-background: tint-color($value, $btn-hover-bg-tint-amount), $hover-border: tint-color($value, $btn-hover-border-tint-amount), $active-background: tint-color($value, $btn-active-bg-tint-amount), $active-border: tint-color($value, $btn-active-border-tint-amount) );
    }
    @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../lib/bootstrap/scss/utilities/api";

// 8. Add additional custom code here