html - 如何在移动设备上自动将菜单栏更改为下拉列表？

Question

我正在开发桌面和移动站点。我希望菜单栏在桌面站点上显示完整菜单，而在移动站点上仅显示一个带有下拉菜单的按钮。任何人都知道如何做到这一点？使用引导程序可以做到吗？但是如何？请帮忙。

就像这个网站..缩放你的浏览器，你会看到菜单按钮。 http://getbootstrap.com/2.3.2/

Answer 1

这很容易用引导程序来完成。

这是直接从引导文档中复制的。

在此处阅读文档。最值得注意的是“响应式导航栏”部分。

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

         <!-- Be sure to leave the brand out there if you want it shown -->
         <a class="brand" href="#">Project name</a>

         <!-- Everything you want hidden at 940px or less, place within here -->
         <div class="nav-collapse collapse">
             <!-- .nav, .navbar-search, .navbar-form, etc -->
             <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
             </ul>
         </div>
      </div>
   </div>
</div>