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

234

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

Hw क्या मैं ओवरराइड करता हूं bootstrap.cssताकि मैं एंकर / क्लास की शैली को हटा दूं ? उदाहरण के लिए, यदि मैं इसके लिए सभी स्टाइलिंग नियम निकालना चाहता हूं legend:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

मैं बस उस सभी को हटा सकता हूं bootstrap.css, लेकिन अगर सीएसएस को ओवरराइड करने की सर्वोत्तम प्रथाओं के बारे में मेरी समझ सही है, तो मुझे इसके बजाय क्या करना चाहिए?

स्पष्ट होने के लिए, मैं किंवदंती की उन सभी शैलियों को दूर करना चाहता हूं और माता-पिता के सीएसएस मूल्यों का उपयोग करना चाहता हूं। तो प्रणव के जवाब को मिलाकर, क्या मैं निम्नलिखित कार्य करूंगा?

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(मैं उम्मीद कर रहा था कि निम्नलिखित की तरह कुछ करने का एक तरीका है :)

legend {
  clear: all;
}

html css twitter-bootstrap

— एलेक्स
स्रोत

491

उपयोग करना !importantएक अच्छा विकल्प नहीं है, क्योंकि आप भविष्य में अपनी खुद की शैलियों को ओवरराइड करना चाहेंगे। जो हमें CSS प्राथमिकताओं के साथ छोड़ देता है।

मूल रूप से, प्रत्येक चयनकर्ता का अपना संख्यात्मक 'वजन' होता है:

आईडी के लिए 100 अंक
कक्षाओं और छद्म वर्गों के लिए 10 अंक
टैग चयनकर्ताओं और छद्म तत्वों के लिए 1 अंक
नोट: यदि तत्व में इनलाइन स्टाइल है जो स्वचालित रूप से जीतता है (1000 अंक)

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

आपका विकल्प बूटस्ट्रैप स्रोतों का निरीक्षण करना है, यह पता करें कि वास्तव में कुछ विशिष्ट शैली कैसे परिभाषित की गई है, और चयन करें कि आपके तत्व की समान प्राथमिकता है। लेकिन हम इस प्रक्रिया में सभी बूटस्ट्रैप मिठास को ढीला करते हैं।

इसे दूर करने का सबसे आसान तरीका है, अपने पृष्ठ के मूल तत्वों में से एक को अतिरिक्त मनमानी आईडी असाइन करना, जैसे: <body id="bootstrap-overrides">

इस तरह, आप बस अपनी आईडी के साथ किसी भी सीएसएस चयनकर्ता को उपसर्ग कर सकते हैं, तत्व में तुरंत 100 अंकों का वजन जोड़ सकते हैं, और बूटस्ट्रैप परिभाषाओं को ओवरराइड कर सकते हैं:

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}

— smugglerFlynn
स्रोत

चूंकि आईडी का उपयोग केवल एक बार किया जा सकता है, इसलिए #bootstrap-overridesकक्षा क्यों नहीं बनाई जाती ?

— छरवे

2

@chharvey: क्योंकि आप बेहतर गणना करने के लिए समाप्त होंगे। यदि यह इस उदाहरण में एक वर्ग था, तो यह prio 11 होगा और अगर css की परिभाषा bootstrap.css के बाद होगी तो हम जाना अच्छा होगा। हालांकि, यह बहुत करीब होगा और इसे एक आईडी के रूप में सेट करना होगा जो कि प्रियो बड़े समय को बढ़ाता है, हमें प्रियो की गणना और परीक्षण के बारे में चिंता करने की ज़रूरत नहीं है कि क्या हमारे पास यह हमेशा सही है। यदि आप निश्चित रूप से डिफ़ॉल्ट को ओवरराइट करना चाहते हैं तो एक आईडी के साथ आसान है।

— होगन

बस मेरा दिन बना। मैं यह जानता हूं और अभी भी यह जानने की कोशिश कर रहा हूं कि मेरी शैलियों की व्याख्या क्यों नहीं की गई।

— होगन

3

क्या आपने जिन बिंदुओं का उल्लेख किया है (आईडी के लिए 100, कक्षाओं / छद्म वर्गों के लिए 10, टैग चयनकर्ताओं / छद्म तत्वों के लिए 1) शाब्दिक, या आपने इस उदाहरण के लिए केवल उन मूल्यों को बनाया है?

— काइल वासेला

2

आपकी व्याख्या अच्छी है, यह किसी को नए तरीके से समझाने के लिए समझ में आता है, लेकिन यह भ्रामक है। आपके द्वारा उल्लिखित सही नाम css है specificityजो प्रत्येक css चयनकर्ता के "वजन" को परिभाषित करता है। यहाँ इसके बारे में कुछ और जानकारी: css-tricks.com/specifics-on-css-specificity/…

— Adriano

85

अपने html के मुख्य भाग में अपने रिस्ट को रखें। bootstrap.css के नीचे।

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

फिर custom.css में आपको उस तत्व के लिए सटीक चयनकर्ता का उपयोग करना होगा जिसे आप ओवरराइड करना चाहते हैं। इसके मामले में legendबस legendआपके custom.css में रहता है क्योंकि बूटस्ट्रैप को कोई चयनकर्ता अधिक विशिष्ट नहीं मिला है।

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

लेकिन h1उदाहरण के लिए आपको अधिक विशिष्ट चयनकर्ताओं का ध्यान रखना होगा .jumbotron h1क्योंकि

h1 {
  line-height: 2;
  color: #f00;
}

ओवरराइड नहीं करेंगे

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

यहाँ सीएसएस चयनकर्ताओं की विशिष्टता का एक सहायक अन्वेषण है जिसे आपको यह जानने के लिए समझने की आवश्यकता है कि किसी तत्व पर कौन से शैली नियम लागू होंगे। http://css-tricks.com/specifics-on-css-specificity/

बाकी सब कुछ कॉपी / पेस्ट और शैलियों को संपादित करने की बात है।

— मार्कस कोटलैंडर
स्रोत

28

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

यहां कुछ सर्वोत्तम प्रथाएं हैं जिनका मैं व्यक्तिगत रूप से पालन करता हूं:

आधार सीएसएस फ़ाइल (उत्तरदायी नहीं) के बाद हमेशा कस्टम सीएसएस लोड करें।
!importantयदि संभव हो तो उपयोग करने से बचें । यह आधार सीएसएस फ़ाइलों से कुछ महत्वपूर्ण शैलियों को ओवरराइड कर सकता है।
अगर आप मीडिया के प्रश्नों को खोना नहीं चाहते हैं तो हमेशा custom.css के बाद बूटस्ट्रैप-प्रोग्रेसिव लोड करें। - अनुकरण ज़रूर करना
आवश्यक गुणों को संशोधित करना पसंद करें (सभी नहीं)।

— राहुल पाटिल
स्रोत

10

चूंकि bootstrap-responsive.cssअब मौजूद नहीं है, क्या यह अभी भी सच है, या क्या यह अब प्रासंगिक नहीं है?

— शॉन विल्सन

20

अपने custom.css फ़ाइल को bootstrap.css के नीचे अंतिम प्रविष्टि के रूप में लिंक करें। Custom.css शैली की परिभाषाएँ बूटस्ट्रैप.css को ओवरराइड करेगी

एचटीएमएल

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

Custom.css में लीजेंड की सभी शैली परिभाषाएँ कॉपी करें और उसमें परिवर्तन करें (जैसे मार्जिन-बॉटम: 5 पीएक्स; - यह मार्जिन-बॉटम को ओवरराइड करेगा: 20 पीएक्स;)

— Paramasivan
स्रोत

हां, मैंने ऐसा पहले ही कर लिया था। क्षमा करें मेरा प्रश्न स्पष्ट नहीं था। मेरा प्रश्न पूछ रहा था कि boot.rap.min.css से शैलियों को ओवरराइड करने के लिए custom.css में क्या करना है।

— एलेक्स

अगर मैं भी बूटस्ट्रैप-theme.min.css का उपयोग कर रहा हूँ तो क्या होगा?

— क्वासौर

मेरे लिए काम किया, यहां तक कि मिनट सीएसएस के साथ

— मिमी

5

legendबूटस्ट्रैप में परिभाषित शैलियों को रीसेट करने के लिए , आप अपनी सीएसएस फ़ाइल में निम्नलिखित कर सकते हैं:

legend {
  all: unset;
}

रेफरी: https://css-tricks.com/almanac/properties/a/all/

CSS में सभी संपत्ति चयनित तत्व के सभी गुणों को रीसेट करती है, पाठ दिशा को नियंत्रित करने वाली दिशा और यूनिकोड-बीड़ी गुणों को छोड़कर।

संभावित मान हैं: initial, inheritऔरunset ।

साइड नोट: clearसंपत्ति का उपयोग float( https://css-tricks.com/almanac/properties/c/clear/ ) के साथ किया जाता है

— विवेक अठावले
स्रोत

3

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

बिल्ड गाइड के लिए कृपया GitHub पर बूटस्ट्रैप का संदर्भ लें ।

— विक्टर हैगक्विस्ट
स्रोत

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

— डेविड किर्कलैंड

@alex टक्कर के स्रोत और पुनर्निर्माण?

— विक्टर हैग्क्विस्ट

3

Https://bootstrap.themes.guide/how-to-customize-bootstrap.html देखें

सरल सीएसएस ओवरराइड्स के लिए, आप बूट.स्ट्रैप के नीचे एक custom.css जोड़ सकते हैं
```
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
```
अधिक व्यापक परिवर्तनों के लिए, SASS अनुशंसित विधि है।
- अपनी खुद की custom.scss बनाएं
- custom.scss में परिवर्तन के बाद बूटस्ट्रैप आयात करें
- उदाहरण के लिए, आइए शरीर की पृष्ठभूमि-रंग को हल्के-भूरे रंग के #eeeeee में बदलें, और ब्लू प्राथमिक संदर्भ रंग को बूटस्ट्रैप के $ बैंगनी चर में बदलें ...
```
/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
```

— konyak
स्रोत

2

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

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>

— mr5
स्रोत

-1

कंसोल पर लक्ष्य बटन का निरीक्षण करें।
तत्वों टैब पर जाएं फिर कोड पर होवर करें और बूटस्ट्रैप द्वारा उपयोग की जाने वाली डिफ़ॉल्ट आईडी या कक्षा को खोजना सुनिश्चित करें।
फ़ंक्शन को कॉल करके शैली / पाठ को अधिलेखित करने के लिए jQuery / जावास्क्रिप्ट का उपयोग करें।

इस उदाहरण को देखें:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

— आनंद चौधरी
स्रोत

-1

मुझे पता चला कि (बूटस्ट्रैप 4) अपने खुद के सीएसएस को bootstrap.css.js सबसे अच्छा समाधान है।

उस आइटम को ढूंढें जिसे आप बदलना चाहते हैं (तत्व का निरीक्षण करें) और ठीक उसी घोषणा का उपयोग करें तब यह ओवरराइड हो जाएगा।

मुझे यह पता लगाने में थोड़ा समय लगा।

— हेनरी
स्रोत

-3

लीजेंड को आईडी दें और सीएसएस लागू करें। किंवदंती के अनुसार आईडी हैलो जोड़ें (सीएसएस follw के रूप में है:

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

— अमर गौड़
स्रोत

-9

सीएसएस के बजाय jquery सीएसएस का उपयोग करें। । । jquery में बूटस्ट्रैप css से अधिक प्राथमिकता है ...

जैसे

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}

— अजीत सांखवाल
स्रोत

6

HTML का उपयोग संरचना प्रदान करने के लिए किया जाना चाहिए, CSS का उपयोग स्टाइल प्रदान करने के लिए किया जाना चाहिए, और जावास्क्रिप्ट (jQuery सहित) का उपयोग केवल अन्तरक्रियाशीलता प्रदान करने के लिए किया जाना चाहिए। शैलियों को ओवरराइड करने के लिए jQuery का उपयोग करना अच्छी वास्तुकला के सिद्धांतों के लिए काउंटर है, और अब से 6 महीने तक कोड पर काम करने की कोशिश करने वाले किसी भी व्यक्ति के लिए बेहद भ्रामक होगा।

— स्टीफन आर। स्मिथ