Twitter Bootstrap 3 bouton de bascule navbar avec icône différente

En utilisant Twitter Bootstrap 3, je veux créer une barre de navigation supplémentaire pour mobile.Twitter Bootstrap 3 bouton de bascule navbar avec icône différente

Dans la barre de navigation, je vais mettre 2 boutons à bascule de chaque côté de la barre. Le bouton gauche aura l'icône classique "trois barres", et le bouton droit aura une icône différente à l'intérieur. Je veux que le bouton droit ait ".glyphicon .glyphicon-comment" dedans. Si l'utilisateur clique sur le bouton, il bascule également vers le second menu. Je peux basculer pour le menu mais l'icône ne peut pas être changée?

Je ne pouvais pas mettre d'autre icône à l'intérieur du bouton bascule droit? (Je dois aussi le "un lien" texte à être centré dans navbar)

Fiddle: 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>

Source

2013-10-07 trante

Quelque chose comme ça? http://jsfiddle.net/WPfe3/5/ –

SEE THE DEMO HERE

Vous oubliez d'ajouter bootstrap-glyphicons.css dans votre jsFiddle démo. Remplacez ensuite ce

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

Avec

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

Et puis pour obtenir votre lien dans le centre, vous devez supprimer la classe navbar-brand de votre balise a. Et puis envelopper votre lien avec div, puis appliquer text-align:center et certains padding pour obtenir le lien au centre.

Source

2013-10-07 11:24:28

Eh bien, mais il semble que les boutons gauche et droite ne sont pas alignés horizontalement. Un gauche est supérieur à un droit. Je le vérifie en changeant le fichier css: http://jsfiddle.net/mavent/7KdD4/1/ Aussi "du texte" n'est pas aligné avec les boutons. – trante

Aussi "certains liés" est collé au sommet de la barre de navigation. Pas aligné verticalement. Ajouter "margin-top" n'a pas aidé. – trante

Voir maintenant ici http://jsfiddle.net/7KdD4/4/ –

Vous pouvez y parvenir en modifiant la durée de l'icône,

Au lieu de,

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

utilisation comme,

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

Demo

Source

2013-10-07 11:30:49 devo

Notez que deux boutons ne sont pas alignés verticalement. http://jsfiddle.net/mavent/3QWSM/1/ – trante

Ajoutez également de la hauteur '' .navbar-toggle { max-height: 35px; } '' http://jsfiddle.net/3QWSM/2/ – devo

'' '' – devo

Twitter Bootstrap 3 bouton de bascule navbar avec icône différente

Répondre

Questions connexes