Bootstrap에서 btn 색상을 변경하는 방법

Question 1

.btnBootstrap의 모든 속성 을 변경하는 방법이 있습니까? 나는 아래에서 시도했지만 여전히 때때로 기본 파란색이 표시됩니다 (마우스를 클릭하고 제거한 후 등). 전체 테마를 모두 변경하려면 어떻게해야합니까?

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}

Question 2

재정의해야하는 속성을 확인하는 가장 쉬운 방법은 Bootstrap의 소스 코드 , 특히 mixins / buttons.less에.button-variant 정의 된 mixin을 살펴 보는 것 입니다. 모든 .btn-primary스타일링 (예 : :focus, disabled드롭 다운에서의 사용 등)을 제거하려면 여전히 많은 속성을 재정의해야합니다 .

더 나은 방법은 다음과 같습니다.

Bootstrap의 온라인 사용자 지정 도구를 사용하여 사용자 지정 버전의 Bootstrap을 만듭니다.
자신 만의 색상 클래스를 수동으로 생성합니다. .btn-whatever
LESS 컴파일러를 사용하고 .button-variantmixin을 사용하여 고유 한 색상 클래스를 만듭니다..btn-whatever

Question 3

부트 스트랩의 기본 속성을 재정의하려면 속성을 중요하게 만들어야합니다.

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

이것이 당신에게 효과가 있기를 바랍니다.

Question 4

2019 Bootstrap 4 업데이트

이제 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);
}

https://codeply.com/go/2bHYxYSC0n ( SASS 데모 )

이 SASS는 다음 CSS로 컴파일됩니다.

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

https://codeply.com/go/lD3tUE01lo ( CSS 데모 )

모든 클래스 의 기본 색상을 변경하려면 부트 스트랩 CSS 템플릿 사용자 정의 및 부트 스트랩 기본 색상을 변경하는 방법을 참조하십시오.

Question 5

난 당신이 잊고 추측 .btn-primary:focus후 재산 및 쉼표 .btn-primary

도 덜 사용하고 variables.less 파일에 약간의 색상을 다시 정의 할 수 있습니다 당신은

당신의 코드는 다음과 같이 될 것입니다 염두에두고 :

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

스 니펫 확장

Question 6

다음에서 자신 만의 버튼을 만드세요.

http://blog.koalite.com/bbg/
부트 스트랩 끝에 CSS를 추가하십시오.

건배

Question 7

".btn-primary : active : focus"스타일 하나를 놓쳤습니다. 이로 인해 btn 클릭 중에 기본 부트 스트랩 색상이 잠시 동안 표시됩니다. 이것은 내 코드에서 작동합니다.

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}

Question 8

"btn-success"와 같은 버튼 색상 클래스를 제거하고 "btn-custom"과 같은 사용자 정의 클래스를 넣고 해당 클래스에 대한 CSS를 작성하십시오. 그것은 단순히 나를 위해 작동합니다.

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}

Question 9

간단한 방법이다 :

1) 모든 버튼 상태 차단

2) !important상태를 재정의하기 위해 추가

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  border-color: black !important;
}

보다 실용적인 UI 방법은 버튼의 호버 상태를 원래 상태보다 어둡게 만드는 것입니다.

.btn-primary {
  background-color: Blue !important;
  border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: DarkBlue !important;
  border-color: DarkBlue !important;
}

Question 10

여기에 호버 손실없는 내 맛이 있습니다. 개인적으로 표준 부트 스트랩 전환보다 더 좋습니다.

.btn-primary,
.btn-primary:active,
.btn-primary:visited {
  background-color: #8064A2 !important;
}

.btn-primary:hover {
  background-color: #594671 !important;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>

스 니펫 확장

Question 11

최근에 비슷한 문제가 발생하여 수업을 추가하여 해결했습니다.

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

또한이 클래스가 input [type = submit]에 사용되는 경우 [disabled] 및 [disabled] : hover에주의하십시오. 이렇게 :

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

Question 12

나는 사용 !important이 그다지 현명한 선택이 아니라고 생각 합니다. 특히 사이트를 반응 형으로 만들 때 다른 많은 문제가 발생할 수 있습니다. 그래서 내 이해는 .btn부트 스트랩 클래스 와 함께 사용자 정의 버튼 CSS 클래스를 사용하는 가장 좋은 방법 입니다. .btn부트 스트랩 버튼의 기본 스타일 클래스입니다. 따라서 레이아웃으로 유지하고 사용자 정의 CSS 클래스를 사용하여 다른 스타일을 변경할 수 있습니다. 여기서 언급하고 싶은 추가 사항이 하나 더 있습니다. 어떤 사람들은 버튼에서 파란색 윤곽선을 제거하려고합니다. 키보드를 사용할 때 접근성 문제가 있기 때문에 좋은 생각이 아닙니다. outline-color:대신 사용하여 색상을 변경하십시오 .

Question 13

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

저장 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);
}

위의 SCSS 파일을 CSS로 컴파일 할 수 있도록 Koala 와 같은 SASS 컴파일러를 다운로드하십시오 .
컴파일러가 어딘가에 버튼 변형 믹스 인을 필요로하므로 부트 스트랩 github 저장소를 복제합니다 .
_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";

컴파일 btnCustom.scssCSS에 이전에 다운로드 한 컴파일러.

Question 14

나는이 답변 의 OP는 아니지만 도움이되었습니다.

내 홈페이지에서 부트 스트랩 캐 러셀의 다음 / 이전 버튼 색상을 변경하고 싶었습니다.

해결 방법 : bootstrap.css에서 선택기 이름을 복사하고 원하는 style.css로 이동합니다 (자신의 선호도를 사용하여 ..).

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

스 니펫 확장

Question 15

예를 들어 구성 파일에서 부트 스트랩 테마 를 사용하여 사용자 정의 색상을 추가 할 수 있으며 variables.scss컴파일 할 때 부트 스트랩 전에 해당 파일을 가져와야합니다.

$theme-colors: (
    "whatever": #900
);

이제 할 수 있습니다 .btn-whatever