如何从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>