ट्विटर बूटस्ट्रैप में स्टाइल को कैसे अधिलेखित करें

128

मैं ट्विटर बूटस्ट्रैप में स्टाइलिंग को कैसे लिख सकता हूं? उदाहरण के लिए, मैं वर्तमान में एक। साइडबार वर्ग का उपयोग कर रहा हूं जिसमें CSS नियम 'फ्लोट: लेफ्ट;' मैं इसे कैसे बदल सकता हूं ताकि इसके बजाय यह सही हो जाए? मैं HAML और SASS का उपयोग कर रहा हूं लेकिन वेब विकास के लिए अपेक्षाकृत नया हूं।

css twitter-bootstrap

— जॉन
स्रोत

इसे भी देखें: stackoverflow.com/questions/8596794/…

— Zim

41

अपनी खुद की कक्षा, पूर्व जोड़ें: के <div class="sidebar right"></div>रूप में सीएसएस के साथ

.sidebar.right { 
    float:right
}

— motoxer4533
स्रोत

1

अच्छा अभ्यास नहीं: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes

— दामजन पाव्लिका

2

@DamjanPavlica ईमानदारी से? आप अभी भी IE 6 के बारे में परवाह है? यह उल्लेख करने के लिए नहीं, मुझे लगता है, बूटस्ट्रैप चैनिंग का उपयोग करता है।

— बलोएज मिशलिक

233

ये सभी युक्तियां काम करेंगी, लेकिन बूटस्ट्रैप शैलियों के बाद अपनी स्टाइलशीट को शामिल करने का एक सरल तरीका हो सकता है ।

यदि आप site-specific.cssबूटस्ट्रैप के ( bootstrap.css) के बाद अपने सीएसएस ( ) को शामिल करते हैं , तो आप उन्हें फिर से परिभाषित करके नियमों को ओवरराइड कर सकते हैं।

उदाहरण के लिए, यदि यह है कि आप सीएसएस को अपने में कैसे शामिल करते हैं <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

आप बस लिखकर साइडबार को दाईं ओर ले जा सकते हैं (अपनी site-specific.cssफ़ाइल में):

.sidebar {
    float: right;
}

एचएएमएल और एसएएसएस की कमी को क्षमा करें, मैं उन्हें ट्यूटोरियल लिखने के लिए अच्छी तरह से नहीं जानता।

— citelao
स्रोत

7

@ClaudiuConstantin मुझे कोई कारण नहीं दिखता है। अंगूठे का नियम दूसरी शैली हमेशा पहली है अगर दो समान विशिष्टता के स्तर पर ट्रम्प होंगे । जब तक यह आपके स्टाइल के बाद आएगा तब तक यह ओवरराइड हो जाएगा।

— सिटिलाओ

3

@ क्रेकर को शायद विशिष्टता के साथ बहुत कुछ करना है। आप इसके बारे में यहां (पुराने लेख) पढ़ सकते हैं , लेकिन मूल रूप .sidebar.rightसे अधिक विशिष्ट है .sidebar। शायद यही समस्या है। वेब इंस्पेक्टर का उपयोग यह पता लगाने के लिए करें कि यह ओवरराइडिंग क्या है।

— सिटेलो

2

@ क्रेकर हाँ, यह विचार है। इसके साथ समस्या !importantयह है कि आप इसे भविष्य में फिर से कभी भी ओवरराइड नहीं कर सकते।

— सिटेलो

5

मेरे Site.cssको बंडल किया गया है और Bundle.configशारीरिक रूप से उसके बाद सूचीबद्ध और प्रस्तुत किया गया हैbootstrap.css लेकिन अभी भी शैलियों को ओवरराइड नहीं किया गया है। मुझे site.cssआधुनिकीकरण बंडल से संदर्भ लेना था और मैन्युअल रूप से डाल दिया था bootstrap.css(और कैश खाली करने के लिए एक बार Ctrl + F5 दबाने के बाद )

— at 18:13

1

यह काम कर सकता है लेकिन यह उत्पादन के लिए सबसे अच्छा अभ्यास नहीं होगा। जब तक कोई बड़ा कारण न हो, प्रति साइट 1 स्टाइलशीट लोड करें। # सिट्सपीड

— बेन रेसिकोट

58

इसका उत्तर CSS Specificity है। आपको अपने सीएसएस में अधिक "विशिष्ट" होने की आवश्यकता है ताकि यह बूटस्ट्रैप सीएसएस गुणों को ओवरराइड कर सके।

उदाहरण के लिए आपके पास यहां बूटस्ट्रैप मेनू के लिए एक नमूना कोड है:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

यहां, आपको विशिष्टता के पदानुक्रम को याद रखने की आवश्यकता है। यह इस प्रकार चलता है:

एक तत्व का उल्लेख आईडी के साथ 100 अंक दें
10 बिंदुओं वाले वर्ग के साथ एक तत्व दें
एक साधारण तत्व को एक अंक 1 दें

तो, ऊपर के लिए अगर आपकी सीएसएस में ऐसा कुछ है:

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

तो, आप को परिभाषित किया है, भले ही .navbar aबाद .navbar ul li aयह अभी भी एक हरे रंग के बजाय एक लाल रंग के साथ ओवरराइड करने जा रहा है, के बाद से विशिष्टता अधिक (13 अंक) है।

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

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

तो, भले ही आपका css लोड हो रहा हो, bootstrap.css के बाद लोड किया जा रहा है, जिसमें निम्न पंक्ति है:

.navbar-nav li a {
    color: red;
}

यह अभी भी # 999 के रूप में प्रदान किया जा रहा है। इसे हल करने के लिए, बूटस्ट्रैप में 22 बिंदु हैं (इसे स्वयं गणना करें)। तो हम सभी की जरूरत है कि कुछ अधिक है। इस प्रकार, मैंने कस्टम आईडी को तत्वों अर्थात होम-मेनू-कंटेनर और होम-मेनू में जोड़ा है। अब निम्नलिखित सीएसएस काम करेगा:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

किया हुआ।

आप इस एमडीएन लिंक का उल्लेख कर सकते हैं ।

— kaizer1v
स्रोत

1

अगर वे बंधे हैं तो क्या होगा?

— उलझन

2

इससे कोई फर्क नहीं पड़ता है, उदाहरण के लिए '.abc.xyz' का मतलब है, वर्ग 'एबीसी' और 'xyz' के साथ एक तत्व है - यह अभी भी एक वर्ग के साथ एकल तत्व के रूप में ले जाएगा। इस प्रकार, 10 अंक। वही एक आईडी के लिए जाता है।

— kaizer1v

1

अच्छा लिखा! धन्यवाद!

— गोबस्मैक

1

यह मेरे लिए चाल थी। मुझे blockquoteबूटस्ट्रैप CSS में स्टाइल को ओवर-राइड करने में परेशानी हो रही थी । अजीब बात है, यह सामान्य रुकावटों के लिए गलत था, लेकिन एक अवरोधक के भीतर और <ul> के लिए सही लग रहा था। कुंजी मेरे सीएसएस को अद्यतन करने के लिए थी blockquote p, जिसने पर्याप्त प्राथमिकता दी थी। <Ul> पृष्ठ के दूसरे भाग के लिए यह कर रहा था।

— एडम वूयरल

20

आप इसे "अधिक विशिष्ट" बनाकर एक CSS वर्ग को अधिलेखित कर सकते हैं।

आप HTML ट्री ऊपर जाते हैं, और मूल तत्वों को निर्दिष्ट करते हैं:

div.sidebar { ... } से अधिक विशिष्ट है .sidebar { ... }

अगर आपको जरूरत हो तो आप BODY तक जा सकते हैं:

body .sidebar { ... } वस्तुतः कुछ भी ओवरराइड करेगा।

इस आसान गाइड को देखें: http://css-tricks.com/855-specifics-on-css-specificity/

— डायोडस - जेम्स मैकफर्लेन
स्रोत

यह वास्तव में सबसे अच्छा जवाब है

— कोडीबगस्टीन

9

आप यह सुनिश्चित कर सकते हैं कि आपकी सीएसएस फ़ाइल पार्स एसेट बूस्टर.प्स, जैसे:

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

— Gothburz
स्रोत

6

यदि आप बूटस्ट्रैप उपयोग में किसी भी सीएसएस को अधिलेखित करना चाहते हैं!

मान लें कि यहाँ बूटस्ट्रैप में पेज हेडर क्लास है, जिसके शीर्ष पर 40px मार्जिन है, मेरे क्लाइंट को यह पसंद नहीं है और वह चाहता है कि यह शीर्ष पर 15 और नीचे केवल 10 हो।

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

इसलिए मैंने अपनी site.css फ़ाइल में इस तरह से एक ही नाम के साथ क्लास में जोड़ा

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

मेरे मार्जिन के साथ महत्वपूर्ण पर ध्यान दें, जो बूटस्टार पेज-हेडर वर्ग मार्जिन के मार्जिन को अधिलेखित करेगा।

— अली आद्रवी
स्रोत

बहुत बढ़िया! यह वही चीज है जो मैं चाहता हूं। धन्यवाद

— गिस्वे

2

ध्यान दें कि महत्वपूर्ण का उपयोग कुछ हद तक एक विरोधी पैटर्न है। : यहां अधिक पढ़ें james.padolsey.com/css/dont-use-important

— mayatron

3

इस देर से आया, लेकिन मुझे लगता है कि यह एक और उत्तर का उपयोग कर सकता है।

यदि आप sass का उपयोग कर रहे हैं, तो बूटस्ट्रैप आयात करने से पहले आप वास्तव में चर बदल सकते हैं। http://twitter.github.com/bootstrap/customize.html#variables

उनमें से किसी को बदलें, जैसे:

$bodyBackground: red;
@import "bootstrap";

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

सास:

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}

इसे भी देखें: रेल में उचित SCSS एसेट संरचना

— AJcodez
स्रोत

2

मुझे पता है कि यह एक पुराना सवाल है, लेकिन फिर भी, मैं एक समान समस्या के बारे में आया और मुझे महसूस हुआ कि मेरी bootstrapOverload.cssफ़ाइल में "काम नहीं कर रहा" सीएसएस कोड लिखा गया थाmedia queries । जब मैंने इसे मीडिया के सवालों से ऊपर उठाया तो इसने काम करना शुरू कर दिया।

बस मामले में किसी और को एक ही समस्या का सामना करना पड़ रहा है

— md1hunox
स्रोत