बूटस्ट्रैप प्राथमिक रंग कैसे बदलें?


97

क्या ब्रांड के रंग से मेल करने के लिए बूटस्ट्रैप प्राथमिक रंग बदलना संभव है? मैं अपने मामले में बूटवॉच के पेपर थीम का उपयोग कर रहा हूं।



हां, बस अपनी कस्टम CSS फ़ाइल में इसे ओवरराइड करें, लेकिन आपको प्रत्येक तत्व के लिए कई नियम लागू करने होंगे, और उनके राज्य (सक्रिय, होवर, फ़ोकस आदि)
ली '

3
CSS को ओवरराइड करने के बजाय, मैं कस्टमाइज़िंग टूल getbootstrap.com/customize
blurfus

जवाबों:


100

बूटस्ट्रैप 4 के लिए 2020 अपडेट करें

बदलने के लिए प्राथमिक , या किसी भी का विषय रंग बूटस्ट्रैप 4 एस.ए.एस.एस. में, उचित चर सेट से पहले का आयात bootstrap.scss। यह आपके कस्टम स्कैस को डिफ़ॉल्ट मानों को ओवरराइड करने की अनुमति देता है ...

$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


यह भी देखें: यह उत्तर , यह उत्तर या (सीएसएस या एसएएस) में बटन का रंग बदलना


केवल सीएसएस के साथ प्राथमिक रंग बदलना संभव है, लेकिन इसके लिए बहुत सीएसएस की आवश्यकता है क्योंकि कई -primaryभिन्नताएं हैं (बीटीएन-प्राथमिक, सतर्क-प्राथमिक, बीजी-प्राथमिक, पाठ-प्राथमिक, टेबल-प्राथमिक, सीमा-प्राथमिक, आदि। ...) और इनमें से कुछ वर्गों में सीमाओं, होवर और सक्रिय राज्यों पर मामूली रंग भिन्नताएं हैं। इसलिए, यदि आपको CSS का उपयोग करना चाहिए तो लक्ष्य एक घटक का उपयोग करना बेहतर है जैसे कि प्राथमिक बटन रंग बदलना ।

ये समाधान बूटस्ट्रैप 5 अल्फा के लिए भी काम करेंगे


एस.ए.एस.एस. के लिए नए उन और एससीएसएस जैसे मैं था ... बाहर की जाँच के लिए कृपया npm's gulpसंकलन चरण को पूरा करने के लिए।
क्रिस कॉनलन

2
@ क्रिस क्यों? बूटस्ट्रैप की npm बिल्ड स्क्रिप्ट स्रोत के साथ शामिल हैं। पूरी सूची के लिए package.json फ़ाइल में देखें।
जॉन ई

1
फ्रंट-एंड डेवलपर नहीं। बस मेरे विषय के डॉक्स ने मुझे क्या बताया। अगर कोई मतलब नहीं है तो मैं हटा दूंगा।
क्रिस कॉनन

तो सीडीएन का उपयोग करने के लिए सीएसएस की आवश्यकता है केवल परिवर्तन ( लंबे समय तक-संस्करण ) मुझे संदेह है?
एरिक फिलिप्स

हम में से जो लोग अज्ञानी हैं, वे $ प्राथमिक मूल्य निर्धारित कर रहे हैं और आयात जारी कर रहे हैं "बूटस्ट्रैप;";
स्टीवन फ्रैंक

29

ऐसे दो तरीके हैं जिनसे आप जा सकते हैं

http://getbootstrap.com/customize/ 

और इस समायोजन में रंग बदलें और बूटस्ट्रैप को अनुकूलित करें।

या आप इस संस्करण के साथ sass का उपयोग कर सकते हैं https://github.com/twbs/bootstrap-sass और आयात करें

//== 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
क्या बूटस्ट्रैप 4 के लिए कोई अनुकूलित स्याही उपलब्ध है?
एर। अमित जोशी

1
आप छोड़ देना चाहिए!default जब तक वहाँ अन्य कस्टम शैली फ़ाइलों को नहीं करने के लिए एक कारण दे रहे हैं झंडे।
जॉन ई

17

मैंने यह टूल बनाया है: https://lingtalfi.com/bootstrap4-color-generator , आप बस पहले क्षेत्र में प्राथमिक रखें, फिर अपना रंग चुनें, और जनरेट पर क्लिक करें।

फिर जेनरेट किए गए scss या css कोड को कॉपी करें, और इसे my-colors.scss या my-colors.css (या जो भी नाम आप चाहते हैं) नामक फाइल में पेस्ट करें।

एक बार जब आप scss को css में संकलित कर लेते हैं, तो आप बूटस्ट्रैप CSS के बाद उस css फ़ाइल को शामिल कर सकते हैं और आप जाना पसंद करेंगे।

यदि आपको इसका सार मिलता है तो पूरी प्रक्रिया में लगभग 10 सेकंड लगते हैं, बशर्ते कि my-colors.scss फ़ाइल पहले से ही बनाई गई हो और आपके हेड टैग में शामिल हो।

नोट: इस उपकरण का उपयोग बूटस्ट्रैप के डिफ़ॉल्ट रंगों (प्राथमिक, द्वितीयक, खतरे, ...) को ओवरराइड करने के लिए किया जा सकता है, लेकिन आप चाहें तो कस्टम रंग भी बना सकते हैं (नीला, हरा, त्रिनेत्र, ...)।

नोट 2: इस टूल को बूटस्ट्रैप 4 के साथ काम करने के लिए बनाया गया था (अर्थात अब के लिए कोई बाद वाला संस्करण नहीं)।


मुझे यह काम करने के लिए सीएसएस के उत्पन्न होने के बाद बूस्टर आयात को स्थानांतरित करना पड़ा। महान उपकरण धन्यवाद।
deanwilliammills

6

'प्राइम' टैग के साथ किसी भी तत्व का रंग @ ब्रांड-प्राथमिक है। इसे बदलने के लिए विकल्पों में से एक नीचे की तरह एक अनुकूलित सीएसएस फ़ाइल जोड़ रहा है:

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

बूटस्ट्रैप के साथ अनुकूलित सीएसएस फ़ाइलों के बारे में अधिक जानकारी के लिए, यहां एक उपयोगी लिंक दिया गया है: https://bootstrapbay.com/blog/bootstrap-button-styles/


6

बूटस्ट्रैप ४

इसी से मेरा काम बना है:

मैंने अपनी _custom_theme.scss फ़ाइल उसी तरह की सामग्री के साथ बनाई है:

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

इसे फ़ाइल के शीर्ष पर जोड़ा bootstrap.scssऔर recompiled (मेरे मामले में मैंने इसे एक फ़ोल्डर में बुलाया था! Scss)

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

2
यह सही दृष्टिकोण है, जैसा कि getbootstrap.com/docs/4.0/getting-started/theming
Gianpiero

@ फिर से कैसे करें? क्या बूटस्ट्रैप 3 के मामले में भी यही दृष्टिकोण अपनाया जाता है?
उमैर

1
हाय @Uair, मैं Mads Kristensen द्वारा एक्सटेंशन वेब कम्पाइलर के साथ विजुअल स्टूडियो का उपयोग करता हूं। यह मेरे समाधान के लिए एक compilerconfig.json जोड़ता है जहां मैं परिभाषित करता हूं कि प्रत्येक .scss फ़ाइल को कैसे संकलित किया जाए, इनपुट .cscs और आउटपुट .css फ़ाइल को निर्दिष्ट करना। अधिक जानकारी: github.com/madskristensen/WebCompiler
राउलंड

1
जैसे: (asp.net on .Net core) "inputFile": "wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss", "outputFile": "wwwroot \\ lib\ बूटस्ट्रैप \\ dist \\ css \\ bootstrap.css "
राउलंड

3

यह थोड़ा पुराना सवाल हो सकता है, लेकिन मैं बूटस्ट्रैप को अनुकूलित करने के लिए सबसे अच्छा तरीका साझा करना चाहता हूं। bootstrap.build Https://bootstrap.build/app नामक एक ऑनलाइन टूल है । यह महान काम करता है और कोई स्थापना या निर्माण उपकरण सेटअप की आवश्यकता नहीं है!


2

बूटस्ट्रैप 4.x में SASS का उपयोग करके डिफ़ॉल्ट प्राथमिक रंग बदलने का सही तरीका, या किसी अन्य रंग जैसे माध्यमिक, सफलता और इतने पर।

निम्न SASS फ़ाइल बनाएँ और संकेत के अनुसार बूटस्ट्रैप 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";

1

SaSS के उपयोग
से ब्रांड का रंग बदल जाता है

$brand-primary:#some-color;

यह सभी UI के प्राथमिक रंग को बदल देगा।

Css-
मान लें कि आप बटन को प्राथमिक रंग बदलना चाहते हैं

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

तत्व को खोजें और एक नई फ़ाइल में एक नया सीएसएस / एसएएस नियम जोड़ें और यू को बूटस्ट्रैप सीएसएस के बाद संलग्न करें।


0

बूटस्ट्रैप 4 नियम

यहां अधिकांश उत्तर कमोबेश सही हैं, लेकिन उनमें से सभी कुछ मुद्दों (मेरे लिए) के साथ हैं। इसलिए, अंत में, Googleing मुझे सही प्रक्रिया मिली, जैसा कि समर्पित बूटस्ट्रैप डॉक्टर में कहा गया है: 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आवश्यकतानुसार चर को कॉपी और पेस्ट करें , उनके मूल्यों को संशोधित करें और डिफ़ॉल्ट फ्लैग को हटा दें । यदि एक चर पहले से ही असाइन किया गया है, तो वह बूटस्ट्रैप में डिफ़ॉल्ट मानों द्वारा पुन: असाइन नहीं किया जाएगा।

वैरिएबल ओवरराइड एक ही सैस फ़ाइल के भीतर या डिफ़ॉल्ट चर के पहले या बाद में आ सकता है। हालाँकि, जब आप Sass फ़ाइलों को ओवरराइड करते हैं, तो बूटस्ट्रैप की Sass फ़ाइलों को आयात करने से पहले आपके ओवरराइड्स को आना चाहिए

डिफ़ॉल्ट चर में उपलब्ध हैं node_modules/bootstrap/scss/variables.scss


0

बूटस्ट्रैप ५

बूटस्ट्रैप 5 के लिए आप केवल मुख्य scss फ़ाइल में जा सकते हैं और जोड़ सकते हैं:

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

या आप जो भी परिवर्तन करना चाहते हैं ...

और सही के बाद बूटस्ट्रैप आयात करना न भूलें।

आपकी अंतिम main.scss फ़ाइल को इस तरह दिखना चाहिए:

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


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

0

यह मेरे लिए बूटस्ट्रैप v5 अल्फा 3 में काम करने लगता है

_variables-overrides.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";

-3

बूटस्ट्रैप 4 जब से तुम कर सकते हैं आसानी से अपने बूटस्ट्रैप के प्राथमिक रंग बदलने पर एक साधारण सीएसएस फ़ाइल डाउनलोड करके BootstrapColor.net । आपको SASS को जानने की आवश्यकता नहीं है और CSS फ़ाइल आपकी वेबसाइट के लिए उपयोग करने के लिए तैयार है। आप मनचाहा रंग चुन सकते हैं जैसे नीला, इंडिगो, बैंगनी, गुलाबी, लाल, नारंगी, पीला, हरा, चैती या सियान रंग।


2
वस्तुतः वे ही रंग हैं जिन्हें आप चुन सकते हैं, क्योंकि bootstrapcolor.net ने एक नए प्राथमिक रंग के साथ बूटस्ट्रैप को फिर से हार्डकोड किया है।
क्वांटम

सुपर आसान समाधान!
मासिमोई

-7
  • आप cdn फ़ाइल में रंग नहीं बदल सकते।
  • बूटस्ट्रैप फ़ाइल डाउनलोड करें।
  • Bootstrap.css फ़ाइल के लिए खोजें।
  • यह (bootstrsap.css) फ़ाइल खोलें और 'प्राथमिक' खोजें।
  • इसे अपनी इच्छानुसार रंग में बदलें।

1
यह वास्तव में काम नहीं करता है। बूटस्ट्रैप सीएसएस को सीधे बदलने के लिए यह अच्छा अभ्यास नहीं है। इसके बजाय CSS ओवरराइड्स को बूटस्ट्रैप.css के बाद एक अलग फाइल में जोड़ें। इसके अलावा, बदल रहा है सब-primary एक ही रंग के लिए रंग संदर्भ क्योंकि वे प्राथमिक पृष्ठभूमि रंग का एक परिवर्तन कर रहे हैं सीमा, मंडराना, सक्रिय, आदि .. रंगों पर इरादा रूपों खो देगा।
जिम

@Zim आपका समाधान अधिक सामान्यीकृत लगता है धन्यवाद!
सौरव

-8

यह बहुत ही आसान उपाय है।

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

वर्ग बीजी-डार्क को बदलें, बीजी-कस्टम के साथ

सीएसएस में

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

2
यह प्रश्न का उत्तर नहीं देता है, प्रश्न को ध्यान से पढ़ें।
मुनीम मुन्ना

-14

हाँ, मेरा सुझाव है कि .css फ़ाइल को खोलें, पृष्ठ का निरीक्षण करें और उस रंग कोड को खोजें जिसे आप परिवर्तित करना चाहते हैं और जिस रंग को आप चाहते हैं, उसके आधार पर सभी और बदलें (अपने पाठ संपादक के आधार पर) खोजें। उस सभी रंगों के साथ करें जिसे आप बदलना चाहते हैं


3
यह वास्तव में एक सर्वोत्तम अभ्यास नहीं है। निश्चित रूप से यह काम करेगा, लेकिन जब भी आप फ्रेमवर्क को अपग्रेड करते हैं, तो आपके परिवर्तन गायब हो जाएंगे (और आपको हर बार प्रक्रिया को दोहराना होगा । एक बार जब आप अपग्रेड करते हैं) - इसके बजाय, कस्टमाइज़र टूल का उपयोग करें ( getbootstrap.com/customize ) या जोड़ें आपका कस्टम एक अलग .css फ़ाइल में परिवर्तित हो जाता है (उन कक्षाओं को ओवरराइड करना, जिन्हें आप ओवरराइड करना चाहते हैं)
ब्लरफस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.