부트스트랩 기본 색상을 변경하는 방법은 무엇입니까?
부트스트랩 원색을 브랜드 색상에 맞게 변경할 수 있습니까?저는 제 경우에 부츠워치의 종이 테마를 사용하고 있습니다.
부트스트랩 5.3(2023 업데이트)
다음은 기존 색상 변수($오렌지)를 사용한 예입니다.
// required to get $orange variable
@import "functions";
@import "variables";
$primary: $orange; // set the $primary variable
// merge with existing $theme-colors map
$theme-colors: map-merge($theme-colors, (
"primary": $primary
));
// set changes
@import "bootstrap";
https://codeply.com/p/qFez3k8oIF
부트스트랩 5(2021년 업데이트)
SAS 재정의 방법은 부트스트랩 5와 동일합니다.기존 부트스트랩 변수를 참조하여 새 색상을 설정하지 않을 경우 테마 변수와 @import 부트스트랩만 설정하면 됩니다.
$primary: rebeccapurple;
@import "bootstrap"; //use full path to bootstrap.scss
https://codeply.com/p/iauLPArGqE
부트스트랩 4*
Bootstrap 4SAS에서 기본 또는 테마 색상을 변경하려면 가져오기 전에 적절한 변수를 설정합니다.bootstrap.scss이를 통해 사용자 지정 sscs에서 !default 값을 재정의할 수 있습니다.
$primary: purple;
$danger: red;
@import "bootstrap";
데모: https://codeply.com/go/f5OmhIdre3
경우에 따라 기존의 다른 부트스트랩 변수에서 새 색상을 설정할 수 있습니다.이 @의 경우 사용자 지정에서 참조할 수 있도록 함수와 변수를 먼저 가져옵니다.
/* 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
참고 항목: 이 답변, 이 답변 또는 단추 색상 변경(CSS 또는 SASS)
CSS로만 주색 변경이 가능하지만, CSS가 많아서 추가로 많이 필요합니다.-primary변형(btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary 등) 및 이러한 클래스 중 일부는 경계, 호버 및 활성 상태에서 약간의 색상 차이가 있습니다.따라서 CSS를 사용해야 할 경우 기본 버튼 색상 변경과 같은 대상 하나의 구성 요소를 사용하는 것이 좋습니다.
제가 이 도구를 만들었습니다. https://lingtalfi.com/bootstrap4-color-generator, 첫 번째 필드에 기본값을 입력한 다음 색상을 선택하고 생성을 클릭하면 됩니다.
그런 다음 생성된 scss 또는 css 코드를 복사하여 my-colors.scss 또는 my-colors.css(또는 원하는 이름)라는 파일에 붙여 넣습니다.
일단 당신이 scss를 CSS로 컴파일하면, 당신은 부트스트랩 CSS 뒤에 그 css 파일을 포함할 수 있고 당신은 갈 수 있을 것입니다.
my-colors.scss 파일이 이미 생성되어 헤드 태그에 포함되어 있다면 전체 프로세스의 요점을 파악하는 데 약 10초가 걸립니다.
참고: 이 도구를 사용하여 부트스트랩의 기본 색상(기본, 보조, 위험 등)을 재정의할 수 있지만, 원하는 경우 사용자 지정 색상(파란색, 녹색, 3진수 등)을 만들 수도 있습니다.
참고 2: 이 도구는 부트스트랩 4(현재로서는 후속 버전이 아님)와 함께 작동하도록 만들어졌습니다.
당신이 갈 수 있는 두 가지 방법이 있습니다.
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
부트스트랩 5의 경우 메인 scss 파일로 이동하여 다음을 추가할 수 있습니다.
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
어떤 변화를 만들고 싶든 간에...
그리고 부트스트랩을 바로 가져오는 것을 잊지 마세요.
최종 main.scss 파일은 다음과 같습니다.
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
@import "~node_modules/bootstrap/scss/bootstrap";
부트스트랩 4
이것이 저에게 도움이 되었습니다.
나는 나만의 것을 만들었습니다._custom_theme.scss:
/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);
의 맨 했습니다.bootstrap.scss컴파일했습니다(에는 !).
@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
'primary' 태그가 있는 모든 요소의 색상은 @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/ 링크를 참조하십시오.
오래된 질문일 수도 있지만 부트스트랩을 사용자 지정하는 가장 좋은 방법을 공유하고자 합니다.라는 온라인 도구가 있습니다.bootstrap.build https://bootstrap.build/app.설치나 건축 도구를 설치할 필요 없이 매우 잘 작동합니다!
SASS 또는 보조, 성공 등의 다른 색상을 사용하여 부트스트랩 4.x의 기본 기본 색상을 변경하는 올바른 방법.
그림과 같이 다음 SAS 파일을 생성하고 부트스트랩 SAS를 가져옵니다.
// (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";
SaaS 사용하기
합니다.
$brand-primary:#some-color;
모든 UI에서 기본 색상이 변경됩니다.
css-CSS-를 합니다.
버튼 기본 색상을 변경하고 싶다고 가정합니다.
btn.primary{
background:#some-color;
}
요소를 검색하고 새 파일에 새 CSS/sys 규칙을 추가한 후 부트스트랩 CSS를 업로드한 후 연결합니다.
부트스트랩 4 규칙
여기에 나와 있는 대부분의 답은 다소 정확하지만, 모두 (저에게는) 몇 가지 문제가 있습니다.그래서 마침내, 구글 검색을 통해 전용 부트스트랩 문서인 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.
이것은 부트스트랩 v5 알파 3에서 나에게 효과가 있는 것 같습니다.
_syslog-syslog.scss
$primary: #00adef;
$theme-colors: (
"primary": $primary,
);
main.scss
// Overrides
@import "variables-overrides";
// Required - Configuration
@import "@/node_modules/bootstrap/scss/functions";
@import "@/node_modules/bootstrap/scss/variables";
@import "@/node_modules/bootstrap/scss/mixins";
@import "@/node_modules/bootstrap/scss/utilities";
// Optional - Layout & components
@import "@/node_modules/bootstrap/scss/root";
@import "@/node_modules/bootstrap/scss/reboot";
@import "@/node_modules/bootstrap/scss/type";
@import "@/node_modules/bootstrap/scss/images";
@import "@/node_modules/bootstrap/scss/containers";
@import "@/node_modules/bootstrap/scss/grid";
@import "@/node_modules/bootstrap/scss/tables";
@import "@/node_modules/bootstrap/scss/forms";
@import "@/node_modules/bootstrap/scss/buttons";
@import "@/node_modules/bootstrap/scss/transitions";
@import "@/node_modules/bootstrap/scss/dropdown";
@import "@/node_modules/bootstrap/scss/button-group";
@import "@/node_modules/bootstrap/scss/nav";
@import "@/node_modules/bootstrap/scss/navbar";
@import "@/node_modules/bootstrap/scss/card";
@import "@/node_modules/bootstrap/scss/accordion";
@import "@/node_modules/bootstrap/scss/breadcrumb";
@import "@/node_modules/bootstrap/scss/pagination";
@import "@/node_modules/bootstrap/scss/badge";
@import "@/node_modules/bootstrap/scss/alert";
@import "@/node_modules/bootstrap/scss/progress";
@import "@/node_modules/bootstrap/scss/list-group";
@import "@/node_modules/bootstrap/scss/close";
@import "@/node_modules/bootstrap/scss/toasts";
@import "@/node_modules/bootstrap/scss/modal";
@import "@/node_modules/bootstrap/scss/tooltip";
@import "@/node_modules/bootstrap/scss/popover";
@import "@/node_modules/bootstrap/scss/carousel";
@import "@/node_modules/bootstrap/scss/spinners";
// Helpers
@import "@/node_modules/bootstrap/scss/helpers";
// Utilities
@import "@/node_modules/bootstrap/scss/utilities/api";
@import "custom";
부트스트랩 5.2. 업데이트
SCSS로 작업 중이고 색상을 수정하려면 SCSS 파일에 지도를 추가해야 합니다.
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2
다음과 같은 경우:
$custom-colors: (
"white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
그리고 마지막으로:
@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";
그리고 나머지.
부트스트랩 4는 BootstrapColor.net 에서 간단한 CSS 파일을 다운로드하면 부트스트랩의 기본 색상을 쉽게 변경할 수 있습니다.당신은 SASS를 알 필요가 없으며 CSS 파일은 당신의 웹사이트에 사용할 준비가 되어 있습니다.파란색, 남색, 보라색, 분홍색, 빨간색, 주황색, 노란색, 녹색, 청록색 등 원하는 색상을 선택할 수 있습니다.
- 당신은 cdn 파일의 색상을 변경할 수 없습니다.
- 부트스트랩 파일을 다운로드합니다.
- bootstrap.css 파일을 검색합니다.
- 이(bootstrsap.dll) 파일을 열고 '기본'을 검색합니다.
- 원하는 색상으로 변경합니다.
이것은 매우 쉬운 해결책입니다.
<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>
클래스 bg-dark를 bg-custom으로 바꿉니다.
CSS에서
.bg-custom {
background-color: red;
}
예, .css 파일을 열고 페이지를 검사한 후 변경할 색 코드를 찾고 원하는 색으로 모두 찾기 및 바꾸기(텍스트 편집기에 따라)를 선택하는 것이 좋습니다.변경할 모든 색상으로 변경
언급URL : https://stackoverflow.com/questions/38792005/how-to-change-the-bootstrap-primary-color
'programing' 카테고리의 다른 글
| AJAX 요청 및 PHP 클래스 함수 (0) | 2023.08.20 |
|---|---|
| 부울 모드에서 사용하는 동안 전체 텍스트 색인을 찾을 수 없습니다. (0) | 2023.08.20 |
| HTML에서 공백 무시 (0) | 2023.08.20 |
| jQuery $("#radioButton").변경(...)이(가) 선택 취소 중에 실행되지 않음 (0) | 2023.08.20 |
| 금월 초하루와 말일. (0) | 2023.08.20 |