बूटस्ट्रैप

में आइकन-बार (☰) रंग बदलें मैं ☰ रंग बदलना चाहता हूं।बूटस्ट्रैप

HTML:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu"> 
    <span class="sr-only">Toggle menu navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button>

मैं विभिन्न चीजों की कोशिश की (bellow देखो), लेकिन कुछ भी नहीं काम करता है।

सीएसएस:

.icon-bar { 
    color: black; 
    border-color: black; 
    background-color: black; 
}

स्रोत

2013-12-12 a1204773

बूटस्ट्रैप का कौन सा संस्करण उपयोग कर रहे हैं? http://stackoverflow.com/questions/12379153/can-i-add-color-to-bootstrap-icons-only-using-css – Gotschi

अपना jsfiddle दिखाएं – shankar

@ गॉट्सकी नवीनतम एक – a1204773

कारण अपने सीएसएस काम नहीं कर रहा तरह specificity की वजह से है। बूटस्ट्रैप चयनकर्ता की तुलना में आपकी उच्च विशिष्टता है, इसलिए आपकी शैली पूरी तरह अनदेखी की जाती है।

बूटस्ट्रैप इसे चयनकर्ता के साथ शैलियों: .navbar-default .navbar-toggle .icon-bar। इस चयनकर्ता, 3 के एक बी विशिष्टता महत्व है जबकि तुम्हारा केवल इसलिए 1.

के बी विशिष्टता महत्व है, इस ओवरराइड करने के लिए, बस अपने सीएसएस में एक ही चयनकर्ता का उपयोग (यह मानते हुए अपने सीएसएस शामिल किया गया है बाद बूटस्ट्रैप के):

.navbar-default .navbar-toggle .icon-bar { 
    background-color: black; 
}

स्रोत

2013-12-12 10:17:45

यह काम किया, बहुत बहुत धन्यवाद !! – a1204773

@ जेडेन लॉसन मैंने आपके संपादन को वापस ले लिया है। दशमलव, समेकित मूल्यों को हटाने के लिए विशिष्टता की परिभाषा को हाल ही में थोड़ा सा पुनर्निर्मित किया गया है। एक सीएसएस वर्ग में * बी * विशिष्टता मान होता है 1. जब * ए *, * बी * और * सी * मानों को समेकित किया जाता है, तो इसमें 010 की विशिष्टता दिखाई देगी, हां, लेकिन 10 से अधिक होने पर क्या होता है कक्षाएं (या 16, यदि आप यहां हेक्साडेसिमल का उपयोग करना चाहते हैं)? विशिष्टता अचानक 100 नहीं बन जाएगी, यह 0100 होगी, लेकिन एक समेकित मूल्य के रूप में जो पढ़ना मुश्किल है, और वास्तव में 0,10,0 के रूप में प्रतिनिधित्व किया जाना चाहिए। –

कोई चिंता नहीं @ जेम्स। कम से कम वर्तनी सही है :) –

प्रयास करें अधिक सवारी सीएसएस का उपयोग कर !important

इस

.icon-bar { 
    background-color:#FF0000 !important; 
}

स्रोत

2013-12-12 10:16:35

+10

'! महत्वपूर्ण' का उपयोग करना आम तौर पर एक बुरा विचार है, और इसके लिए यह पूरी तरह से अनावश्यक है। –

आप कहते हैं कि लेकिन महत्वपूर्ण के बिना यह काम नहीं करता है? –

@AlanSimes जो उत्तर मैंने इस प्रश्न पर प्रदान किया है वह '! महत्वपूर्ण' का उपयोग नहीं करता है और दोनों को 15 बार से अधिक स्वीकार्य और अपवित्र किया गया था। –

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

**<Div class = "navbar"**> 
     div class = "container"> 
       <Div class = "navbar-header">

या

**<Div class = "navbar navbar-default">** 
     div class = "container"> 
       <Div class = "navbar-header">

जरूरत है आप अपने सीएसएस

.navbar-default-toggle .navbar .icon-bar { 
    background-color: # 0000ff; 
}

में उस जगह मिल गया है और क्या मैंने किया था

.navbar .navbar-toggle .icon-bar { 
    background-color: # ff0000; 
}

ऊपर जोड़ने था

क्योंकि एम y एचटीएमएल कोड

**<Div class = "navbar">** 
     div class = "container"> 
       <Div class = "navbar-header">

है और आप कम की फ़ाइल/सीएसएस

खोज इस खंड सहयोगी और यहां भी रंग आप बदलना चाहते हैं रखा है, अन्यथा यह आत्म सही राज्य के लिए सीएसएस फ़ाइल होगा अगर यह

// Toggle Navbar 
@ Navbar-default-toggle-hover-bg: #ddd; 
**@ Navbar-default-toggle-icon-bar-bg: # 888;** 
@ Navbar-default-toggle-border-color: #ddd;

यदि आपका एचटीएमएल कोड मेरा जैसा है और navbar-default नहीं है, तो इसे सीएसएस के साथ जोड़ा गया है।

// Toggle Navbar 
@ Navbar-default-toggle-hover-bg: #ddd; 
**@ Navbar-toggle-icon-bar-bg : #888;** 
@ Navbar-default-toggle-icon-bar-bg: # 888; 
@ Navbar-default-toggle-border-color: #ddd;

सौभाग्य

स्रोत

2015-05-19 03:29:48 jesusratti

कोडिंग के सिर्फ एक लाइन के लिए पर्याप्त है .. सिर्फ इस बाहर की कोशिश करो। और आप पिक्सेल जोड़कर इसके साथ आइकन-बार की भी मोटाई समायोजित कर सकते हैं।

एचटीएमएल

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span> 

    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 

    </button> 
    <a class="navbar-brand" href="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png"> 
    </a></div>

सीएसएस

.navbar-toggle, .icon-bar { 
    border:1px solid orange; 
}

बूम ...

स्रोत

2016-08-27 01:58:37 Midun

मैं बूटस्ट्रैप & एचटीएमएल 5 का उपयोग कर रहा हूँ। मैं टॉगल बटन के रूप में ओवरराइड करना चाहता था।

.navbar-toggle{ 
    background-color: #5DADB0; 
    color: #F3DBAA; 
    border:none;   
} 

.navbar-toggle.but-menu:link { 
    color: #F00; 
    background-color: #CF995F; 
} 

.navbar-toggle.but-menu:visited { 
    color: #FFF; 
    background-color: #CF995F; 
} 
.navbar-toggle.but-menu:hover { 
    color: #FFF0C9; 
    background-color: #CF995F; 
} 
.navbar-toggle.but-menu:active { 
    color: #FFF; 
    background-color: #CF995F; 
} 
.navbar-toggle.but-menu:focus { 
    color: #FFF; 
    background-color: #CF995F; 
}

स्रोत

2017-04-29 15:20:58 Sylviamc

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

तो यह आप के लिए कुछ इस तरह देखना चाहिए की सुपर सैयान है,

<span class="icon-bar" style="background-color: black !important;"> 
</span> 
<span class="icon-bar" style="background-color: black !important;"> 
</span> 
<span class="icon-bar" style="background-color: black !important;"> 
</span>

स्रोत

2017-06-27 15:30:40

बूटस्ट्रैप

उत्तर

संबंधित मुद्दे