1

如果您在手机上访问 bootstrap 的主网站，您会注意到右上角有一个下拉菜单。

这是导航栏的一部分。

我在哪里可以找到这个下拉菜单插件？它不在主站点上。

4

5 回答 5

4

这是响应式导航栏——在手机上显示的变体。要找到它并查看它的用法，请阅读 Carlo 的评论或转到此处：

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

于 2013-03-10T10:05:28.940 回答
1

请参阅此示例：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>
于 2013-03-10T09:37:35.697 回答
0

我相信这是响应式 CSS 的结果bootstrap-responsive.css

由于设备宽度检测，它在移动设备上显示不同。

于 2013-03-10T09:36:29.740 回答
0

如果您想专门下载响应式导航栏组件，您可以继续自定义 BootStrap ，然后选择导航栏、导航、选项卡和药丸，然后在响应部分中您可以选择响应式导航栏选项和其他媒体组件作为根据您的要求。您还将找到 Select jquery Plugins 部分，您必须在其中下载以下插件才能使导航栏按预期工作：- Affix、Dropdowns、collapse

于 2013-03-10T14:18:35.677 回答
0

我知道这已经过时了，但我发现自己正在解决同样的问题，并想为其他发现它的人提供一个准系统示例。它基于 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>
于 2016-09-16T08:52:29.860 回答