通过使用Twitter Bootstrap 3,我想为移动创建一个额外的导航栏。
在导航栏中,我将在导航栏的每一侧放置两个切换按钮。左按钮将有经典的“三条”图标,右按钮将有一个不同的图标内。我想右键里面有“.glyphicon.glyphicon注释”。如果用户单击该按钮,它还将切换到第二个菜单。我可以切换菜单,但无法更改图标?
我无法在右切换按钮内放置任何其他图标?(我还需要在导航栏中居中显示“某些链接”文本)
小提琴: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>
您可以通过更改图标跨度来实现这一点,
而不是
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
用喜欢,
<span class="glyphicon glyphicon-play" style="color:#fff"></span>
演示
请看这里的演示
您忘记添加引导图标。在JSFIDLE演示中使用css
。然后换掉这个
<i class="icon-user"></i>
与
<i class="glyphicon glyphicon-comment" style="color:#fff"></i>
然后要将链接放在中间,您需要从a
标签中删除classnavbar品牌。然后用div包装链接,然后应用
text align:center
和一些padding
将链接放在中间。