क्या ब्रांड के रंग से मेल करने के लिए बूटस्ट्रैप प्राथमिक रंग बदलना संभव है? मैं अपने मामले में बूटवॉच के पेपर थीम का उपयोग कर रहा हूं।
क्या ब्रांड के रंग से मेल करने के लिए बूटस्ट्रैप प्राथमिक रंग बदलना संभव है? मैं अपने मामले में बूटवॉच के पेपर थीम का उपयोग कर रहा हूं।
जवाबों:
बूटस्ट्रैप 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
संकलन चरण को पूरा करने के लिए।
ऐसे दो तरीके हैं जिनसे आप जा सकते हैं
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;
और परिणाम संकलित करें
!default
जब तक वहाँ अन्य कस्टम शैली फ़ाइलों को नहीं करने के लिए एक कारण दे रहे हैं झंडे।
मैंने यह टूल बनाया है: https://lingtalfi.com/bootstrap4-color-generator , आप बस पहले क्षेत्र में प्राथमिक रखें, फिर अपना रंग चुनें, और जनरेट पर क्लिक करें।
फिर जेनरेट किए गए scss या css कोड को कॉपी करें, और इसे my-colors.scss या my-colors.css (या जो भी नाम आप चाहते हैं) नामक फाइल में पेस्ट करें।
एक बार जब आप scss को css में संकलित कर लेते हैं, तो आप बूटस्ट्रैप CSS के बाद उस css फ़ाइल को शामिल कर सकते हैं और आप जाना पसंद करेंगे।
यदि आपको इसका सार मिलता है तो पूरी प्रक्रिया में लगभग 10 सेकंड लगते हैं, बशर्ते कि my-colors.scss फ़ाइल पहले से ही बनाई गई हो और आपके हेड टैग में शामिल हो।
नोट: इस उपकरण का उपयोग बूटस्ट्रैप के डिफ़ॉल्ट रंगों (प्राथमिक, द्वितीयक, खतरे, ...) को ओवरराइड करने के लिए किया जा सकता है, लेकिन आप चाहें तो कस्टम रंग भी बना सकते हैं (नीला, हरा, त्रिनेत्र, ...)।
नोट 2: इस टूल को बूटस्ट्रैप 4 के साथ काम करने के लिए बनाया गया था (अर्थात अब के लिए कोई बाद वाला संस्करण नहीं)।
'प्राइम' टैग के साथ किसी भी तत्व का रंग @ ब्रांड-प्राथमिक है। इसे बदलने के लिए विकल्पों में से एक नीचे की तरह एक अनुकूलित सीएसएस फ़ाइल जोड़ रहा है:
.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/ ।
बूटस्ट्रैप ४
इसी से मेरा काम बना है:
मैंने अपनी _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";
यह थोड़ा पुराना सवाल हो सकता है, लेकिन मैं बूटस्ट्रैप को अनुकूलित करने के लिए सबसे अच्छा तरीका साझा करना चाहता हूं। bootstrap.build
Https://bootstrap.build/app नामक एक ऑनलाइन टूल है । यह महान काम करता है और कोई स्थापना या निर्माण उपकरण सेटअप की आवश्यकता नहीं है!
बूटस्ट्रैप 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";
SaSS के उपयोग
से ब्रांड का रंग बदल जाता है
$brand-primary:#some-color;
यह सभी UI के प्राथमिक रंग को बदल देगा।
Css-
मान लें कि आप बटन को प्राथमिक रंग बदलना चाहते हैं
btn.primary{
background:#some-color;
}
तत्व को खोजें और एक नई फ़ाइल में एक नया सीएसएस / एसएएस नियम जोड़ें और यू को बूटस्ट्रैप सीएसएस के बाद संलग्न करें।
यहां अधिकांश उत्तर कमोबेश सही हैं, लेकिन उनमें से सभी कुछ मुद्दों (मेरे लिए) के साथ हैं। इसलिए, अंत में, 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
।
बूटस्ट्रैप ५
बूटस्ट्रैप 5 के लिए आप केवल मुख्य scss फ़ाइल में जा सकते हैं और जोड़ सकते हैं:
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
या आप जो भी परिवर्तन करना चाहते हैं ...
और सही के बाद बूटस्ट्रैप आयात करना न भूलें।
आपकी अंतिम main.scss फ़ाइल को इस तरह दिखना चाहिए:
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
@import "~node_modules/bootstrap/scss/bootstrap";
यह मेरे लिए बूटस्ट्रैप 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";
बूटस्ट्रैप 4 जब से तुम कर सकते हैं आसानी से अपने बूटस्ट्रैप के प्राथमिक रंग बदलने पर एक साधारण सीएसएस फ़ाइल डाउनलोड करके BootstrapColor.net । आपको SASS को जानने की आवश्यकता नहीं है और CSS फ़ाइल आपकी वेबसाइट के लिए उपयोग करने के लिए तैयार है। आप मनचाहा रंग चुन सकते हैं जैसे नीला, इंडिगो, बैंगनी, गुलाबी, लाल, नारंगी, पीला, हरा, चैती या सियान रंग।
-primary
एक ही रंग के लिए रंग संदर्भ क्योंकि वे प्राथमिक पृष्ठभूमि रंग का एक परिवर्तन कर रहे हैं सीमा, मंडराना, सक्रिय, आदि .. रंगों पर इरादा रूपों खो देगा।
यह बहुत ही आसान उपाय है।
<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>
वर्ग बीजी-डार्क को बदलें, बीजी-कस्टम के साथ ।
सीएसएस में
.bg-custom {
background-color: red;
}
हाँ, मेरा सुझाव है कि .css फ़ाइल को खोलें, पृष्ठ का निरीक्षण करें और उस रंग कोड को खोजें जिसे आप परिवर्तित करना चाहते हैं और जिस रंग को आप चाहते हैं, उसके आधार पर सभी और बदलें (अपने पाठ संपादक के आधार पर) खोजें। उस सभी रंगों के साथ करें जिसे आप बदलना चाहते हैं