Önyükleme ana rengi nasıl değiştirilir?

Question 1

Bootstrap ana rengini marka rengine uyacak şekilde değiştirmek mümkün müdür? Benim durumumda bootswatch'ın kağıt temasını kullanıyorum.

Question 2

Bootstrap 4 için 2020 Güncellemesi

Değiştirmek için birincil veya herhangi bir tema renkleri Bootstrap 4 SUKDÖ'nün içinde, uygun değişkenler set önce ithal bootstrap.scss. Bu, özel scss'inizin! Varsayılan değerleri geçersiz kılmasına izin verir ...

$primary: purple;
$danger: red;

@import "bootstrap";

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

Bazı durumlarda, başka bir mevcut Bootstrap değişkeninden yeni bir renk ayarlamak isteyebilirsiniz . Bunun için, önce işlevleri ve değişkenleri içe aktarın, böylece özelleştirmelerde başvurulabilirler ...

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

Ayrıca bakınız: bu cevap , bu cevap veya düğme rengini değiştirme (CSS veya SASS)

Birincil rengi yalnızca CSS ile değiştirmek de mümkündür, ancak birçok -primaryvaryasyon olduğundan (btn-birincil, uyarı-birincil, bg-birincil, metin-birincil, tablo-birincil, sınır-birincil vb.) Çok fazla ek CSS gerektirir. ...) ve bu sınıflardan bazılarının sınırlar, imleç üzerine gelme ve aktif durumlarda hafif renk varyasyonları vardır. Bu nedenle, CSS kullanmanız gerekiyorsa, birincil düğme rengini değiştirmek gibi bir hedef bileşeni kullanmak daha iyidir .

Bu çözümler ayrıca Bootstrap 5 alpha için de çalışacaktır

Question 3

gidebileceğin iki yol var

http://getbootstrap.com/customize/

ve bu ayarlamalarda rengi değiştirin ve özelleştirilmiş önyüklemeyi indirin.

Veya sass'ı https://github.com/twbs/bootstrap-sass sürümüyle birlikte kullanabilir ve sass varlıklarınıza / stil sayfalarına / _bootstrap.scss'e aktarabilirsiniz, ancak bunu içe aktarmadan önce varsayılan değişken renkleri değiştirebilirsiniz.

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

ve sonucu derleyin

Question 4

Bu aracı oluşturdum: https://lingtalfi.com/bootstrap4-color-generator , basitçe ilk alana birincil yazıp ardından renginizi seçip oluştur'a tıklayın.

Ardından oluşturulan scss veya css kodunu kopyalayın ve my-colours.scss veya my-colours.css (veya istediğiniz adı) adlı bir dosyaya yapıştırın.

Eğer bir kez css içine SCSS derlemek , bu css dosyası içerebilir SONRA önyükleme CSS ve gitmek iyi olacak.

My-colours.scss dosyasının önceden oluşturulmuş ve head etiketinize eklenmiş olması koşuluyla, özünü alırsanız tüm süreç yaklaşık 10 saniye sürer .

Not: Bu araç, önyükleme sisteminin varsayılan renklerini (birincil, ikincil, tehlike, ...) geçersiz kılmak için kullanılabilir, ancak isterseniz özel renkler de oluşturabilirsiniz (mavi, yeşil, üçlü, ...).

Not2: Bu araç önyükleme 4 ile çalışmak üzere yapılmıştır (yani şimdilik sonraki sürümleri değil).

Question 5

"Primay" etiketli herhangi bir öğe color @ brand-primary'e sahiptir. Değiştirmek için seçeneklerden biri, aşağıdaki gibi özelleştirilmiş bir css dosyası eklemektir:

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

Snippet'i genişlet

Bootstrap ile özelleştirilmiş css dosyaları hakkında daha fazla bilgi için, işte yararlı bir bağlantı: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

Question 6

Önyükleme 4

Bu benim için çalıştı:

_custom_theme.scss Şuna benzer içerikle kendi dosyamı oluşturdum :

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

Dosyanın üstüne bootstrap.scssekledim ve yeniden derledim (Benim durumumda onu! Scss adlı bir klasörün içindeydim)

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

Question 7

Bu biraz eski bir soru olabilir, ancak önyüklemeyi özelleştirmek için bulduğum en iyi yolu paylaşmak istiyorum. bootstrap.build Https://bootstrap.build/app adında çevrimiçi bir araç var . Harika çalışıyor ve kurulum veya yapım araçları kurulumu gerektirmiyor!

Question 8

Bootstrap 4.x'teki varsayılan birincil rengi SASS kullanarak veya ikincil, başarı gibi diğer renkleri değiştirmenin doğru yolu.

Aşağıdaki SASS dosyasını oluşturun ve Bootstrap SASS'ı belirtildiği gibi içe aktarın:

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

SaSS kullanarak
marka rengini değiştirin

$brand-primary:#some-color;

bu, ana rengi tüm kullanıcı arayüzünde değiştirecektir.

Css kullanarak - Diyelim
ki düğme ana rengini değiştirmek istiyorsunuz.

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

öğeyi arayın ve yeni bir dosyaya yeni bir css / sass kuralı ekleyin ve bootstrap css'i yükledikten sonra bunu ekleyin.

Question 10

Bootstrap 4 kuralları

Buradaki cevapların çoğu aşağı yukarı doğru, ancak hepsinde bazı sorunlar var (benim için). Son olarak, googleing, özel önyükleme belgesinde belirtildiği gibi doğru prosedürü buldum: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Bootstrap'in kurulu olduğunu varsayalım node_modules/bootstrap .

A. your_bootstrap.scssDosyanızı oluşturun :

@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. Aynı klasörde, _your_variables_theme.scss dosyayı oluşturun.

C. _your_variables_theme.scssBu kuralları izleyerek dosyadaki önyükleme değişkenlerini özelleştirin :

Değişkenleri _variables.scssgerektiği gibi kopyalayıp yapıştırın , değerlerini değiştirin ve! Default bayrağını kaldırın . Bir değişken zaten atanmışsa, Bootstrap'teki varsayılan değerler tarafından yeniden atanmayacaktır.

Aynı Sass dosyası içindeki değişken geçersiz kılmaları, varsayılan değişkenlerden önce veya sonra gelebilir. Ancak, Sass dosyaları arasında geçersiz kılınırken, Bootstrap'in Sass dosyalarını içe aktarmadan önce geçersiz kılmalarınızın gelmesi gerekir .

Varsayılan değişkenler mevcuttur node_modules/bootstrap/scss/variables.scss.

Question 11

Önyükleme 5

Bootstrap 5 için ana scss dosyanıza gidip şunları ekleyebilirsiniz:

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

ya da yapmak istediğin değişiklikler ...

Ve hemen sonra bootstrap'i içe aktarmayı unutmayın.

Son main.scss dosyanız şöyle görünmelidir:

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


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

Question 12

Bootstrap 4 yana yapabilirsiniz kolayca Bootstrap birincil rengini değiştirmek basit bir CSS dosyasını indirerek BootstrapColor.net . SASS'yi bilmenize gerek yoktur ve CSS dosyası web siteniz için kullanıma hazırdır. Mavi, indigo, mor, pembe, kırmızı, turuncu, sarı, yeşil, turkuaz veya camgöbeği gibi istediğiniz rengi seçebilirsiniz.

Question 13

Cdn dosyasında rengi değiştiremezsiniz.
Bootstrap dosyasını indirin.
Bootstrap.css dosyasını arayın.
bu (bootstrsap.css) dosyasını açın ve 'birincil' için arama yapın.
istediğiniz renge değiştirin.

Question 14

Bu çok kolay bir çözüm.

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

bg-dark sınıfını bg-custom ile değiştirin .

CSS'de

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

Question 15

Evet, .css dosyasını açmanızı, sayfayı incelemenizi ve değiştirmek istediğiniz renk kodunu bulmanızı ve Tümünü Bul ve Değiştir (metin düzenleyicinize bağlı olarak) istediğiniz renge ulaşmanızı öneririm. Bunu değiştirmek istediğin tüm renklerle yap