如何從Bootstrap獲取移動下拉菜單？

Question

如果您在手機上訪問Bootstrap的主網站，您會注意到右上角有一個下滑菜單。

這是導航欄的一部分。

我在哪裏可以找到這個下拉菜單插件？它不在主網站上。

Answer 1

這是響應式導航欄 - 顯示在手機上的變體。爲了找到它，看看它的用法，看卡羅的評論或去這裏：

http://getbootstrap.com/components/#navbar-default

Answer 2

我相信這是響應CSS bootstrap-responsive.css

的結果它示出了在移動不同，由於該裝置寬度檢測。

Answer 3

見這個例子： http://twitter.github.com/bootstrap/examples/fluid.html

記得補充：

<script src="../assets/js/bootstrap-dropdown.js"></script> 

而CSS：

<link href="../assets/css/bootstrap.css" rel="stylesheet"> 
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet"> 

這是代碼示例：

<div class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="navbar-inner"> 
     <div class="container-fluid"> 
      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="brand" href="#">Project name</a> 
      <div class="nav-collapse collapse"> 
      <p class="navbar-text pull-right"> 
       Logged in as <a href="#" class="navbar-link">Username</a> 
      </p> 
      <ul class="nav"> 
       <li class="active"><a href="#">Home</a></li> 
      </ul> 
      </div><!--/.nav-collapse --> 
     </div> 
     </div> 
    </div> 

Answer 4

如果你想下載專門的響應導航欄組件，你可以這樣做，由布萊恩到Customize BootStrap，然後選擇導航欄，導航，選項卡和藥片，然後在響應部分您可以根據您的要求選擇響應式導航欄選項和其他媒體組件。 另外你會發現選擇jQuery插件部分，在那裏你將不得不下載以下插件，以使導航工作按照預期： - 附加，下拉，摺疊

Answer 5

我知道這是舊的，但我發現自己工作同樣的問題，並希望爲任何發現它的人提供一個準確的示例。它雖然基於Bootstrap 3。

<nav class="navbar container" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav_container" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> <!-- this are literally the "burger lines" and can be styled --> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
    </div>  

    <!-- Note the ID here is the data-target of the button!! Critically important--> 
    <div id="main_nav_container" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li>your menu item here</li> 
     </ul> 
    </div> 
</nav>