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

Question 1

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

Question 2

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 에서도 작동합니다.

Question 3

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

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;

결과를 컴파일

Question 4

이 도구를 만들었습니다 : 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에서 작동하도록 만들어졌습니다 (즉, 현재는 후속 버전이 아님).

Question 5

‘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/ .

Question 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";

Question 7

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

Question 8

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";

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

답변

답변

답변

답변

답변

답변

답변