html - Bootstrap Responsive 将列表变成移动菜单

Question

我希望能够在移动设备上将一个简单的无序列表变成一个漂亮的菜单:

       <ul class="jumpToList list-inline">
            <li><a href="#buttons">Buttons</a></li>
            <li><a href="#select">Select</a></li>
            <li><a href="#input">Input</a></li>
            <li><a href="#checkradio">Checkboxes &amp; Radios</a></li>
            <li><a href="#switches">Switches</a></li>
        </ul>

因此，当我在移动设备上时，上面的内容会变成一个简单的菜单，其中包含 3 个栏，然后向下折叠链接。

类似于 Bootstrap 导航菜单的工作方式，但与此不冲突。

理想情况下，我想为此使用 Bootstrap 的内置内容，这是我所追求的一个很好的例子:

http://ux.mailchimp.com/patterns/forms

如果缩小浏览器，您会看到该列表变成移动设备上的菜单。

谢谢

Answer 1

对您的 HTML 进行一些简单的修改，media-queries并且 Javascript 应该允许您复制此行为。

我建议您首先创建媒体查询以根据设备宽度更改应用的样式。

CSS - 移动优先

.list-inline {
  display: none;
  visibility: hidden;
}

.list-inline-active {
  display: block;
  visibility: visible;
}

.list-inline li {
  display: block;
}

@media (min-width: 600px) {
  .list-toggle {
    display: none;
  }

  .list-inline {
    display: block;
    visibility: visible;
  }    

  .list-inline li {
    display: inline-block;
  }
}

HTML - 添加切换按钮/图标

<button class="list-toggle">Show list</button>

Javascript/jQuery

$('.list-toggle').click(function(){
  $('.list-inline').toggleClass('list-inline-active');
});

此方法仅使用一个按钮来切换无序列表元素上的类。切换类包含使列表在移动设备上可见的样式。

我创建了一个简单的 JSFiddle example在行动中展示这一点。

值得注意的是，这种行为几乎完全可以在完全不使用 Javascript 的情况下复制。它将涉及复选框和“:checked”伪选择器的使用。但是 Bootstrap 3 确实使用 Javascript。

希望对您有所帮助。