Twitter的引導如何更換下拉選擇菜單按鈕

Question

當我調整瀏覽器屏幕上移動的大小，桌面菜單換成了下拉多個選項：

但如何在下拉改變菜單，按鈕這樣的：

通過點擊 「菜單」 按鈕菜單顯示和隱藏

Answer 1

爲了得到菜單類似上面我們必須遵循這個標記

<div class="row-fluid"> 
<div class="navbar navbar-inverse"> 
    <div class="navbar-inner"> 
    <div class="container-fluid"> 
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </a> 
    <div class="nav-collapse collapse"> 
    <ul class="nav"> 
    <li class="active"><a href="#"><i class="icon-home icon-white"></i> Home</a></li> 
    <li><a href="#">Features</a></li> 
    <li><a href="">Pricing</a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products<b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Latest Products</a></li> 
    <li><a href="#">Popular Products</a></li> 
    </ul> 
    </li>   
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Membership<b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Personal Membership</a></li> 
     <li><a href="#">Premium Membership</a></li> 
    </ul> 
    </li> 
    <li><a href="#">Offers</a></li> 
    <li><a href="#">Gallery</a></li> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Contact</a></li> 
    <li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    </ul> 
    </li> 
     </ul> 
    </div><!-- /.nav-collapse --> 
    </div><!-- /.container --> 
    </div><!-- /.navbar-inner --> 
</div><!-- /.navbar --> 

DEMO