ट्विटर बूटस्ट्रैप 3 नेविबार टॉगल बटन विभिन्न आइकन

ट्विटर बूटस्ट्रैप 3 का उपयोग करके, मैं मोबाइल के लिए एक अतिरिक्त नेविबार बनाना चाहता हूं।ट्विटर बूटस्ट्रैप 3 नेविबार टॉगल बटन विभिन्न आइकन

navbar में मैं बार के प्रत्येक किनारे में 2 टॉगल बटन डालूंगा। बाएं बटन में शास्त्रीय "तीन बार" आइकन होगा, और दाएं बटन के अंदर एक अलग आइकन होगा। मैं सही बटन चाहता हूं कि इसके अंदर ".glyphicon .glyphicon-comment" हो। यदि उपयोगकर्ता बटन क्लिक करता है तो यह दूसरे मेनू के लिए भी टॉगल करेगा। मैं मेनू के लिए टॉगल कर सकता हूं लेकिन आइकन बदला नहीं जा सकता है?

मैं सही टॉगल बटन के अंदर कोई अन्य आइकन नहीं डाल सका?

फिडल (मैं भी "कुछ लिंक" पाठ नेवबार में केंद्रित करने की आवश्यकता है): http://jsfiddle.net/mavent/WPfe3/2/

<nav class="navbar navbar-inverse navbar-fixed-top visible-xs" role="navigation" id=""> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <button type="button" class="navbar-toggle pull-right" data-toggle="collapse" data-target=".navbar-ex2-collapse"> <span class="sr-only">Toggle navigation</span> 
     <i class="icon-user"></i> 
    </button> 
    <a class="navbar-brand" style="text-align:center;" href="">Some link here centered</a> 
    </div> 

    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <li class="active"> 
     <a href="#">AAAA 1</a> 
    </li> 
    <li class="active"> 
     <a href="#">AAAA 2</a> 
    </li> 
    <li class="active"> 
     <a href="#">AAAA 3</a> 
    </li> 
    </div> 

    <div class="collapse navbar-collapse navbar-ex2-collapse"> 
    <li class="active"> 
     <a href="#">BBBB 1</a> 
    </li> 
    <li class="active"> 
     <a href="#">BBBB 2</a> 
    </li> 
    <li class="active"> 
     <a href="#">BBBB 3</a> 
    </li> 
    </div> 
</nav>

स्रोत

2013-10-07 trante

कुछ इस तरह? http://jsfiddle.net/WPfe3/5/ –

SEE THE DEMO HERE

आप अपने jsfiddle डेमो में bootstrap-glyphicons.css जोड़ने के लिए भूल जाते हैं। फिर साथ

<i class="glyphicon glyphicon-comment" style="color:#fff"></i>

इस

<i class="icon-user"></i>

बदलें और फिर केंद्र में अपने लिंक प्राप्त करने के लिए आप अपने a टैग से वर्ग navbar-brand दूर करने के लिए की जरूरत है। और फिर अपने लिंक को div के साथ लपेटें और फिर केंद्र में लिंक प्राप्त करने के लिए text-align:center और कुछ padding लागू करें।

स्रोत

2013-10-07 11:24:28

अच्छा, लेकिन ऐसा लगता है जैसे बाएं और दाएं बटन क्षैतिज रूप से गठबंधन नहीं हैं। बाएं एक दाएं से ऊपरी है। मैं इसे सीएसएस फ़ाइल बदलकर देखता हूं: http://jsfiddle.net/mavent/7KdD4/1/ इसके अलावा "कुछ पाठ" बटन के साथ गठबंधन नहीं है। – trante

इसके अलावा "कुछ जुड़े हुए" को navbar के शीर्ष पर चिपकाया गया है। लंबवत संरेखित नहीं है। "मार्जिन-टॉप" जोड़ना मदद नहीं करता था। – trante

अब यहां देखें http://jsfiddle.net/7KdD4/4/ –

आप आइकन अवधि बदलकर इस लक्ष्य को हासिल कर सकते हैं,

बजाय

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

उपयोग की तरह,

<span class="glyphicon glyphicon-play" style="color:#fff"></span>

Demo

स्रोत

2013-10-07 11:30:49 devo

ध्यान दें कि दो बटन लंबवत रूप से गठबंधन नहीं हैं। http://jsfiddle.net/mavent/3QWSM/1/ – trante

कुछ ऊंचाई भी जोड़ें '' navbar-toggle { अधिकतम ऊंचाई: 35px; } '' http://jsfiddle.net/3QWSM/2/ – devo

'' span class = "ग्लाइफ़िकॉन ग्लाइफ़िकॉन-प्ले" शैली = "रंग: # एफएफ; मार्जिन-टॉप: -5 पीएक्स"> ' – devo

ट्विटर बूटस्ट्रैप 3 नेविबार टॉगल बटन विभिन्न आइकन

उत्तर

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