सीएसएस बूटस्ट्रैप अपने स्वयं के सीएसएस

Question

ओवरराइड करता है मैं अपनी वेबसाइट (एएसपीएनईटी वेबफॉर्म) में एक स्प्लिट-बटन बनाने की कोशिश कर रहा हूं। अब तक एकमात्र स्प्लिट-बटन कार्यान्वयन मुझे बूटस्ट्रैप से एक है। मैं उनके ढांचे की किसी अन्य सुविधा का उपयोग नहीं कर रहा हूं। हालांकि, जैसे ही मैं सम्मिलित करता हूं:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> 

मेरा स्वयं का सीएसएस एक गड़बड़ है। मैंने स्प्लिटबटन के लिए केवल कक्षाओं को अलग करने की कोशिश की, लेकिन मैं इसे सफलतापूर्वक करने में सक्षम नहीं था।

यह requiered कक्षाएं

साथ SplitButton के लिए मेरे एचटीएमएल कोड है

<div class="btn-group"> 
          <button type="button" onclick="NewPost();return false;" class="btn btn-primary">Enviar</button> 
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button> 
          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Enviar con notificaciones</a></li> 
          </ul> 
        </div> 

किसी को इच्छा वर्गों को अलग करने के लिए एक तरह से पता है? या मुझे एक स्प्लिटबटन के दूसरे कार्यान्वयन के लिए इंगित किया जा सकता है जो इस और क्रॉस-ब्राउज़र के समान है? मैंने बहुत कुछ googled लेकिन मुझे पाया केवल एकमात्र उपयोग करने योग्य बूटस्ट्रैप था।

Answer 1

अंगूठे का एक अच्छा नियम। हमेशा स्टाइलशीट को उन नियमों के साथ रखें जिन्हें आप सबसे अधिक आधिकारिक होना चाहते हैं। आपके पास शायद

<link rel="stylesheet" href="/css/mystyles.css"> 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> 

तो बूटस्ट्रैप सीएसएस में घोषित कोई भी शैली आपके ओवरराइड कर देगी। इसके बजाय

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"> 
<link rel="stylesheet" href="/css/mystyles.css"> 

इस प्रकार आपके स्टाइलशीट में नियमों की अधिक प्राथमिकता है।

इसके अलावा, आप बूटस्ट्रैप के minified संस्करण का उपयोग न करने से बेहतर हो सकते हैं ताकि आप किसी भी विरोधाभासी कक्षाओं को आसानी से हटा सकें।

Answer 2

आप सामान आप की जरूरत टॉगल getbootstrap.com http://getbootstrap.com/customize/

पर कस्टमाइज़र पर जाएँ:

तो आप इसे डाउनलोड।

आप इसे खोलें। आधार शैलियों और वैश्विक बॉक्स आकार का चयन करें: सीमा-बॉक्स।

या तो आप अपने सभी सीएसएस को बॉक्स-साइजिंग के साथ काम करने के लिए बदलते हैं: सीमा-बॉक्स (इसे Google), या आप इसे पहले से:: के बाद, और तत्वों के लिए आवश्यक सभी बूटस्ट्रैप सीएसएस पर तत्व डालते हैं, बटन, और ड्रॉपडाउन (वे एक साथ काम करते हैं)।

Answer 3

इस पृष्ठ पर अन्य समाधान में उल्लेख किया है, वहाँ की तरह तरीके हैं: बूटस्ट्रैप वेबसाइट

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

1. , पृष्ठ

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

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

आप http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ या https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity पर सीएसएस शैलियों की विशिष्टता पर एक नज़र

एक उदाहरण हो सकता है हो सकता है,

#mypage .btn { 
    background: red; 
} 

जहां के रूप में एक शैली

.btn { 
    background: red; 
} 

लेखन, mypage हो सकता है पृष्ठ पर अभिभावक-अधिकांश तत्व की एक आईडी (बॉडी टैग हो सकती है?)। यह आपके स्टाइल नियमों को बूटस्ट्रैप सीएसएस में परिभाषित किए गए लोगों की तुलना में अधिक विशिष्ट बना देगा, वे अब आपके ओवरराइड करने में सक्षम नहीं होंगे।

कृपया ध्यान दें कि उपरोक्त कोड स्निपेट सिर्फ एक उदाहरण है, और आप निश्चित रूप से कारण के लिए बेहतर शैलियों को लिख सकते हैं।

Answer 4

अपनी स्टाइलशीट को आखिरी आयातित सीएसएस फ़ाइल बनाएं।

Answer 5

मुझे यकीन है कि अगर यह अपने प्रश्न वास्तव में जवाब देंगे नहीं कर रहा हूँ, लेकिन मैं क्या मेरे सभी बी एस 3 परियोजनाओं में क्या है:

मेरी शीर्ष लेख में:

<link rel="stylesheet" href="custom.css"> 

में custom.css

@import boostrap.less // or the fully compiled bootstrap css 
// all your custom stuff, overrides, etc. down here 

इस तरह हम पहले बूस्टर को लोड करते हैं लेकिन कुछ कस्टम जो आप चाहते हैं ओ आखिरी बार लोड हो जाएगा जिसका अर्थ ओवरराइडिंग की संभावना अधिक है और संघर्ष नहीं करेगा। इसके अलावा यह एक लाइन है और आपके <head>

Answer 6

के लिए बहुत साफ है, इसलिए बीएस घटकों को बाहर निकालने के लिए इतना आसान उपयोग करें, जिनकी आपको आवश्यकता नहीं है। Bootstrap.min.css फ़ाइल को संकलित और छोटा करें और फिर इसे अपने स्टाइलशीट में आयात करें:

@import url ("bootstrap.min.css"); शीर्ष पर। फिर अपने एचटीएमएल में बस अपना सीएसएस शामिल करें और इन्हें बाद में पढ़ा जाएगा।