Html 将响应性翻转列表引导到移动菜单中

我希望在手机上能够将一个简单无序的列表变成一个漂亮的菜单：

       <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个条，然后向下折叠链接

与引导导航菜单的工作原理类似，但与此不冲突

理想情况下，我希望使用具有引导功能的内置功能，这是我所追求的一个很好的示例：

如果你缩小浏览器，你会看到列表变成手机上的菜单

---

感谢对HTML的一些简单修改，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>

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

我已经创建了一个简单的示例来展示这一点

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

---

我希望这有帮助。

为什么不使用引导程序？还有，到目前为止你尝试了什么？以防万一，有数千种方法可以做到这一点，其中大多数都需要JS或jQuery，进行谷歌搜索并选择其中任何一种。是的，我理想情况下希望使用Bootstrap来实现这一点——如果可能的话，内置的东西？

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