बूटस्ट्रैप 4 हैमबर्गर टॉगलर कलर बदलें

Question

मेरे पास एक बूटस्ट्रैप वेबसाइट है जहां हैमबर्गर टॉगलर जोड़ा जाता है जब स्क्रीन का आकार 992px से कम होता है। कोड ऐसा है:

<button class="navbar-toggler navbar-toggler-right" 
        type="button" data-toggle="collapse" 
        data-target="#navbarSupportedContent" 
        aria-controls="navbarSupportedContent" 
        aria-expanded="false" 
        aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
</button>

क्या हैमबर्गर टॉगलर बटन का रंग बदलने की कोई संभावना है?

Comments

कोड के रूप में नहीं चल रहा है

— जॉर्डन .JD

वास्तव में एक जवाब है, लेकिन आप के आसपास नेवबार-Toggler-चिह्न पर ले के साथ खेल सकते advertentiekracht.nl/togglerIcon.html वहाँ bootstraps Toggler आइकन बजाय बूटस्ट्रैप शैली पत्र की चर्चा करते हुए की किसी बाह्य शैली तत्व के रूप में प्रयोग किया जाता है। यह भी बताया गया है कि इसका प्रबंधन कैसे किया जाता है।

— बेन थाइजसेन

Answer 1

navbar-toggler-iconबूटस्ट्रैप 4 में (हैमबर्गर) एक एसवीजी का उपयोग करता है background-image। टॉगलर आइकन छवि के 2 "संस्करण" हैं। एक लाइट नेवबार के लिए, और एक डार्क नेवबर के लिए ...

• navbar-darkगहरे रंग की पृष्ठभूमि पर हल्के / सफेद टॉगलर के लिए उपयोग करें
• navbar-lightलाइटर बैकग्राउंड पर गहरे / ग्रे टॉगलर के लिए उपयोग करें

---

// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

इसलिए, यदि आप टॉगलर छवि का रंग किसी और चीज़ में बदलना चाहते हैं, तो आप आइकन को कस्टमाइज़ कर सकते हैं। उदाहरण के लिए, यहां मैंने RGB मान को गुलाबी (255,102,203) पर सेट किया है। stroke='rgba(255,102,203, 0.5)'एसवीजी डेटा में मूल्य पर ध्यान दें :

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

डेमो http://www.codeply.com/go/4FdZGlPMNV

ओएफसी, एक अन्य पुस्तकालय से एक आइकन का उपयोग करने का एक अन्य विकल्प यानी: फ़ॉन्ट विस्मयकारी, आदि।

---

बूटस्ट्रैप 4.0.0 अपडेट करें:

बूटस्ट्रैप 4 बीटा के रूप में, navbar-inverseअब navbar-darkहल्का लिंक और टॉगलर रंगों का उत्पादन करने के लिए गहरे रंग के पृष्ठभूमि वाले नेबर्स पर उपयोग करना है।

---

बूटस्ट्रैप 4 नेवबर रंग कैसे बदलें

Comments

बूटस्ट्रैप 4 बीटा 1 में कोई .navbar-inverseवर्ग नहीं है । आप दो वर्गों में से चुन सकते हैं: .navbar-lightया .navbar-dark।

— Qrzysio

Answer 2

अपने नावबार के डिफ़ॉल्ट आइकन के रूप में एक फ़ॉन्ट-भयानक आइकन का उपयोग करें ।

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

या पुराने फ़ॉन्ट-भयानक संस्करणों पर इसे आज़माएँ:

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>

Comments

Fontawesome 5 उपयोग बार के लिए। fontawesome.com/icons/bars?style=solid

— मुर्तजा भृगु

यह बहुत अच्छा विचार है।

— शिव मनहर

Answer 3

आप केवल बहुत ही आसान तरीके से सीएसएस के साथ टॉगलर बटन बना सकते हैं, एसवीजी या ... फ़ोरमैट में किसी भी फोंट का उपयोग करने की आवश्यकता नहीं है।

आपका बटन:

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

आपकी बटन शैली:

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

आपकी क्षैतिज रेखा शैली:

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

डेमो

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}

<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>

Answer 4

सिर्फ कक्षा डालें navbar-darkया navbar-lightनौसेना तत्व में:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Answer 5

सबसे आसान तरीका इस डिफ़ॉल्ट बूटस्ट्रैप कोड को बदल दिया गया है:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

इसके द्वारा :

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>

और इस कोड को अपनी फ़ाइल में जोड़ना न भूलें:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

आशा करता हूँ की ये काम करेगा!!

Answer 6

यदि आपने बूटस्ट्रैप डाउनलोड किया है, तो बूटस्ट्रैप-4.4.1-dist / css / bootstrap.min पर जाएं

मैं। लगता है .navbar-light .navbar-toggler-iconया .navbar-dark .navbar-toggler-iconचयनकर्ता

ii। पृष्ठभूमि-छवि विशेषता और उसके मूल्य का चयन करें। स्निपेट इस तरह दिखता है:

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

iii। स्निपेट को कॉपी करें और अपने कस्टम CSS में पेस्ट करें

iv। stroke=’rgba(0,0,0,0.5)’मूल्य को अपने पसंदीदा rgba मान में बदलें

Answer 7

संपादित करें: मेरा बुरा! मेरे जवाब के साथ, आइकन एक टॉगलर के रूप में व्यवहार नहीं करेगा वास्तव में, यह तब भी दिखाया जाएगा जब वह ढह नहीं गया ... फिर भी खोज ...

यह काम करेगा:

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

मेरे उत्तर द्वारा प्रस्तावित चाल को navbar-togglerशास्त्रीय बटन वर्ग से बदलना है btnऔर फिर, जैसा कि पहले उत्तर दिया गया था, एक आइकन फ़ॉन्ट का उपयोग करें।

ध्यान दें, यदि आप रखते हैं <button class="navbar-toggler">, तो बटन का "अजीब" आकार होगा।

जैसा कि गितुब पर इस पोस्ट में कहा गया है , बूटस्ट्रैप कुछ "सीएसएस ट्रिकरी" का उपयोग करता है, इसलिए उपयोगकर्ताओं को फोंट पर भरोसा नहीं करना पड़ता है।

"navbar-toggler"यदि आप आइकन फ़ॉन्ट का उपयोग करना चाहते हैं , तो बस, अपने बटन पर कक्षा का उपयोग न करें ।

चीयर्स।

Comments

यह केवल "काम करता है" यदि आप फ़ॉन्ट विस्मयकारी का उपयोग करते हैं जो बूटस्ट्रैप का हिस्सा नहीं है

— Zim

मुझे लगता है कि आपको सूची के ऊपर अमिरेज़ा मोहम्मदी द्वारा दिए गए उत्तर पर टिप्पणी को हटाने की आवश्यकता है। धन्यवाद।

— NoChance

Answer 8

मैंने अभी काफी आसान समाधान विकसित किया है। (हां, मुझे पता है कि यह एक पुराना सवाल है लेकिन इस मुद्दे पर शोध करने वाले किसी व्यक्ति को यह उपयोगी लग सकता है।)

मैं hamburger.svg नामक एक SVG का उपयोग कर रहा था। मैंने इसे एक टेक्स्ट एडिटर के साथ देखा और कुछ भी नहीं पाया जो कि तीन लाइनों के लिए एक रंग सेट कर रहा था - मैं अनुमान लगा रहा हूं कि यह काले रंग के लिए चूक है क्योंकि निश्चित रूप से मुझे जो व्यवहार मिलता है - इसलिए मैंने बस एक "स्ट्रोक" पैरामीटर जोड़ा है एसवीजी की परिभाषा। यह बहुत बड़ा काम नहीं था - तीनों लाइनों की सीमाएं मेरे चुने हुए रंग (सफ़ेद) की थीं, लेकिन बाकी की रेखा अभी भी काली थी, इसलिए मैंने "फिल" पैरामीटर भी जोड़ा। और वह चाल चली!

यहाँ मूल हैमबर्गर के लिए कोड है। एसवीजी अपनी संपूर्णता में है:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

और यहाँ नए SVG के लिए कोड है, जब मैंने इसे संपादित किया और इसे hamburger_white.svg के रूप में सहेजा:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" stroke="white" fill="white"/></svg>

जैसा कि आप देख सकते हैं कि क्या आप दाईं ओर स्क्रॉल करते हैं, मैंने जो कुछ किया था वह था:

stroke="white" fill="white"

पथ के बहुत अंत तक। दूसरी चीज़ जो मुझे करनी थी वह थी एचटीएमएल में हैमबर्गर की फ़ाइल का नाम बदलना। सीएसएस के साथ कोई खिलवाड़ नहीं है और किसी अन्य आइकन को ट्रैक करने की आवश्यकता नहीं है।

आसान peasey! आप अपने हैमबर्गर को किसी भी रंग को पसंद करने के लिए इसका अनुकरण कर सकते हैं।

Answer 9

यदि आप बूटस्ट्रैप के सैस संस्करण के साथ काम करते हैं, तो आप अपने टॉगल बटन के रंग और शैली को _variables.scssपा सकते हैं $navbar-inverse-toggler-bgया $navbar-light-toggler-bgजहां आप इसे बदल सकते हैं।

Html में आपको उपयोग करना है navbar-inverseया navbar-lightआप किस संस्करण का उपयोग करना चाहते हैं इसके आधार पर।

Comments

बूटस्ट्रैप 4 में

— नौबहार

Answer 10

विकल्प के रूप में आप हमेशा एक सरल आइकन की कोशिश कर सकते हैं, उदाहरण के लिए, दूसरे आइकन का उपयोग कर:

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

रेफरी: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

रेफरी: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

तो आप उनके रंग और आकार पर कुल नियंत्रण प्राप्त करते हैं:

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

( लागू किया गया बटन की शैली त्वरित परीक्षण के लिए है ):

Answer 11

डिफ़ॉल्ट बूटस्ट्रैप नवबार आइकन

<span class="navbar-toggler-icon"></span>

फ़ॉन्ट विस्मयकारी चिह्न जोड़ें और निकालें class="navbar-toggler-icon"

<span> <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i> </span>

Answer 12

कस्टम हैमबर्गर नौसेना के लिए सबसे अच्छा समाधान की जाँच करें।

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>

डेमो छवि