[英]Twitter Bootstrap 3 navbar toggle button with different icon
By using Twitter Bootstrap 3, I want to create an additional navbar for mobile. 通过使用Twitter Bootstrap 3,我想为移动设备创建一个额外的导航栏。
In navbar I will put 2 toggle buttons in each side of bar. 在导航栏中,我将在栏的每一侧放置2个切换按钮。 Left button will have classical "three bar" icon, and right button will have a different icon inside.
左按钮将具有经典的“三条形”图标,右按钮将具有不同的图标。 I want right button to have " .glyphicon .glyphicon-comment " inside it.
我想要右键,里面有“ .glyphicon .glyphicon-comment ”。 If the user clicks the button it will also toggle for second menu.
如果用户单击该按钮,它还将切换第二个菜单。 I can toggle for the menu but icon can't be changed ?
我可以切换菜单,但图标无法更改?
I couldn't put any other icon inside right toggle button ? 我无法在右切换按钮内放置任何其他图标? (I also need the "some link" text to be centered in navbar)
(我还需要在导航栏中居中的“一些链接”文本)
Fiddle: http://jsfiddle.net/mavent/WPfe3/2/ 小提琴: 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>
You forget to add bootstrap-glyphicons.css
in your jsfiddle demo. 你忘记在你的jsfiddle演示中添加
bootstrap-glyphicons.css
。 Then Replace this 然后替换它
<i class="icon-user"></i>
With 同
<i class="glyphicon glyphicon-comment" style="color:#fff"></i>
And then to get your link in center you need to remove the class navbar-brand
from your a
tag. 然后让你的链接中心,你需要删除类
navbar-brand
从a
标签。 And then wrap your link with div and then apply text-align:center
and some padding
to get the link in center. 然后用div包装你的链接,然后应用
text-align:center
和一些padding
来获取中心的链接。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.