खोज…


टिप्पणियों

ध्यान देने वाली बात यह है कि किसी को custom.css नाम का उल्लेख मुख्य bootstrap.css के बाद करना होगा, अन्यथा custom.css के मान वास्तव में लागू नहीं होंगे।

डिफ़ॉल्ट सीएसएस ओवरराइडिंग

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

मेल सीएसएस फ़ाइल है कि हम ओवरराइड करने की आवश्यकता है boostrap.min.css तहत boostrap/dist/css निर्देशिका।

बूस्टरैप के डिफ़ॉल्ट डिज़ाइन को ओवरराइड करने के लिए इस 2 आसान चरणों का पालन करें।

  1. एक 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>
    
  2. कस्टमाइज़ करना शुरू करें। उदाहरण के लिए हम डिफ़ॉल्ट बटन का रंग बदलना चाहते हैं। यदि आप बूटस्ट्रैप की डिफ़ॉल्ट बटन शैली का उपयोग करना चाहते हैं, तो आपको btn वर्ग को अपने <button class="btn">Sample</button> टैग पर जोड़ना होगा। बस अपने custom.css पर निम्न कोड लिखें।

    .btn{
        background-color:red;
    }
    

    उपरोक्त कोड कुछ इस तरह का उत्पादन करेगा।

    चूक :

    यहाँ छवि विवरण दर्ज करें

    कस्टम:

    यहाँ छवि विवरण दर्ज करें

यह तकनीक हमें संपूर्ण बटन शैलियों को फिर से लिखने से बचाएगा जो पहले से ही बूस्टर योगदानकर्ताओं द्वारा लिखी गई थी। इसने हमें अपने स्वयं के सीएसएस वर्ग को लिखने से भी बचाया जो मेरे लिए कम थकाऊ है।



Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow