twitter-bootstrap 如何从 Bootstrap 获取移动下拉菜单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15320772/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I get the mobile dropdown menu from Bootstrap?
提问by TIMEX
If you go to bootstrap's main website on your phone, you'll notice a slide down menu on the top right.
如果您在手机上访问 bootstrap 的主网站，您会注意到右上角有一个下拉菜单。
This is part of the nav bar.
这是导航栏的一部分。
Where can I find this dropdown menu plugin? It's not on the main site.
我在哪里可以找到这个下拉菜单插件？它不在主站点上。
回答by imcconnell
It's the Responsive Navbar - the variation that shows on mobiles. To find it and see its usage, read Carlo's comment or go here:
这是响应式导航栏 - 显示在手机上的变化。要找到它并查看它的用法，请阅读 Carlo 的评论或到这里：
回答by Carlo Moretto
See this example: http://twitter.github.com/bootstrap/examples/fluid.html
请参阅此示例：http: //twitter.github.com/bootstrap/examples/fluid.html
Remember to add:
记得补充：
<script src="../assets/js/bootstrap-dropdown.js"></script>
And the css:
和CSS：
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">
This is code sample:
这是代码示例：
<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>
回答by scartag
I believe it is a result of the responsive css bootstrap-responsive.css
我相信这是响应式 css 的结果 bootstrap-responsive.css
It shows different on the mobile due to the device width detection.
由于设备宽度检测，它在移动设备上显示不同。
回答by Shail
IF you want to download specifically the responsive navbar component , you can do so by goin on to the Customize BootStrapand then select the navbar,navs,tabs and pills and then in responsive section You can select the responsive navbar option and other media components as per your requirement . Also you will find Select jquery Plugins section , where you will have to download the following plugins in order to make navbar work as intended :- Affix , Dropdowns,collapse
如果您想专门下载响应式导航栏组件，您可以进入自定义引导程序，然后选择导航栏、导航栏、标签和药丸，然后在响应部分中选择响应式导航栏选项和其他媒体组件作为根据您的要求。您还将找到 Select jquery Plugins 部分，您必须在其中下载以下插件才能使导航栏按预期工作：- Affix , Dropdowns,collapse
回答by Antony
I know this is old now but I found myself working through the same problems and want to provide a barebone example for anyone else who finds it. It is based on Bootstrap 3 though.
我知道这现在已经过时了，但我发现自己正在解决同样的问题，并希望为其他任何发现它的人提供一个准系统示例。不过，它基于 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>
