Bagaimana cara mengubah warna primer bootstrap?

Question 1

Apakah mungkin untuk mengubah warna primer bootstrap agar sesuai dengan warna merek? Saya menggunakan tema kertas bootswatch dalam kasus saya.

Question 2

Perbarui 2020 untuk Bootstrap 4

Untuk mengubah warna primer , atau salah satu warna tema di Bootstrap 4 SASS, atur variabel yang sesuai sebelum mengimpor bootstrap.scss. Ini memungkinkan scss kustom Anda menimpa! Nilai default ...

$primary: purple;
$danger: red;

@import "bootstrap";

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

Dalam beberapa kasus, Anda mungkin ingin mengatur warna baru dari variabel Bootstrap lain yang sudah ada . Untuk @import ini fungsi dan variabel terlebih dahulu sehingga dapat direferensikan dalam penyesuaian ...

/* 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

Juga lihat: jawaban ini , jawaban ini atau mengubah warna tombol di (CSS atau SASS)

Mungkin juga untuk mengubah warna utama hanya dengan CSS tetapi membutuhkan banyak CSS tambahan karena ada banyak -primaryvariasi (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, dll. ...) dan beberapa kelas ini memiliki sedikit variasi warna pada perbatasan, hover, dan status aktif. Oleh karena itu, jika harus menggunakan CSS ada baiknya menggunakan target satu komponen seperti mengganti warna tombol utama .

Solusi ini juga akan berfungsi untuk Bootstrap 5 alpha

Question 3

ada dua cara yang bisa Anda lakukan

http://getbootstrap.com/customize/

dan ubah warna dalam penyesuaian ini dan unduh bootstrap yang disesuaikan.

Atau Anda dapat menggunakan sass dengan versi ini https://github.com/twbs/bootstrap-sass dan mengimpor di aset sass / stylesheets / _bootstrap.scss Anda tetapi sebelum mengimpor ini Anda dapat mengubah warna variabel default

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

dan kompilasi hasilnya

Question 4

Saya telah membuat alat ini: https://lingtalfi.com/bootstrap4-color-generator , Anda cukup meletakkan primer di bidang pertama, lalu pilih warna Anda, dan klik buat.

Kemudian salin kode scss atau css yang dihasilkan, dan tempelkan di file bernama my-colors.scss atau my-colors.css (atau nama apa pun yang Anda inginkan).

Setelah Anda mengkompilasi scss ke dalam css , Anda dapat menyertakan file css itu SETELAH bootstrap CSS dan Anda akan baik-baik saja.

Seluruh proses memakan waktu sekitar 10 detik jika Anda mengerti intinya, asalkan file my-colors.scss sudah dibuat dan disertakan dalam tag head Anda.

Catatan: alat ini dapat digunakan untuk mengganti warna default bootstrap (primer, sekunder, bahaya, ...), tetapi Anda juga dapat membuat warna kustom jika Anda mau (biru, hijau, terner, ...).

Note2: alat ini dibuat untuk bekerja dengan bootstrap 4 (bukan versi selanjutnya untuk saat ini).

Question 5

Setiap elemen dengan tag 'primay' memiliki warna @ brand-primary. Salah satu opsi untuk mengubahnya adalah menambahkan file css yang disesuaikan seperti di bawah ini:

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

Luaskan cuplikan

Untuk informasi lebih lanjut tentang file css yang disesuaikan dengan bootstrap, berikut ini tautan yang membantu: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

Question 6

Bootstrap 4

Inilah yang berhasil untuk saya:

Saya membuat _custom_theme.scss file saya sendiri dengan konten yang mirip dengan:

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

Menambahkannya ke bagian atas file bootstrap.scssdan dikompilasi ulang (Dalam kasus saya, saya memilikinya di folder bernama! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

Question 7

Ini mungkin pertanyaan yang agak lama, tetapi saya ingin membagikan cara terbaik yang saya temukan untuk menyesuaikan bootstrap. Ada alat online bernama bootstrap.build https://bootstrap.build/app . Ini berfungsi dengan baik dan tidak perlu instalasi atau pengaturan alat bangunan!

Question 8

Cara yang benar untuk mengubah warna primer default di Bootstrap 4.x menggunakan SASS, atau warna lain seperti sekunder, sukses, dan sebagainya.

Buat file SASS berikut dan impor Bootstrap SASS seperti yang ditunjukkan:

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

Question 9

Menggunakan SaSS
mengubah warna merek

$brand-primary:#some-color;

ini akan mengubah warna utama di semua UI.

Menggunakan css-
misalkan Anda ingin mengubah warna primer tombol. Jadi

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

cari elemen dan tambahkan aturan css / sass baru di file baru dan lampirkan setelah Anda memuat css bootstrap.

Question 10

Aturan bootstrap 4

Sebagian besar jawaban di sini kurang lebih benar, tetapi semuanya memiliki beberapa masalah (untuk saya). Jadi, akhirnya, googleing saya menemukan prosedur yang benar, seperti yang dinyatakan dalam dokumen bootstrap khusus: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Mari kita asumsikan bootstrap diinstal node_modules/bootstrap.

A. Buat your_bootstrap.scssfile Anda :

@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. Dalam folder yang sama, buat _your_variables_theme.scssfile.

C. Sesuaikan variabel bootstrap dalam _your_variables_theme.scssfile dengan mengikuti aturan ini:

Salin dan tempel variabel dari yang _variables.scssdiperlukan, ubah nilainya, dan hapus tanda! Default . Jika variabel telah ditetapkan, maka variabel tidak akan ditetapkan kembali oleh nilai default di Bootstrap.

Penggantian variabel dalam file Sass yang sama dapat terjadi sebelum atau sesudah variabel default. Namun, saat menimpa file Sass, penggantian Anda harus dilakukan sebelum Anda mengimpor file Sass Bootstrap .

Variabel default tersedia di node_modules/bootstrap/scss/variables.scss.

Question 11

Bootstrap 5

Untuk bootstrap 5 Anda bisa pergi ke file scss utama Anda dan menambahkan:

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

atau perubahan apa pun yang ingin Anda buat ...

Dan jangan lupa untuk mengimpor bootstrap setelahnya.

File main.scss terakhir Anda akan terlihat seperti ini:

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


@import "~node_modules/bootstrap/scss/bootstrap";

Question 12

Sejak Bootstrap 4 Anda dapat dengan mudah mengubah warna utama Bootstrap Anda dengan mengunduh file CSS sederhana di BootstrapColor.net . Anda tidak perlu tahu SASS dan file CSS siap digunakan untuk situs web Anda. Anda bisa memilih warna yang diinginkan seperti biru, nila, ungu, pink, merah, orange, kuning, hijau, teal atau cyan.

Question 13

Anda tidak dapat mengubah warna dalam file cdn.
Unduh file bootstrap.
Cari file bootstrap.css.
buka file (bootstrsap.css) ini dan cari 'primer'.
ubah ke warna yang Anda inginkan.

Question 14

Ini adalah solusi yang sangat mudah.

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

ganti kelas bg-dark, dengan bg-custom .

Di CSS

.bg-custom {
  background-color: red;
}

Question 15

Ya, saya sarankan untuk membuka file .css, periksa halaman dan temukan kode warna yang ingin Anda ubah dan Temukan Semua dan Ganti (tergantung pada editor teks Anda) ke warna yang Anda inginkan. Lakukan itu dengan semua warna yang ingin Anda ubah

Answer 1

93

Apakah mungkin untuk mengubah warna primer bootstrap agar sesuai dengan warna merek? Saya menggunakan tema kertas bootswatch dalam kasus saya.

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 ashishjmeshram.dll
sumber

1

Kemungkinan duplikat dari Cara mengubah warna

btn

Ya, timpa saja di file CSS khusus Anda, tetapi Anda harus menerapkan banyak aturan berbeda untuk setiap elemen, dan statusnya (aktif, arahkan kursor, fokus, dll.)

Lee

3

Alih-alih menimpa CSS, saya sarankan untuk menggunakan alat penyesuaian getbootstrap.com/customize

blurfus

Answer 2

1

Kemungkinan duplikat dari Cara mengubah warna

btn

Answer 3

Ya, timpa saja di file CSS khusus Anda, tetapi Anda harus menerapkan banyak aturan berbeda untuk setiap elemen, dan statusnya (aktif, arahkan kursor, fokus, dll.)

Lee

Answer 4

3

Alih-alih menimpa CSS, saya sarankan untuk menggunakan alat penyesuaian getbootstrap.com/customize

blurfus

Answer 5

Perbarui 2020 untuk Bootstrap 4

Untuk mengubah warna primer , atau salah satu warna tema di Bootstrap 4 SASS, atur variabel yang sesuai sebelum mengimpor bootstrap.scss. Ini memungkinkan scss kustom Anda menimpa! Nilai default ...

$primary: purple;
$danger: red;

@import "bootstrap";

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

Dalam beberapa kasus, Anda mungkin ingin mengatur warna baru dari variabel Bootstrap lain yang sudah ada . Untuk @import ini fungsi dan variabel terlebih dahulu sehingga dapat direferensikan dalam penyesuaian ...

/* 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

Juga lihat: jawaban ini , jawaban ini atau mengubah warna tombol di (CSS atau SASS)

Mungkin juga untuk mengubah warna utama hanya dengan CSS tetapi membutuhkan banyak CSS tambahan karena ada banyak -primaryvariasi (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, dll. ...) dan beberapa kelas ini memiliki sedikit variasi warna pada perbatasan, hover, dan status aktif. Oleh karena itu, jika harus menggunakan CSS ada baiknya menggunakan target satu komponen seperti mengganti warna tombol utama .

Solusi ini juga akan berfungsi untuk Bootstrap 5 alpha

Answer 6

Bagi mereka yang baru SASS dan SCSS seperti saya ... silahkan periksa npm's gulpuntuk menyelesaikan langkah kompilasi.

Chris Conlan

Answer 7

2

@Risu Mengapa? Skrip build npm Bootstrap disertakan dengan sumbernya. Lihat di file package.json untuk daftar lengkapnya.

John E

Answer 8

1

Bukan pengembang front-end. Seperti yang diberitahukan oleh dokumen tema saya. Saya akan menghapus jika itu tidak masuk akal.

Chris Conlan

Answer 9

Jadi menggunakan CDN hanya membutuhkan perubahan CSS ( versi lama-primer ) saya curiga?

Erik Philips

Answer 10

Bagi kita yang cuek SASS, dimana setting $ primary value dan mengeluarkan import "bootstrap" ;?

Steven Frank

Answer 11

ada dua cara yang bisa Anda lakukan

http://getbootstrap.com/customize/

dan ubah warna dalam penyesuaian ini dan unduh bootstrap yang disesuaikan.

Atau Anda dapat menggunakan sass dengan versi ini https://github.com/twbs/bootstrap-sass dan mengimpor di aset sass / stylesheets / _bootstrap.scss Anda tetapi sebelum mengimpor ini Anda dapat mengubah warna variabel default

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

dan kompilasi hasilnya

Answer 12

5

apakah tersedia tinta kustom untuk Bootstrap 4?

Er. Amit Joshi

Answer 13

1

Anda harus menghilangkan yang !defaultbendera kecuali ada file gaya kustom lain yang memberikan alasan untuk tidak.

John E

Answer 14

Saya telah membuat alat ini: https://lingtalfi.com/bootstrap4-color-generator , Anda cukup meletakkan primer di bidang pertama, lalu pilih warna Anda, dan klik buat.

Kemudian salin kode scss atau css yang dihasilkan, dan tempelkan di file bernama my-colors.scss atau my-colors.css (atau nama apa pun yang Anda inginkan).

Setelah Anda mengkompilasi scss ke dalam css , Anda dapat menyertakan file css itu SETELAH bootstrap CSS dan Anda akan baik-baik saja.

Seluruh proses memakan waktu sekitar 10 detik jika Anda mengerti intinya, asalkan file my-colors.scss sudah dibuat dan disertakan dalam tag head Anda.

Catatan: alat ini dapat digunakan untuk mengganti warna default bootstrap (primer, sekunder, bahaya, ...), tetapi Anda juga dapat membuat warna kustom jika Anda mau (biru, hijau, terner, ...).

Note2: alat ini dibuat untuk bekerja dengan bootstrap 4 (bukan versi selanjutnya untuk saat ini).

Answer 15

Saya harus memindahkan impor boostrap setelah CSS yang dihasilkan ini untuk membuatnya berfungsi. Alat yang bagus, terima kasih.

deanwilliammills

Answer 16

Anda adalah seorang pahlawan, +1

Mustafa Erdogan

Answer 17

Setiap elemen dengan tag 'primay' memiliki warna @ brand-primary. Salah satu opsi untuk mengubahnya adalah menambahkan file css yang disesuaikan seperti di bawah ini:

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

Luaskan cuplikan

Untuk informasi lebih lanjut tentang file css yang disesuaikan dengan bootstrap, berikut ini tautan yang membantu: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

Answer 18

6

Bootstrap 4

Inilah yang berhasil untuk saya:

Saya membuat _custom_theme.scss file saya sendiri dengan konten yang mirip dengan:

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

Menambahkannya ke bagian atas file bootstrap.scssdan dikompilasi ulang (Dalam kasus saya, saya memilikinya di folder bernama! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

Rauland
sumber

2

Ini adalah pendekatan yang benar, sebagaimana dinyatakan dalam getbootstrap.com/docs/4.0/getting-started/theming

Gianpiero

@rauland Bagaimana Anda mengkompilasi ulang? Apakah pendekatan yang sama ini diikuti dalam kasus bootstrap 3?

Umair

1

Hai @Umair, saya menggunakan Visual Studio dengan ekstensi Web Compiler oleh Mads Kristensen. Ia menambahkan compilerconfig.json ke solusi saya di mana saya mendefinisikan cara mengkompilasi setiap file .scss, menentukan input .scss dan file .css output. Info lebih lanjut: github.com/madskristensen/WebCompiler

Rauland

1

mis .: (asp.net pada .Net core) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "

Rauland

Answer 19

2

Ini adalah pendekatan yang benar, sebagaimana dinyatakan dalam getbootstrap.com/docs/4.0/getting-started/theming

Gianpiero

Answer 20

@rauland Bagaimana Anda mengkompilasi ulang? Apakah pendekatan yang sama ini diikuti dalam kasus bootstrap 3?

Umair

Answer 21

1

Hai @Umair, saya menggunakan Visual Studio dengan ekstensi Web Compiler oleh Mads Kristensen. Ia menambahkan compilerconfig.json ke solusi saya di mana saya mendefinisikan cara mengkompilasi setiap file .scss, menentukan input .scss dan file .css output. Info lebih lanjut: github.com/madskristensen/WebCompiler

Rauland

Answer 22

1

mis .: (asp.net pada .Net core) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "

Rauland

Answer 23

Ini mungkin pertanyaan yang agak lama, tetapi saya ingin membagikan cara terbaik yang saya temukan untuk menyesuaikan bootstrap. Ada alat online bernama bootstrap.build https://bootstrap.build/app . Ini berfungsi dengan baik dan tidak perlu instalasi atau pengaturan alat bangunan!

Answer 24

Cara yang benar untuk mengubah warna primer default di Bootstrap 4.x menggunakan SASS, atau warna lain seperti sekunder, sukses, dan sebagainya.

Buat file SASS berikut dan impor Bootstrap SASS seperti yang ditunjukkan:

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

Answer 25

Menggunakan SaSS
mengubah warna merek

$brand-primary:#some-color;

ini akan mengubah warna utama di semua UI.

Menggunakan css-
misalkan Anda ingin mengubah warna primer tombol. Jadi

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

cari elemen dan tambahkan aturan css / sass baru di file baru dan lampirkan setelah Anda memuat css bootstrap.

Answer 26

Aturan bootstrap 4

Sebagian besar jawaban di sini kurang lebih benar, tetapi semuanya memiliki beberapa masalah (untuk saya). Jadi, akhirnya, googleing saya menemukan prosedur yang benar, seperti yang dinyatakan dalam dokumen bootstrap khusus: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Mari kita asumsikan bootstrap diinstal node_modules/bootstrap.

A. Buat your_bootstrap.scssfile Anda :

@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. Dalam folder yang sama, buat _your_variables_theme.scssfile.

C. Sesuaikan variabel bootstrap dalam _your_variables_theme.scssfile dengan mengikuti aturan ini:

Salin dan tempel variabel dari yang _variables.scssdiperlukan, ubah nilainya, dan hapus tanda! Default . Jika variabel telah ditetapkan, maka variabel tidak akan ditetapkan kembali oleh nilai default di Bootstrap.

Penggantian variabel dalam file Sass yang sama dapat terjadi sebelum atau sesudah variabel default. Namun, saat menimpa file Sass, penggantian Anda harus dilakukan sebelum Anda mengimpor file Sass Bootstrap .

Variabel default tersedia di node_modules/bootstrap/scss/variables.scss.

Answer 27

Bootstrap 5

Untuk bootstrap 5 Anda bisa pergi ke file scss utama Anda dan menambahkan:

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

atau perubahan apa pun yang ingin Anda buat ...

Dan jangan lupa untuk mengimpor bootstrap setelahnya.

File main.scss terakhir Anda akan terlihat seperti ini:

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


@import "~node_modules/bootstrap/scss/bootstrap";

Answer 28

-4

Sejak Bootstrap 4 Anda dapat dengan mudah mengubah warna utama Bootstrap Anda dengan mengunduh file CSS sederhana di BootstrapColor.net . Anda tidak perlu tahu SASS dan file CSS siap digunakan untuk situs web Anda. Anda bisa memilih warna yang diinginkan seperti biru, nila, ungu, pink, merah, orange, kuning, hijau, teal atau cyan.

Alex01
sumber

2

Hanya itu warna yang dapat Anda pilih, karena bootstrapcolor.net baru saja mengompilasi ulang bootstrap dengan warna primer baru yang di-hardcode.

Quantum7

Answer 29

2

Hanya itu warna yang dapat Anda pilih, karena bootstrapcolor.net baru saja mengompilasi ulang bootstrap dengan warna primer baru yang di-hardcode.

Quantum7

Answer 30

-7

Anda tidak dapat mengubah warna dalam file cdn.
Unduh file bootstrap.
Cari file bootstrap.css.
buka file (bootstrsap.css) ini dan cari 'primer'.
ubah ke warna yang Anda inginkan.

Sourav
sumber

1

Ini tidak benar-benar berhasil. Bukan praktik yang baik untuk mengubah CSS Bootstrap secara langsung. Sebagai gantinya, tambahkan penggantian CSS dalam file terpisah yang mengikuti bootstrap.css. Juga, mengubah semua itu dengan -primaryreferensi warna dengan warna yang sama akan kehilangan variasi dimaksudkan di perbatasan, hover, aktif, dll .. warna karena mereka variasi warna latar belakang utama.

Zim

@Zim yupp, solusi Anda tampaknya lebih digeneralisasikan, terima kasih!

Sourav

Answer 31

1

Ini tidak benar-benar berhasil. Bukan praktik yang baik untuk mengubah CSS Bootstrap secara langsung. Sebagai gantinya, tambahkan penggantian CSS dalam file terpisah yang mengikuti bootstrap.css. Juga, mengubah semua itu dengan -primaryreferensi warna dengan warna yang sama akan kehilangan variasi dimaksudkan di perbatasan, hover, aktif, dll .. warna karena mereka variasi warna latar belakang utama.

Zim

Answer 32

@Zim yupp, solusi Anda tampaknya lebih digeneralisasikan, terima kasih!

Sourav

Answer 33

-8

Ini adalah solusi yang sangat mudah.

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

ganti kelas bg-dark, dengan bg-custom .

Di CSS

.bg-custom {
  background-color: red;
}

rampok
sumber

2

Ini tidak menjawab pertanyaan, baca pertanyaannya dengan cermat.

Munim Munna

Answer 34

2

Ini tidak menjawab pertanyaan, baca pertanyaannya dengan cermat.

Munim Munna

Answer 35

-14

Ya, saya sarankan untuk membuka file .css, periksa halaman dan temukan kode warna yang ingin Anda ubah dan Temukan Semua dan Ganti (tergantung pada editor teks Anda) ke warna yang Anda inginkan. Lakukan itu dengan semua warna yang ingin Anda ubah

Jonas Sideravičius
sumber

3

Ini sebenarnya bukan praktik terbaik. Tentu itu akan berhasil, tetapi setiap kali Anda meningkatkan kerangka kerja, perubahan Anda akan hilang (dan Anda harus mengulangi proses setiap kali Anda melakukan peningkatan) - Sebagai gantinya, gunakan alat penyesuai ( getbootstrap.com/customize ) atau tambahkan perubahan khusus Anda ke file .css terpisah (menimpa kelas yang ingin Anda timpa)

blurfus

Answer 36

3

Ini sebenarnya bukan praktik terbaik. Tentu itu akan berhasil, tetapi setiap kali Anda meningkatkan kerangka kerja, perubahan Anda akan hilang (dan Anda harus mengulangi proses setiap kali Anda melakukan peningkatan) - Sebagai gantinya, gunakan alat penyesuai ( getbootstrap.com/customize ) atau tambahkan perubahan khusus Anda ke file .css terpisah (menimpa kelas yang ingin Anda timpa)

blurfus

Bagaimana cara mengubah warna primer bootstrap?

Jawaban:

Aturan bootstrap 4