Twitter Bootstrap 3 导航栏切换按钮与不同的图标

Twitter Bootstrap 3 navbar toggle button with different icon

本文关键字：图标 按钮 Bootstrap 导航 Twitter      更新时间：2023-09-26

通过使用Twitter Bootstrap 3，我想为移动设备创建一个额外的导航栏。

在

导航栏中，我将在栏的每一侧放置 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>

您可以通过更改图标范围来实现此目的，

而不是

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

像这样使用，

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

演示

在此处查看演示

您忘记在jsfiddle演示中添加bootstrap-glyphicons.css。然后替换这个 

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

跟

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

然后，要将链接放在中心位置，您需要从a标签中删除类navbar-brand。然后用div 包装您的链接，然后应用 text-align:center 和一些padding以使链接居中。

相关文章：