Làm cách nào để thay đổi màu chính của bootstrap?

93

Có thể thay đổi màu chính của bootstrap để phù hợp với màu thương hiệu không? Tôi đang sử dụng chủ đề giấy của bootswatch trong trường hợp của mình.

css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— ashishjmeshram
nguồn
1
Có thể có bản sao của Cách thay đổi màu btn trong Bootstrap
— TylerH
Vâng, chỉ ghi đè lên nó trong tập tin tùy chỉnh CSS của bạn, nhưng bạn sẽ cần phải áp dụng nhiều quy tắc khác nhau cho mỗi người trong số các yếu tố, và các quốc gia của họ (hoạt động, di chuột, tập trung vv)
— Lee
3
Thay vì trọng CSS, tôi khuyên bạn nên sử dụng công cụ tùy biến getbootstrap.com/customize
— blurfus

Câu trả lời:

95

Cập nhật 2020 cho Bootstrap 4

Để thay đổi chính , hoặc bất kỳ của các màu sắc chủ đề trong Bootstrap 4 Sass, thiết lập các biến thích hợp trước khi nhập khẩu bootstrap.scss. Điều này cho phép scss tùy chỉnh của bạn ghi đè các giá trị! Default ...

$primary: purple;
$danger: red;

@import "bootstrap";

Demo: https://codeply.com/go/f5OmhIdre3

Trong một số trường hợp, bạn có thể muốn đặt một màu mới từ một biến Bootstrap hiện có khác. Đối với điều này, hãy nhập các hàm và biến trước tiên để chúng có thể được tham chiếu trong các tùy chỉnh ...

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

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

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

Demo: https://codeply.com/go/lobGxGgfZE

Cũng xem: câu trả lời này , câu trả lời này hoặc thay đổi màu nút trong (CSS hoặc SASS)

Cũng có thể thay đổi màu chính chỉ bằng CSS nhưng nó yêu cầu rất nhiều CSS bổ sung vì có nhiều -primarybiến thể (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, v.v. ...) và một số lớp này có các biến thể màu sắc nhẹ trên đường viền, di chuột và trạng thái hoạt động. Do đó, nếu bạn phải sử dụng CSS, tốt hơn nên sử dụng target một thành phần chẳng hạn như thay đổi màu nút chính .

Các giải pháp này cũng sẽ hoạt động cho Bootstrap 5 alpha

— Zim
nguồn
Đối với những người mới đến Sass và SCSS như tôi đã ... xin vui lòng kiểm tra npmlà gulpđể hoàn thành bước biên dịch.
— Chris Conlan
2
@Chris Tại sao? Các tập lệnh xây dựng npm của Bootstrap được bao gồm trong nguồn. Tìm trong tệp package.json để có danh sách đầy đủ.
— John E
1
Không phải là nhà phát triển front-end. Đúng như những gì tài liệu về chủ đề của tôi nói với tôi. Tôi sẽ xóa nếu điều đó không có ý nghĩa.
— Chris Conlan
Vì vậy, sử dụng CDN yêu cầu CSS chỉ thay đổi ( phiên bản gốc dài ) Tôi nghi ngờ?
— Erik Philips
Đối với những người trong chúng ta, những người không biết về SASS, đâu là nơi đặt giá trị chính $ và phát hành nhập "bootstrap" ;?
— Steven Frank
28

có hai cách bạn có thể đi đến 

http://getbootstrap.com/customize/

và thay đổi màu sắc trong các điều chỉnh này và tải xuống bootstrap tùy chỉnh.

Hoặc bạn có thể sử dụng sass với phiên bản này https://github.com/twbs/bootstrap-sass và nhập vào tài sản sass / stylesheets / _bootstrap.scss của bạn nhưng trước khi nhập, bạn có thể thay đổi màu mặc định của biến

//== 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;

và biên dịch kết quả

— Jorge Luis Saud Rosal
nguồn
5
có mực tùy chỉnh nào có sẵn cho Bootstrap 4 không?
— Ờ. Amit Joshi,
1
Bạn nên bỏ qua các !defaultcờ trừ khi có các tệp kiểu tùy chỉnh khác cho bạn lý do để không làm như vậy.
— John E
17

Tôi đã tạo công cụ này: https://lingtalfi.com/bootstrap4-color-generator , bạn chỉ cần đặt chính vào trường đầu tiên, sau đó chọn màu của bạn và nhấp vào tạo.

Sau đó, sao chép mã scss hoặc css đã tạo và dán vào tệp có tên my-Colors.scss hoặc my-Colors.css (hoặc bất kỳ tên nào bạn muốn).

Khi bạn biên dịch scss thành css , bạn có thể bao gồm tệp css đó SAU KHI có CSS bootstrap và bạn sẽ có thể sử dụng.

Toàn bộ quá trình mất khoảng 10 giây nếu bạn nắm được ý chính của nó, với điều kiện tệp my-Colors.scss đã được tạo và đưa vào thẻ head của bạn.

Lưu ý: công cụ này có thể được sử dụng để ghi đè các màu mặc định của bootstrap (chính, phụ, nguy hiểm, ...), nhưng bạn cũng có thể tạo các màu tùy chỉnh nếu muốn (xanh lam, xanh lá cây, lục ba, ...).

Lưu ý 2: công cụ này được tạo ra để hoạt động với bootstrap 4 (tức là không phải bất kỳ phiên bản tiếp theo nào hiện tại).

— ling
nguồn
Tôi đã phải di chuyển quá trình nhập boostrap sau khi CSS được tạo này để làm cho nó hoạt động. Cảm ơn công cụ tuyệt vời.
— deanwilliammills
Bạn là một người đàn ông anh hùng, +1
— Mustafa Erdogan
6

Bất kỳ phần tử nào có thẻ 'primay' đều có màu @ brand-primary. Một trong những tùy chọn để thay đổi nó là thêm tệp css tùy chỉnh như bên dưới:

.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>
Mở rộng đoạn mã

Để biết thêm về các tệp css tùy chỉnh với bootstrap, đây là một liên kết hữu ích: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

— N. Osil
nguồn
6

Bootstrap 4

Đây là những gì làm việc cho tôi:

Tôi đã tạo _custom_theme.scss tệp của riêng mình với nội dung tương tự như: 

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

Đã thêm nó vào đầu tệp bootstrap.scssvà biên dịch lại (Trong trường hợp của tôi, tôi có nó trong một thư mục có tên! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
— Rauland
nguồn
2
Đây là cách tiếp cận đúng, như đã nêu trong getbootstrap.com/docs/4.0/getting-started/theming
— Gianpiero
@rauland Bạn biên dịch lại như thế nào? Cách tiếp cận này có tương tự trong trường hợp bootstrap 3 không?
— Umair
1
Xin chào @Umair, tôi sử dụng Visual Studio với phần mở rộng Web Compiler của Mads Kristensen. Nó thêm một compilerconfig.json vào giải pháp của tôi, nơi tôi xác định cách biên dịch từng tệp .scss, chỉ định .scss đầu vào và tệp .css đầu ra. Thông tin thêm: github.com/madskristensen/WebCompiler
— Rauland
1
ví dụ: (asp.net trên .Net core) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "
— Rauland
3

Đây có thể là một câu hỏi hơi cũ, nhưng tôi muốn chia sẻ cách tốt nhất mà tôi tìm thấy để tùy chỉnh bootstrap. Có một công cụ trực tuyến được gọi là bootstrap.build https://bootstrap.build/app . Nó hoạt động tuyệt vời và không cần cài đặt hoặc thiết lập công cụ xây dựng!

— Rami Alloush
nguồn
2

Cách chính xác để thay đổi màu chính mặc định trong Bootstrap 4.x bằng cách sử dụng SASS hoặc bất kỳ màu nào khác như màu phụ, thành công, v.v.

Tạo tệp SASS sau đây và nhập SASS Bootstrap như được chỉ ra:

// (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";
— Alvin Konda
nguồn
1

Sử dụng SaSS
thay đổi màu thương hiệu

$brand-primary:#some-color;

điều này sẽ thay đổi màu chính trên tất cả giao diện người dùng.

Sử dụng css-
giả sử bạn muốn thay đổi màu chính của nút.

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

tìm kiếm phần tử và thêm quy tắc css / sass mới trong một tệp mới và đính kèm nó sau khi bạn tải css bootstrap.

— manish kumar
nguồn
0

Quy tắc Bootstrap 4

Hầu hết các câu trả lời ở đây đều ít nhiều đúng, nhưng tất cả đều có một số vấn đề (đối với tôi). Vì vậy, cuối cùng, googleing, tôi đã tìm thấy quy trình chính xác, như đã nêu trong tài liệu bootstrap chuyên dụng: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Giả sử bootstrap đã được cài đặt node_modules/bootstrap.

A. Tạo your_bootstrap.scsstệp của bạn :

@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. Trong cùng một thư mục, hãy tạo _your_variables_theme.scsstệp.

C. Tùy chỉnh các biến bootstrap trong _your_variables_theme.scsstệp theo quy tắc sau:

Sao chép và dán các biến _variables.scssnếu cần, sửa đổi giá trị của chúng và xóa cờ! Default . Nếu một biến đã được gán, thì nó sẽ không được gán lại theo các giá trị mặc định trong Bootstrap.

Ghi đè biến trong cùng một tệp Sass có thể trước hoặc sau biến mặc định. Tuy nhiên, khi ghi đè các tệp Sass, việc ghi đè của bạn phải đến trước khi bạn nhập tệp Sass của Bootstrap .

Các biến mặc định có sẵn trong node_modules/bootstrap/scss/variables.scss.

— Gianpiero
nguồn
0

Bootstrap 5

Đối với bootstrap 5, bạn chỉ có thể truy cập tệp scss chính của mình và thêm:

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

hoặc bất kỳ thay đổi nào bạn muốn thực hiện ...

Và đừng quên import bootstrap ngay sau đây.

Tệp main.scss cuối cùng của bạn sẽ trông như thế này:

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


@import "~node_modules/bootstrap/scss/bootstrap";
— user4264972
nguồn
-4

Kể từ Bootstrap 4, bạn có thể dễ dàng thay đổi màu chính của Bootstrap bằng cách tải xuống tệp CSS đơn giản trên BootstrapColor.net . Bạn không cần biết SASS và tệp CSS đã sẵn sàng để sử dụng cho trang web của bạn. Bạn có thể chọn màu bạn muốn như xanh lam, chàm, tím, hồng, đỏ, cam, vàng, xanh lá cây, màu mòng két hoặc màu lục lam.

— Alex01
nguồn
2
Đó là nghĩa đen là màu sắc duy nhất mà bạn có thể lựa chọn, như bootstrapcolor.net đã chỉ đơn giản là biên dịch lại bootstrap với một màu chính mới hardcoded trong.
— Quantum7
-7
  • Bạn không thể thay đổi màu trong tệp cdn.
  • Tải xuống tệp bootstrap.
  • Tìm kiếm tệp bootstrap.css.
  • mở tệp (bootstrsap.css) này và tìm kiếm 'chính'.
  • thay đổi nó thành màu sắc mà bạn mong muốn.
— Sourav
nguồn
1
Điều này không thực sự hiệu quả. Việc thay đổi trực tiếp CSS Bootstrap là không tốt. Thay vào đó, hãy thêm ghi đè CSS trong một tệp riêng theo sau bootstrap.css. Ngoài ra, việc thay đổi tất cả các -primarytham chiếu màu thành cùng một màu sẽ làm mất các biến thể dự kiến ​​về màu viền, di chuột, hoạt động, v.v. vì chúng là biến thể của màu nền chính.
— Zim
@Zim yupp giải pháp của bạn có vẻ khái quát hơn, cảm ơn!
— Sourav
-8

Đây là một giải pháp rất dễ dàng.

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

thay thế lớp bg-dark bằng bg-custom .

Trong CSS

.bg-custom {
  background-color: red;
}
— Rob
nguồn
2
Điều này không trả lời câu hỏi, hãy đọc kỹ câu hỏi.
— Munim Munna
-14

Có, tôi khuyên bạn nên mở tệp .css, kiểm tra trang và tìm mã màu bạn muốn thay đổi và Tìm Tất cả và Thay thế (tùy thuộc vào trình soạn thảo văn bản của bạn) thành màu bạn muốn. Làm điều đó với tất cả các màu bạn muốn thay đổi

— Jonas Sideravičius
nguồn
3
Đây thực sự không phải là một phương pháp hay nhất. Chắc chắn nó sẽ hoạt động, nhưng bất cứ khi nào bạn nâng cấp khung công tác, các thay đổi của bạn sẽ biến mất (và bạn phải lặp lại quy trình mỗi lần. Mỗi lần bạn nâng cấp) - Thay vào đó, hãy sử dụng công cụ tùy biến ( getbootstrap.com/customize ) hoặc thêm tùy chỉnh của bạn thay đổi vào một tập tin .css riêng (trọng các lớp bạn muốn ghi đè)
— blurfus
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.