부트스트랩 공통색상 변경

css 부트스트랩 - 부트 스트랩에서 btn 색상을 변경하는 방법 - Stack Overflow

 

!important를 사용하는 것이 가장 좋은 생각은 아닙니다.

더 나은 옵션은 SASS를 사용하여 적절한 SASS 믹스 인을 사용하여 원하는대로 CSS 클래스를 다시 생성하는 것입니다.btn-*

부트스트랩 5(2023년 업데이트)

부트 스트랩 5에는 부트 스트랩을 가져온 후 버튼 색상을 사용자 정의하는 데 사용할 수있는 동일한 SASS 믹스인이 있습니다.button-variantbutton-outline-variant

 

/* import the Bootstrap */
@import "bootstrap";

/* ------- customize primary button color -------- */   
$mynewcolor:#77cccc;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

 

 

---------------------------------

부트 스트랩 4 (2019 년 업데이트)

이제 Bootstrap 4는 SASS를 사용하므로 믹스 인을 사용하여 기본 버튼 색상을 쉽게 변경할 수 있습니다.button-variant

$mynewcolor:#77cccc;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
    
.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

 

 

---------------------------

Bootstrap CSS 템플릿 사용자 지정 - Stack Overflow

=========================

 

나 같은 SASS / SCSS 초보자를 위해 위의 @Codeply-er의 답변에 단계별 가이드를 추가합니다.

1. 구해내다.btnCustom.scss

/* import the necessary Bootstrap files */
@import 'bootstrap';

/* Define color */
$mynewcolor:#77cccc;

.btn-custom {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-custom {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

 

==========

1. bootstrap 함수를 명시적으로 가져오려면 아래와 같이 파일을 만듭니다. 이렇게 하면 컴파일러가 Bootstrap 함수와 변수에 액세스할 수 있습니다._bootstrap.scss

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

1. 이전에 다운로드한 컴파일러를 사용하여 css로 컴파일합니다.btnCustom.scss

도움을 주셔서 감사합니다, 이것이 바로 제가 찾던 것입니다! 나는 항상 정의되지 않은 변수 오류가 발생했기 때문에 어떤 파일을 가져와야하는지 알아 내려고 시간을 낭비했다! 두 개의 파일 (Bootstrap 5.3.2)을 더 가져와야한다는 점에 유의하고 싶습니다 : import ".. /scss/_variables-dark.scss"; 가져오기 ".. /scss/_maps.scss"; 

– 류비사 리바츠

 댓글을 달았습니다2023년 10월 4일 18:06

 

https://getbootstrap.com/docs/5.0/components/buttons/