부트 스트랩 기본 색상을 변경하는 방법은 무엇입니까?

93

브랜드 색상과 일치하도록 부트 스트랩 기본 색상을 변경할 수 있습니까? 제 경우에는 bootswatch의 종이 테마를 사용하고 있습니다.

css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— Ashishjmeshram
소스
1
— TylerH
예, 당신의 사용자 정의 CSS 파일에서 재정의,하지만 당신은 각 요소에 대한 여러 가지 규칙을 적용해야하며, 자신의 상태 (활성, 호버 등을 초점)
— 리
3
대신 CSS를 재정의, 나는 사용자 정의 도구를 사용하는 것이 좋습니다 getbootstrap.com/customize
— blurfus

답변:

94

2020 년 부트 스트랩 4 업데이트

변화에 주 , 또는 임의 의 테마 색 부트 스트랩 4 SASS의를 적절한 변수를 설정 하기 전에 가져 bootstrap.scss. 이렇게하면 사용자 지정 scss가! default 값을 재정의 할 수 있습니다.

$primary: purple;
$danger: red;

@import "bootstrap";

데모 : https://codeply.com/go/f5OmhIdre3

경우에 따라 기존의 다른 부트 스트랩 변수 에서 새 색상을 설정할 수 있습니다 . 이 @import의 경우 먼저 함수와 변수를 사용자 지정에서 참조 할 수 있습니다.

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

데모 : https://codeply.com/go/lobGxGgfZE

참조 : this answer , this answer 또는 (CSS 또는 SASS)에서 버튼 색상 변경

CSS만으로 기본 색상을 변경할 수도 있지만 다양한 -primary변형 (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary 등) 이 있기 때문에 많은 추가 CSS가 필요합니다. ...) 이러한 클래스 중 일부는 테두리, 호버 및 활성 상태에 약간의 색상 변형이 있습니다. 따라서 CSS를 사용해야하는 경우 기본 버튼 색상 변경과 같은 대상 하나의 구성 요소를 사용하는 것이 좋습니다 .

이 솔루션은 Bootstrap 5 alpha 에서도 작동합니다.

— 짐
소스
저와 같은 SASS 및 scss를 처음 사용하는 경우 ... 컴파일 단계를 완료하려면 npm의 gulp를 확인하십시오 .
— Chris Conlan 2018 년
2
@ 크리스 왜? 부트 스트랩의 npm 빌드 스크립트가 소스에 포함되어 있습니다. 전체 목록은 package.json 파일을 참조하십시오.
— John E
1
프론트 엔드 개발자가 아닙니다. 내 테마 문서가 말 해준 그대로. 말이되지 않으면 삭제하겠습니다.
— Chris Conlan
그래서 CDN을 사용하려면 CSS 만 변경해야합니다 ( 긴 기본 버전 ).
— Erik Philips
SASS에 대해 무지한 사람들을 위해 $ primary 값을 설정하고 import "bootstrap"을 발행하는 곳은 어디입니까?
— Steven Frank
28

갈 수있는 두 가지 방법이 있습니다 

http://getbootstrap.com/customize/

이 조정에서 색상을 변경하고 사용자 정의 된 부트 스트랩을 다운로드하십시오.

또는이 버전 https://github.com/twbs/bootstrap-sass에서 sass를 사용 하고 sass assets / stylesheets / _bootstrap.scss에서 가져올 수 있지만 가져 오기 전에 기본 변수 색상을 변경할 수 있습니다.

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

결과를 컴파일

— 호르헤 루이스 사우드 로살
소스
5
Bootstrap 4에 사용할 수있는 맞춤형 잉크가 있습니까?
— 어. 아 미트 조시
1
당신은 생략한다!default 당신이하지에 대한 이유를 다른 사용자 정의 스타일 파일이되지 않는 플래그를.
— John E
17

이 도구를 만들었습니다 : https://lingtalfi.com/bootstrap4-color-generator , 첫 번째 필드에 기본을 입력 한 다음 색상을 선택하고 생성을 클릭하면됩니다.

그런 다음 생성 된 scss 또는 css 코드를 복사하여 my-colors.scss 또는 my-colors.css (또는 원하는 이름)라는 파일에 붙여 넣습니다.

당신은 일단 CSS로하는 SCS를 컴파일 , 당신은 CSS 파일을 포함 할 수 AFTER 부트 스트랩 CSS 그리고 당신은 갈 수있을 것입니다.

my-colors.scss 파일이 이미 생성되어 head 태그에 포함 된 경우 전체 프로세스는 요점을 파악하면 약 10 초가 걸립니다 .

참고 :이 도구는 부트 스트랩의 기본 색상 (기본, 보조, 위험, ...)을 재정의하는 데 사용할 수 있지만 원하는 경우 사용자 지정 색상 (파란색, 녹색, 삼원, ...)을 만들 수도 있습니다.

참고 2 :이 도구는 부트 스트랩 4에서 작동하도록 만들어졌습니다 (즉, 현재는 후속 버전이 아님).

— 링
소스
이 생성 된 CSS가 작동하도록하려면 부 스트랩 가져 오기를 이동해야했습니다. 훌륭한 도구 감사합니다.
— deanwilliammills
당신은 영웅입니다, +1
— Mustafa Erdogan
6

'primay'태그가있는 모든 요소에는 @ brand-primary 색상이 있습니다. 이를 변경하는 옵션 중 하나는 아래와 같이 사용자 정의 된 css 파일을 추가하는 것입니다.

.my-primary{
  color: lightYellow ;
  background-color: red;
}

.my-primary:focus, .my-primary:hover{
  color: yellow ;
  background-color: darkRed;
}

a.navbar-brand {
  color: lightYellow ;
}

.navbar-brand:hover{
  color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <br>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Default (navbar-dark  bg-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
  </div>


<br>

<div class="container">
  <nav class="navbar my-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Customized (my-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn my-primary">Customized (btn my-primary)</button>
  </div>
스 니펫 확장

부트 스트랩을 사용하는 사용자 정의 된 CSS 파일에 대한 자세한 내용은 유용한 링크입니다 : https://bootstrapbay.com/blog/bootstrap-button-styles/ .

— N. 오실
소스
6

부트 스트랩 4

이것은 나를 위해 일한 것입니다.

다음 _custom_theme.scss 과 유사한 내용으로 내 파일을 만들었습니다 . 

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

파일 맨 위에 추가 bootstrap.scss하고 다시 컴파일했습니다 (제 경우에는! scss라는 폴더에있었습니다).

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
— Rauland
소스
2
이것이 올바른 접근 방식입니다. getbootstrap.com/docs/4.0/getting-started/theming
— Gianpiero 19
@rauland 어떻게 다시 컴파일합니까? 부트 스트랩 3의 경우에도 이와 동일한 접근 방식이 적용됩니까?
— Umair
1
안녕하세요 @Umair, 저는 Mads Kristensen의 확장 웹 컴파일러와 함께 Visual Studio를 사용합니다. 입력 .scss 및 출력 .css 파일을 지정하여 각 .scss 파일을 컴파일하는 방법을 정의하는 내 솔루션에 compilerconfig.json을 추가합니다. 추가 정보 : github.com/madskristensen/WebCompiler
— Rauland
1
예 : (.Net 코어의 asp.net) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "
— Rauland
3

이것은 약간 오래된 질문 일 수 있지만 부트 스트랩을 사용자 정의하는 가장 좋은 방법을 공유하고 싶습니다. bootstrap.build https://bootstrap.build/app 이라는 온라인 도구가 있습니다 . 훌륭하게 작동하며 설치 또는 구축 도구 설정이 필요하지 않습니다!

— 라미 알로시
소스
2

SASS 또는 보조, 성공 등과 같은 다른 색상을 사용하여 Bootstrap 4.x에서 기본 기본 색상을 변경하는 올바른 방법입니다.

다음 SASS 파일을 생성하고 표시된대로 Bootstrap SASS를 가져옵니다.

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: green;
$my-color: red;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  my-color: $my-color
);

// Add below your SASS or CSS code

// (Required) Import Bootstrap
@import "bootstrap/bootstrap";
— 앨빈 콘다
소스
1

SaSS를
사용하여 브랜드 색상 변경

$brand-primary:#some-color;

그러면 모든 UI에서 기본 색상이 변경됩니다.

CSS를 사용하여
버튼 기본 색상을 변경한다고 가정합니다.

btn.primary{
  background:#some-color;
}

요소를 검색하고 새 파일에 새 css / sass 규칙을 추가하고 부트 스트랩 css를로드 한 후 첨부합니다.

— 매니쉬 쿠마르
소스
0

부트 스트랩 4 규칙

여기에있는 대부분의 답변은 다소 정확하지만 모두 (나에게) 몇 가지 문제가 있습니다. 그래서 마지막으로 googleing으로 전용 부트 스트랩 문서 ( https://getbootstrap.com/docs/4.0/getting-started/theming/)에 명시된대로 올바른 절차를 찾았습니다 .

부트 스트랩이 node_modules/bootstrap.

A. your_bootstrap.scss파일 생성 :

@import "your_variables_theme";    // here your variables

// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";

// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...

B. 같은 폴더에 _your_variables_theme.scss파일을 만듭니다 .

C. _your_variables_theme.scss다음 규칙에 따라 파일 의 부트 스트랩 변수를 사용자 지정합니다 .

_variables.scss필요에 따라 변수를 복사하여 붙여넣고 값을 수정 한 다음! default 플래그를 제거하십시오 . 변수가 이미 할당 된 경우 부트 스트랩의 기본값으로 다시 할당되지 않습니다.

동일한 Sass 파일 내의 변수 재정의는 기본 변수 앞이나 뒤에 올 수 있습니다. 그러나 Sass 파일을 재정의하는 경우 Bootstrap의 Sass 파일을 가져 오기 전에 재정의해야합니다 .

기본 변수는 node_modules/bootstrap/scss/variables.scss.

— Gianpiero
소스
0

부트 스트랩 5

부트 스트랩 5의 경우 기본 scss 파일로 이동하여 다음을 추가 할 수 있습니다.

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

또는 무엇을 변경하고 싶은지 ...

그리고 바로 부트 스트랩을 가져 오는 것을 잊지 마십시오.

최종 main.scss 파일은 다음과 같아야합니다.

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;


@import "~node_modules/bootstrap/scss/bootstrap";
— user4264972
소스
-4

부트 스트랩 4 년부터 수행 할 수 있습니다 쉽게 부트 스트랩의 기본 색상을 변경 에 대한 간단한의 CSS 파일을 다운로드하여 BootstrapColor.net을 . SASS를 알 필요가 없으며 CSS 파일을 웹 사이트에 사용할 준비가되었습니다. 파란색, 남색, 보라색, 분홍색, 빨간색, 주황색, 노란색, 녹색, 청록색, 청록색 등 원하는 색상을 선택할 수 있습니다.

— Alex01
소스
2
bootstrapcolor.net 단순히 하드 코드 새 기본 색으로 부트 스트랩을 다시 컴파일 것처럼 사람들은 문자 그대로 당신이 선택할 수있는 유일한 색상입니다.
— Quantum7
-7
  • cdn 파일에서는 색상을 변경할 수 없습니다.
  • 부트 스트랩 파일을 다운로드합니다.
  • bootstrap.css 파일을 검색하십시오.
  • 이 (bootstrsap.css) 파일을 열고 'primary'를 검색하십시오.
  • 원하는 색상으로 변경하십시오.
— Sourav
소스
1
이것은 실제로 작동하지 않습니다. Bootstrap CSS를 직접 변경하는 것은 좋지 않습니다. 대신 bootstrap.css 다음에 오는 별도의 파일에 CSS 재정의를 추가하십시오. 또한, 변화하는 모든 하여 -primary그들이 기본 배경 색상의 변화에 있기 때문에 같은 색으로 색상 참조하면 테두리, 호버, 활성, 등 색상에 의도 된 변화를 잃을 것입니다.
— Zim
@Zim yupp 귀하의 솔루션이 더 일반화 된 것 같습니다.
— Sourav
-8

이것은 매우 쉬운 해결책입니다.

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

bg-dark 클래스를 bg-custom으로 대체하십시오 .

CSS에서

.bg-custom {
  background-color: red;
}
— Rob
소스
2
이것은 질문에 대한 답이 아닙니다. 질문을주의 깊게 읽으십시오.
— Munim Munna
-14

예, .css 파일을 열고 페이지를 검사하고 변경하려는 색상 코드를 찾은 다음 모두 찾기 및 바꾸기 (텍스트 편집기에 따라 다름)를 원하는 색상으로 바꾸는 것이 좋습니다. 변경하려는 모든 색상으로 수행하십시오.

— 조나스 시데 라 비치 우스
소스
3
이것은 실제로 모범 사례가 아닙니다. 물론 그것은 작동하지만 프레임 워크를 업그레이드 할 때마다 변경 사항이 사라집니다 (당신은이 과정을 반복 할 필요가 매번.. 업그레이드를 할) - 대신 맞춤 설정 도구 (사용 getbootstrap.com/customize ) 또는 추가를 별도의 .css 파일에 대한 사용자 지정 변경 사항 (재정의하려는 클래스 재정의)
— blurfus
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.