स्टाइलिंग ट्विटर बूटस्ट्रैप बटन

Question

ट्विटर-बूटस्ट्रैप बटन बेहद खूबसूरत हैं। उन पर स्क्रॉल करके उन्हें आज़माएं

लेकिन वे रंगों में सीमित हैं।

क्या कोई ऐसा तरीका है जिससे मैं सुंदर होवर-ओवर प्रभाव को बनाए रखते हुए बटन के आधार रंग को बदल सकता हूं जो कि बूटस्ट्रैप ने बहुत सुंदर और सरल बना दिया है?

मैं पूरी तरह से इस बात से अनभिज्ञ हूँ कि उन प्रभावों को बनाए रखने के लिए css / javascript क्या दिखता है जो ट्विटर उपयोग करता है।

Comments

बटन की कम परिभाषा खोजें और संपादित करें। फिर CSS को recompile करें lessc। सीधे CSS फाइलों को संपादित न करें! यह बनाए रखने योग्य नहीं है।

— nalply

Answer 1

असल में, ट्विटर बूटस्ट्रैप के बटन CSS में ".btn {}" द्वारा नियंत्रित किए जाते हैं। आपको क्या करना है, सीएसएस फ़ाइल पर जाएं और जहां यह "बीटीएन" कहता है और रंग सेटिंग्स बदलें। हालाँकि, यह करना इतना आसान नहीं है, क्योंकि आपको यह भी बदलना है कि बटन को बदलते समय बटन किस रंग में बदल जाता है, आदि। ऐसा करने के लिए, आपको सीएसएस जैसे अन्य टैग के लिए देखना होगा। ".btn: hover {} ", आदि।

इसे बदलने के लिए CSS को बदलने की आवश्यकता है। यहाँ उस फ़ाइल का एक त्वरित लिंक दिया गया है:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Comments

यह एक विशेष रूप से सुंदर समाधान नहीं है। कृपया अन्य समाधानों का उपयोग करें, जो LESS पर आधारित हैं। या उनकी वेबसाइट पर चर संपादक के माध्यम से बूटस्ट्रैप को अनुकूलित करें।

— जेस्पर

बस इसे ओवरराइड करें ... अंत में अपने सीएसएस को लोड करने से आपको समस्या को हल करने में मदद मिल सकती है .. बूटस्ट्रैप के समान

— कलश

हाँ, मैं निश्चित रूप से bootstrap.css को संशोधित करने के खिलाफ हूँ। जैमिन ने कहा, बस इसे ओवरराइड करें।

— टिम लुडविंस्की

Answer 2

मैंने पाया कि इसका सबसे सरल तरीका यह है कि आप इसे ओवरराइड करें। मेरी अकल्पनीय रंग पसंद के लिए क्षमा करें

बूटस्ट्रैप 4-अल्फा एसएएसएस

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

बूटस्ट्रैप 4 अल्फा एसएएस उदाहरण

बूटस्ट्रैप 3 लेस

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

बूटस्ट्रैप 3 कम उदाहरण

बूटस्ट्रैप 3 SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

बूटस्ट्रैप 3 SASS उदाहरण

बूटस्ट्रैप 2.3 लेस

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

बूटस्ट्रैप 2.3 कम उदाहरण

बूटस्ट्रैप 2.3 SASS

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

यह आपके लिए हॉवर / एक्टिविटीज का ध्यान रखेगा

टिप्पणियों से, यदि आप काले रंग का उपयोग करते समय अंधेरे के बजाय बटन को हल्का करना चाहते हैं (या बस उलटा करना चाहते हैं) तो आपको कक्षा को थोड़ा और आगे बढ़ाने की आवश्यकता है:

बूटस्ट्रैप 3 SASS लिगथेन

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

बूटस्ट्रैप 3 SASS लाइटन उदाहरण

Comments

आप सर शानदार हैं।

— बेसरात

आप इसे scss में कैसे अनुवादित करेंगे?

— ड्रेफज

फिर lesscअपने परिवर्तनों को CSS में संकलित करने के लिए चलाएँ ।

— nalply

Dreyfuzz मैं scss का उपयोग नहीं करता, लेकिन 3rd पार्टी सैस बूटस्ट्रैप्स को देखकर ऐसा लगता है कि आप .btn-primary {@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); }अपने चर को उचित रूप से बदल देंगे (भयानक प्रारूपण के लिए खेद है)

— chrisan

मैं मिल .buttonBackground is undefined in main.lessमैं अपने कम समय में कुछ भी शामिल करने के लिए की जरूरत है?

— हिमालय मजुमदार

Answer 3

आप अपनी सीएसएस में रंगों को ओवरराइट कर सकते हैं, उदाहरण के लिए डेंजर बटन:

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

Comments

मुझे लगता है कि आपको स्टाइल करने की आवश्यकता है :focusऔर आप :activeभी, या फिर कभी-कभी आपको क्लिक / ड्रग्स पर अजीब रंग मिलते हैं ...

— साइमन ईस्ट

सरल, मुझे यह पसंद है।

— नीनो acकोपैक

उन लोगों के लिए जिन्हें यह खोज के माध्यम से मिला था, और जब आप एक बटन पर क्लिक और ड्रैग करते हैं, तो आपको एक डिफ़ॉल्ट रंग मिल रहा है, आपको .btn-primary:active:focus {उस मामले को चुनने और ओवरराइड करने की आवश्यकता है

— शेन रेस्टेल

Answer 4

यहाँ एक अच्छा संसाधन है: http://charliepark.org/bootstrap_buttons/

आप रंग बदल सकते हैं और कार्रवाई में प्रभाव देख सकते हैं।

Comments

यह एक विन्यासकर्ता है। यदि आप ग्राहक के लिए एक प्रोटोटाइप बनाने की जल्दी में हैं तो यह आसान है। हालांकि लंबी अवधि में बनाए रखने योग्य नहीं है। अगर विन्यासकर्ता गायब हो जाए तो क्या होगा? इसलिए असली चीज़ के लिए, lesscएक बेहतर उपाय है।

— nalply

इस समाधान से प्यार करें, हालांकि मैं चाहता हूं कि सटीक रंग प्राप्त करने के लिए आरजीबी / आरजीबीए में प्रवेश करने का एक तरीका था।

— सेड्रिक

@ वैमानिक रूप से बहुत कम है यदि आप पहले से ही उस कदम को प्राप्त कर रहे हैं, लेकिन यह "कॉन्फ़िगरेशन" सीएसएस उत्पन्न करने के लिए आवश्यक सब कुछ करता है। इसमें गिराओ और जाओ। उसके बाद आपको विन्यासकर्ता की आवश्यकता नहीं होगी।

— मूडबॉम

Answer 5

यदि आप बूटस्ट्रैप.css (संस्करण 3) लोड करने के बाद पहले से ही अपनी स्वयं की कस्टम CSS फ़ाइल लोड कर रहे हैं, तो आप इन 2 CSS शैलियों को अपने custom.css में जोड़ सकते हैं और वे डिफ़ॉल्ट बटन शैली के लिए बूटस्ट्रैप डिफॉल्ट को ओवरराइड कर देंगे।

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

.btn
{
  background-color: #9F418F;
  border-color: #9F418F;
}

Answer 6

एक-एक करके CSS मानों को बदलने के बजाय मैं LESS का उपयोग करने का सुझाव दूंगा। बूटस्ट्रैप का Github पर LESS संस्करण है: https://github.com/twbs/bootstrap

लेस आपको रंगों को बदलने के लिए चर को परिभाषित करने की अनुमति देता है जो इसे बहुत अधिक सुविधाजनक बनाता है। एक बार रंग को परिभाषित करें और LESS CSS फ़ाइल को संकलित करता है जो विश्व स्तर पर मूल्यों को बदलता है। समय और प्रयास बचाता है।

Answer 7

बूटस्ट्रैप बटन शैलियों को पूरी तरह से ओवरराइड करने के लिए, आपको गुणों की एक सूची को ओवरराइड करना होगा। नीचे दिए गए उदाहरण देखें।

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

यदि आप सभी सूचीबद्ध शैलियों का उपयोग नहीं करते हैं, तो आप बटन पर क्रिया करने में डिफ़ॉल्ट शैलियों को देखेंगे। उदाहरण के लिए एक बार जब आप बटन पर क्लिक करते हैं और बटन से माउस पॉइंटर हटाते हैं, तो आपको डिफ़ॉल्ट रंग दिखाई देगा। या बटन दबाए रखें आपको डिफ़ॉल्ट रंग दिखाई देंगे। इसलिए, मैंने सभी छद्म-शैलियों को सूचीबद्ध किया है जिन्हें ओवरराइड किया जाना है।

Comments

यह तरीका बहुत अच्छा है। यह केवल

— बूट

Answer 8

Sass के लिए बूटस्ट्रैप के लिए यह ओवरराइड है

.btn-default {

    @include button-variant($color, $background, $border);

}

आप इसके लिए स्रोत यहाँ देख सकते हैं: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0f0ee6/assets/stylesheets/bootstrap/mixins/_buttons.scs###

Answer 9

या http://twitterbootstrapbuttons.w3masters.nl/ आज़माएं । यह html कलर इनपुट के आधार पर बटन के लिए css बनाता है। बूटस्ट्रैप सीएसएस के बाद सीएसएस जोड़ें। यह बटन की तीन शैलियों (प्रकाश, अंधेरे और स्पिन) प्रदान करता है।

Comments

यह एक विन्यासकर्ता (प्रकार) है। यह काफी आसान है अगर आप ग्राहक के लिए एक प्रोटोटाइप बनाने की जल्दी में हैं। हालांकि लंबी अवधि में बनाए रखने योग्य नहीं है। अगर विन्यासकर्ता गायब हो जाए तो क्या होगा? इसलिए असली चीज़ के लिए, lesscएक बेहतर उपाय है।

— nalply

Answer 10

यहाँ एक बहुत ही आसान और आसान तरीका है: अपने सीएसएस में अपनी कक्षा को उन रंगों से जोड़ें जिन्हें आप अपने बटन पर लागू करना चाहते हैं:

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

और अपने बूटस्ट्रैप बटन या लिंक में शैली जोड़ें:

<a href="xxx" class="btn btn-info my-btn">aaa</a>

Answer 11

में ट्विटर बूटस्ट्रैप बूटस्ट्रैप 3.0.0, ट्विटर बटन चौड़ी होती है। आप इसे http://getbootstrap.com/customize से कस्टमाइज़ कर सकते हैं । बटन का रंग, बॉर्डर रेडियस आदि।

इसके अलावा आप HTML कोड और अन्य कार्यक्षमता पा सकते हैं http://twitterbootstrap.org/bootstrap-css-buttons ।

बूटस्ट्रैप 2.3.2 बटन ढाल है लेकिन 3.0.0 (नया रिलीज) फ्लैट है और अधिक शांत दिखता है।

और साथ ही आप पूरे बूटस्ट्रैप लुक्स और स्टाइल को इस संसाधन को कस्टमाइज़ करने के लिए पा सकते हैं: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Answer 12

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

मैं संभवतः शामिल करने के लिए टिप्पणी करने की कोशिश करना चाहूंगा buttons.lessऔर या तो खुद को परिभाषित करूंगा, या, एक और बटन लाइब्रेरी ढूंढ सकता हूं जो मेरी परियोजना के लिए अधिक उपयुक्त है। बेशर्म प्लग: यहां एक उदाहरण है कि हमारे बटन लाइब्रेरी को टीबी के साथ मिलाना कितना आसान है: ट्विटर बूटस्ट्रैप के साथ बटन का उपयोग करना । व्यवहार में, फिर से, आप buttons.lessप्रदर्शन को बेहतर बनाने के लिए पूरी तरह से शामिल को हटाना चाहेंगे, लेकिन यह दिखाता है कि आप चीजों को "उदारता" से थोड़ा कम कैसे बना सकते हैं। मैंने यह अभ्यास अभी तक खुद नहीं किया है, लेकिन मैं कल्पना करूँगा कि आप बस लाइनों की तरह टिप्पणी करके शुरू कर सकते हैं:

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

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

Answer 13

बूटस्ट्रैप के लिए (संस्करण 3.1.1 के लिए कम से कम) और कम, आप इसका उपयोग कर सकते हैं:

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

इसमें परिभाषित किया गया है bootstrap/less/buttons.less।

Answer 14

आप पृष्ठभूमि-रंग बदल सकते हैं और उपयोग कर सकते हैं!

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}