5

Twitter Bootstrap 3 を使用して、モバイル用の追加のナビゲーション バーを作成したいと考えています。

navbar では、バーの両側に 2 つのトグル ボタンを配置します。左のボタンには古典的な「3 本の棒」のアイコンがあり、右のボタンには別のアイコンがあります。右ボタンに「.glyphicon .glyphicon-comment」を入れたい。ユーザーがボタンをクリックすると、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>
4

2 に答える 2

6

これは、アイコンのスパンを変更することで実現できます。

それ以外の、

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

のように使用します。

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

デモ

于 2013-10-07T11:30:49.367 に答える