twitter-bootstrap
ट्विटर बूटस्ट्रैप स्टाइल अनुकूलन
खोज…
टिप्पणियों
ध्यान देने वाली बात यह है कि किसी को custom.css नाम का उल्लेख मुख्य bootstrap.css के बाद करना होगा, अन्यथा custom.css के मान वास्तव में लागू नहीं होंगे।
डिफ़ॉल्ट सीएसएस ओवरराइडिंग
ट्विटर बूटस्ट्रैप हर किसी को पसंद होता है, लेकिन हममें से कुछ इसे डिफॉल्ट डिजाइन पसंद नहीं करते। तो यहाँ एक सरल गाइड है कि कैसे बूस्टर डिजाइन को कस्टमाइज़ करना शुरू किया जाए। क्लोन होने पर ट्विटर बूस्टअप डिफ़ॉल्ट सीएसएस फ़ाइलों का एक सेट प्रदान करता है जिसे हम ओवरराइड कर सकते हैं।
मेल सीएसएस फ़ाइल है कि हम ओवरराइड करने की आवश्यकता है boostrap.min.css
तहत boostrap/dist/css
निर्देशिका।
बूस्टरैप के डिफ़ॉल्ट डिज़ाइन को ओवरराइड करने के लिए इस 2 आसान चरणों का पालन करें।
एक
custom.css
बनाएं (या आप इसे जो चाहें नाम दे सकते हैं) और इसे अपनेindex.html
से लिंक करें<html> <head> <title>Customize Bootstrap</title> <link rel="stylesheet" type="text/css" href="path/to/bootstrap.min.css"> <!-- This mus be declared after the bootstrap.min.css --> <link rel="stylesheet" type="text/css" href="path/to/your/custom.css"> </head> <body> <!-- Do something --> </body> </html>
कस्टमाइज़ करना शुरू करें। उदाहरण के लिए हम डिफ़ॉल्ट बटन का रंग बदलना चाहते हैं। यदि आप बूटस्ट्रैप की डिफ़ॉल्ट बटन शैली का उपयोग करना चाहते हैं, तो आपको
btn
वर्ग को अपने<button class="btn">Sample</button>
टैग पर जोड़ना होगा। बस अपनेcustom.css
पर निम्न कोड लिखें।.btn{ background-color:red; }
उपरोक्त कोड कुछ इस तरह का उत्पादन करेगा।
चूक :
कस्टम:
यह तकनीक हमें संपूर्ण बटन शैलियों को फिर से लिखने से बचाएगा जो पहले से ही बूस्टर योगदानकर्ताओं द्वारा लिखी गई थी। इसने हमें अपने स्वयं के सीएसएस वर्ग को लिखने से भी बचाया जो मेरे लिए कम थकाऊ है।