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

Question 1

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

Question 2

बूटस्ट्रैप 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 अल्फा के लिए भी काम करेंगे

Question 3

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

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;

और परिणाम संकलित करें

Question 4

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

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

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

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

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

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

Question 5

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

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

Question 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";

Question 7

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

Question 8

बूटस्ट्रैप 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";

Question 9

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

$brand-primary:#some-color;

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

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

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

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

Question 10

बूटस्ट्रैप 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।

Question 11

बूटस्ट्रैप ५

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

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

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

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

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

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


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

Question 12

यह मेरे लिए बूटस्ट्रैप 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";

Question 13

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

Question 14

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

Question 15

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

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

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

सीएसएस में

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

Question 16

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