twitter-bootstrap – 如何将导航折叠成移动设备的小图标？

发布时间：2020-12-18 00:26:42 所属栏目：安全来源：网络整理

导读：如果您继续使用 Twitter-Bootstrap网站,并将窗口大小降至1024×768以下,导航将更改为您单击的图标.这是JavaScript插件之一吗？如何让我的网站做同样的事情？编辑解决方法导航需要nav-collapse属性以及.btn.这是一个例子： div class="container" !-- .btn

如果您继续使用 Twitter-Bootstrap网站,并将窗口大小降至1024×768以下,导航将更改为您单击的图标.这是JavaScript插件之一吗？如何让我的网站做同样的事情？

编辑

解决方法

导航需要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
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!