Question

如果您继续访问Twitter-Bootstrap网站并将窗口大小缩小到1024x768以下，则导航将变为您为其单击的图标。这是一个javascript插件吗？如何让我的网站做同样的事情？

修改

strange

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了解有关折叠导航的详细信息。

SIDE NOTE 2012年10月3日

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

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

Answer 2

它不是JavaScript（除了可切换菜单本身的实现），它是带有媒体查询的CSS：

http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css

Answer 3

如果您刚刚通过单击按钮下载了引导程序文件，则在自定义页面时它将无法立即生效。您必须下载最新的jQuery文件，并将其替换为它们为您提供的通用文件路径。您也可以像这样清理示例文件......

<!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

到

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../assets/js/jqueryNEW.js"></script>
<script src="../assets/js/bootstrap.js"></script>

或者只需点击“使用文档下载”链接并且所有问题都将得到解决，因为所有链接都可以正常工作

Answer 4

嗯.. @LearningROR

I have nodified your code..

 <div class="navbar">  
<div class="navbar-inner">
<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>
</div>
</div>

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

4 个答案: