Twitter Bootstrap 3 navbar geçiş düğmesi farklı simgeyle

Twitter Bootstrap 3 kullanarak, mobil cihazlar için ek bir navbar oluşturmak istiyorum.Twitter Bootstrap 3 navbar geçiş düğmesi farklı simgeyle

Navbar'da çubuğun her iki tarafına 2 geçiş düğmesi koyacağım. Sol düğme klasik "üç çubuk" simgesine sahip olacak ve sağ tuşun içinde farklı bir simge olacaktır. İçinde ".glyphicon .glyphicon-comment" olması için doğru düğmeyi istiyorum. Kullanıcı bu düğmeyi tıklarsa, ikinci menü için de geçiş yapar. Menü için geçiş yapabilirim, ancak simge değiştirilemez mi?

Sağdan açma düğmesinin içine başka bir simge koyamadım?

Fiddle (Ben de gezinme çubuğu merkezli olmak "Bazı bağlantı" metnini gerekir): 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>

kaynak

2013-10-07 trante

şey? http://jsfiddle.net/WPfe3/5/ –

SEE THE DEMO HERE

Sen jsfiddle demo bootstrap-glyphicons.css eklemeyi unutmayın. Sonra

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

ile bu

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

değiştirin Sonra ortasına bağlantı almak için size a etiketinden sınıf navbar-brand kaldırmak gerekir. Ve sonra bağlantınızı div ile sarın ve daha sonra bağlantıyı merkeze almak için text-align:center ve bazı padding'u uygulayın.

kaynak

2013-10-07 11:24:28

Eh, ama sol ve sağ düğmeleri yatay olarak hizalanmış gibi görünüyor. Soldaki sağdan bir üst. Ben css dosyasını değiştirerek kontrol edin: http://jsfiddle.net/mavent/7KdD4/1/ Ayrıca "bazı metin" düğmeleri ile hizalanmış değildir. – trante

Ayrıca "bazı bağlantılı" navbarın üstüne yapıştırılır. Dikey olarak hizalanmadı. "Kenar boşluğu" eklenmesi yardımcı olmadı. – trante

Şimdi bakın http://jsfiddle.net/7KdD4/4/ –

Sen simge süresi değiştirerek bunu başarabilirsiniz, Yerine

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

kullanın gibi böyle

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

Demo

kaynak

2013-10-07 11:30:49 devo

İki düğmenin dikey olarak hizalanmadığını unutmayın. http://jsfiddle.net/mavent/3QWSM/1/ – trante

Ayrıca bir yükseklik ekleyin '' .navbar-toggle { max-height: 35px; } '' http://jsfiddle.net/3QWSM/2/ – devo

'' '' – devo

Twitter Bootstrap 3 navbar geçiş düğmesi farklı simgeyle

cevap

İlgili konular