如何让导航折叠成移动设备的小图标？

Question

如果您使用Twitter-Bootstrap网站并将窗口大小缩小到1024x768以下,导航将变为您单击的图标.这是一个javascript插件吗？如何让我的网站做同样的事情？

---

编辑

Answer 1

导航也需要nav-collapse属性以及属性.btn.这是一个例子:

<div class="container">
  <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </a>

    <a class="brand" href="#">Project name</a>

    <!-- Everything you want hidden at 940px or less, place within here -->
    <div class="nav-collapse">
      <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><

</div>

有关折叠导航的更多详细信息,请访问http://twitter.github.com/bootstrap/components.html#navbar.

侧面说明2012年10月3日

我刚刚开始使用其他应用程序进行此操作,并使用最小化文件遇到了一些麻烦,因此我建议您坚持常规,如果您遇到问题,即使一切设置正确.这是我application.css现在的:

/*
 *= require_self
 *= require bootstrap
 *= require bootstrap-responsive
 *= require_tree .
 */
body { 
    padding-top: 60px; # this is for fixed-top navigation
}