बूटस्ट्रैप में बीटीएन रंग कैसे बदलें

Question

क्या .btnबूटस्ट्रैप में सभी गुणों को बदलने का एक तरीका है ? मैंने नीचे लोगों की कोशिश की है, लेकिन फिर भी कभी-कभी यह डिफ़ॉल्ट नीला रंग दिखाता है (माउस आदि को क्लिक करने और हटाने के बाद)। मैं पूरी थीम को पूरी तरह से कैसे बदल सकता हूं?

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2;
}

Comments

आप बस override_default.css बना सकते हैं और इसे तत्काल अगली पंक्ति में बूटस्ट्रैप लाइब्रेरी सीएसएस में शामिल कर सकते हैं, और फिर आप कुछ भी ओवरराइड करने के लिए स्वतंत्र हैं।

— कला-प्रशंसक-विक्रम

Answer 1

यह देखने का सबसे आसान तरीका है कि आपको कौन से गुणों को ओवरराइड करने की आवश्यकता है, बूटस्ट्रैप के स्रोत कोड पर एक नज़र डालना है , विशेष रूप से मिश्रण / बटन.button-variant में परिभाषित मिश्रण । स्टाइलिंग के सभी (जैसे , ड्रॉपडाउन में उपयोग आदि) से छुटकारा पाने के लिए आपको अभी भी बहुत सारे गुणों को ओवरराइड करने की आवश्यकता है ।.btn-primary:focusdisabled

एक बेहतर तरीका यह हो सकता है:

1. बूटस्ट्रैप के ऑनलाइन अनुकूलन उपकरण का उपयोग करके बूटस्ट्रैप का अपना स्वयं का अनुकूलित संस्करण बनाएं
2. मैन्युअल रूप से अपना खुद का रंग वर्ग बनाएं, जैसे .btn-whatever
3. एक कम संकलक का उपयोग करें और .button-variantअपने स्वयं के रंग वर्ग, जैसे बनाने के लिए मिक्सर का उपयोग करें.btn-whatever

Comments

मुझे भी लगता है कि बूटस्ट्रैप का एक अनुकूलित संस्करण बनाना इस बारे में जाने का आदर्श तरीका होना चाहिए, क्योंकि इसमें बहुत सारे गुण बदलने पड़ सकते हैं। धन्यवाद।

— सैम

चरण 3 में - मैं .btn-Primary का उपयोग करने पर LESS मिक्सिन बनाने की कोशिश करता हूं, लेकिन: होवर काम नहीं कर रहा है। मुझे हॉवर स्थिति को कैसे मिलाया जाना चाहिए?

— येवगेनी अफानासयेव

Answer 2

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

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
    background-color: #8064A2 !important;
}

मुझे उम्मीद है कि यह आपके लिए काम करेगा।

Comments

!importantमहत्वपूर्ण था!

— cdonts

बूटस्ट्रैप को संशोधित करने का यह एक अच्छा तरीका नहीं है, परिवर्तन अपने स्वयं के कस्टम बूटस्ट्रैप सीएसएस का निर्माण करते समय कम या सैस चर के माध्यम से किया जाना चाहिए।

— टिम

यदि आप अपने कस्टम स्टाइल शीट से लिंक करने से पहले बस बूटस्ट्रैप से लिंक करते हैं तो आपकी कस्टम स्टाइल शीट पूर्ववर्ती हो जाएगी।

— dillon.harless

Answer 3

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

अब जब बूटस्ट्रैप 4 एसएएस का उपयोग करता है, तो आप आसानी से मिश्रण का उपयोग करके प्राथमिक बटन रंग बदल सकते हैं button-variant:

$mynewcolor:#77cccc;

.btn-primary {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}
    
.btn-outline-primary {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

https://codeply.com/go/2bHYxYSC0n ( SASS डेमो )

यह एसएसएस निम्नलिखित सीएसएस में संकलित करता है ...

.btn-primary {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:hover {
    color: #212529;
    background-color: #52bebe;
    border-color: #8ad3d3
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-primary.disabled,
.btn-primary:disabled {
    color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
    color: #212529;
    background-color: #9cdada;
    border-color: #2e7c7c
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(91, 194, 194, 0.5)
}

.btn-outline-primary {
    color: #7cc;
    background-color: transparent;
    background-image: none;
    border-color: #7cc
}

.btn-outline-primary:hover {
    color: #222;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
    color: #7cc;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
    color: #212529;
    background-color: #8ad3d3;
    border-color: #7cc
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(119, 204, 204, 0.5)
}

https://codeply.com/go/lD3tUE01lo ( CSS डेमो )

---

सभी वर्गों के लिए प्राथमिक रंग बदलने के लिए देखें: बूटस्ट्रैप सीएसएस टेम्पलेट को अनुकूलित करना और बूटस्ट्रैप प्राथमिक रंग को कैसे बदलना है?

Comments

इस पोस्ट ने मुझे एक बैंगनी बटन बनाने में मदद की जैसा कि बूटस्ट्रैप के होम पेज में देखा गया है।

— priyamtheone

और मेरे जैसे धीमी गति से काम करने के लिए, ध्यान दें कि आपको अपने बूटस्ट्रैप को आयात करने के बाद ओवरराइडिंग करने की आवश्यकता है, क्योंकि उस आयात में वह सामान शामिल है जिसके बारे में आप शामिल हैं। और फिर से परिभाषित करें।

— फिल्माया गया

Answer 4

मुझे लगता है कि आप .btn-primary:focusसंपत्ति और अल्पविराम को भूल गए हैं इसके बाद .btn-primary

भी आप कम उपयोग कर सकते हैं और चर में कुछ रंगों को फिर से परिभाषित कर सकते हैं। फाइल

को ध्यान में रखते हुए आपका कोड इस तरह दिखाई देगा:

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #8064A2;
    border-color: #8064A2;
}

Comments

फिर सीमा का रंग है, जो अभी भी नीला है। मुझे लगता है कि इसके लिए जाने का तरीका कम है, है ना?

— सैम

आप सीमा को फिर से परिभाषित कर सकते हैं।

— शिमशोन ज़िखरेव

रंग बदलने से पहले मुझे पृष्ठभूमि की छवि भी बदलनी थी: background-image: -webkit-linear-gradient(top,#8064A2 0,#8064A2 100%);या background-image: none;।

— शार्प नोव

Answer 5

बस अपना खुद का बटन बनाएं:

• http://blog.koalite.com/bbg/
• अपने boottrap.min.css के अंत में सीएसएस जोड़ें

चियर्स

Comments

यह अच्छा और सरल है

— उल्लू 3

Answer 6

आपने एक शैली ".btn-प्राथमिक: सक्रिय: फ़ोकस" को याद किया है, जो कि बीटीएन के दौरान अभी भी डिफ़ॉल्ट बूटस्ट्रैप रंग एक दूसरे के लिए दिखाते हैं। यह मेरे कोड में काम करता है:

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited, .btn-primary:focus, .btn-primary:active:focus {
background-color: #8064A2;}

Comments

आपने देखा कि समस्या दूसरों की नहीं थी, लेकिन यह मेरे लिए इसे ठीक नहीं करता है।

— स्टीव लॉटेंसग्लर

Answer 7

"बीटीएन-सक्सेस" जैसे बटन कलर क्लास को हटा दें और "बीटीएन-कस्टम" जैसी कस्टम क्लास लगाएं और उस क्लास के लिए सीएसएस लिखें। वह बस मेरे लिए काम करता है।

HTML :

<button class="btn btn-block login " type="submit">Sign In</button>

CSS:

 .login  {
    background-color: #0057fc;
    color: white;   
}

Answer 8

सबसे सरल तरीका यह है:

1) हर बटन राज्य को अवरोधन

2) !importantराज्यों को ओवरराइड करने के लिए जोड़ें

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: black !important;
  border-color: black !important;
}

---

अधिक व्यावहारिक यूआई तरीका मूल राज्य की तुलना में बटन की होवर स्थिति को गहरा बनाने के लिए है:

.btn-primary {
  background-color: Blue !important;
  border-color: Blue !important;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
  background-color: DarkBlue !important;
  border-color: DarkBlue !important;
}

Answer 9

यहाँ मेरा स्वाद हॉवर के बिना है। मैं व्यक्तिगत रूप से इसे मानक बूटस्ट्रैप संक्रमण से बेहतर पसंद करता हूं।

.btn-primary,
.btn-primary:active,
.btn-primary:visited {
  background-color: #8064A2 !important;
}

.btn-primary:hover {
  background-color: #594671 !important;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary">Hover me!</button>

Answer 10

मैं हाल ही में इसी तरह की समस्या में चला गया था, और कक्षाओं को जोड़ने के साथ इसे ठीक करने में कामयाब रहा

  body .btn-primary {
    background-color: #7bc143;
    border-color: #7bc143;
    color: #FFF; }
    body .btn-primary:hover, body .btn-primary:focus {
      border-color: #6fb03a;
      background-color: #6fb03a;
      color: #FFF; }
    body .btn-primary:active, body .btn-primary:visited, body .btn-primary:active:focus, body .btn-primary:active:hover {
      border-color: #639d34;
      background-color: #639d34;
      color: #FFF; }

[विकलांग] और [विकलांग]: मंडराने पर भी ध्यान दें, यदि इस वर्ग का उपयोग इनपुट [type = submit] पर किया जाता है। ऐशे ही:

body .btn-primary[disabled], body .btn-primary[disabled]:hover {
  background-color: #7bc143;
  border-color: #7bc143; }

Answer 11

मुझे लगता है कि प्रयोग !importantकरना बहुत बुद्धिमान विकल्प नहीं है। साइट को उत्तरदायी बनाते समय यह कई अन्य मुद्दों के लिए विशेष रूप से कारण हो सकता है। तो, मेरी समझ यह है कि, .btnबूटस्ट्रैप क्लास के साथ कस्टम बटन CSS क्लास का उपयोग करने का सबसे अच्छा तरीका यह है । .btnबूटस्ट्रैप बटन के लिए बेस स्टाइल क्लास है। इसलिए, लेआउट के रूप में, हम अपने कस्टम सीएसएस वर्ग का उपयोग करके अन्य शैलियों को बदल सकते हैं। एक और अतिरिक्त बात जो मैं यहां बताना चाहता हूं। कुछ लोग बटन से नीली रूपरेखा निकालने की कोशिश कर रहे हैं। यह एक अच्छा विचार नहीं है क्योंकि कीबोर्ड का उपयोग करते समय वह एक्सेसिबिलिटी समस्या है। इसके बदले रंग का outline-color:उपयोग करें।

Answer 12

मेरे जैसे एसएएसएस / एससीएसएस न्यूबाय्स के लिए @ कोड-एर के उत्तर के लिए चरण-दर-चरण मार्गदर्शिका जोड़ना।

1. बचा लो btnCustom.scss।

/* import the necessary Bootstrap files */
@import 'bootstrap';

/* Define color */
$mynewcolor:#77cccc;

.btn-custom {
    @include button-variant($mynewcolor, darken($mynewcolor, 7.5%), darken($mynewcolor, 10%), lighten($mynewcolor,5%), lighten($mynewcolor, 10%), darken($mynewcolor,30%));
}

.btn-outline-custom {
    @include button-outline-variant($mynewcolor, #222222, lighten($mynewcolor,5%), $mynewcolor);
}

2. एक एस.ए.एस.एस. संकलक डाउनलोड जैसे कोआला इतना ऊपर है कि एससीएसएस फ़ाइल सीएसएस का संकलन किया जा सकता है।
3. बूटस्ट्रैप जीथब रेपो को क्लोन करें क्योंकि कंपाइलर को कहीं-कहीं बटन-वैरिएंट मिक्सिन की जरूरत होती है।
4. _bootstrap.scssनीचे फ़ाइल बनाकर स्पष्ट रूप से बूटस्ट्रैप फ़ंक्शंस आयात करें। यह संकलक को बूटस्ट्रैप फ़ंक्शंस और चर का उपयोग करने की अनुमति देगा।

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities";

5. btnCustom.scssपहले डाउनलोड किए गए कंपाइलर को css में संकलित करें ।

Answer 13

मैं इस उत्तर का ओपी नहीं हूं लेकिन इसने मेरी मदद की:

मैं अपने मुखपृष्ठ पर बूटस्ट्रैप हिंडोला के अगले / पिछले बटन का रंग बदलना चाहता था।

समाधान: बूटस्ट्रैप.css से चयनकर्ता नामों को कॉपी करें और उन्हें अपनी शैली में स्थानांतरित करें। एसएमएस (अपने स्वयं के पूर्व के साथ ..):

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 100px;
  width: 100px;
  outline: black;
  background-size: 100%, 100%;
  border-radius: 50%;
  border: 1px solid black;
  background-image: none;
}

.carousel-control-next-icon:after
{
  content: '>';
  font-size: 55px;
  color: red;
}

.carousel-control-prev-icon:after {
  content: '<';
  font-size: 55px;
  color: red;
}

Answer 14

आप उदाहरण के लिए अपनी कॉन्फ़िग फ़ाइल में बूटस्ट्रैप थीम का उपयोग करके कस्टम रंग जोड़ सकते हैं variables.scssऔर यह सुनिश्चित कर सकते हैं कि संकलन करते समय आप बूटस्ट्रैप से पहले उस फ़ाइल को आयात करें।

$theme-colors: (
    "whatever": #900
);

अब आप कर सकते हैं .btn-whatever