如何从Bootstrap获取移动下拉菜单？

Question

If you go to bootstrap's main website on your phone, you'll notice a slide down menu on the top right.

This is part of the nav bar.

Where can I find this dropdown menu plugin? It's not on the main site.

Answer 1

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:

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

Answer 2

See this example: http://twitter.github.com/bootstrap/examples/fluid.html

Remember to add:

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

And the 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>

Answer 3

I believe it is a result of the responsive css bootstrap-responsive.css

It shows different on the mobile due to the device width detection.

Answer 4

IF you want to download specifically the responsive navbar component , you can do so by goin on to the Customize BootStrap and 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

Answer 5

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.

<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>