jquery - 在小型设备上将菜单更改为按钮

Question

所以我是 bootstrap 的新手。我已经检查了该站点，并在 GitHub 上找到了这个示例:https://github.com/twbs/bootstrap/tree/master/docs/examples/dashboard

这就是我所需要的。我可以稍微调整一下，让它满足我的需要，除了一个。有一个带有链接的侧边栏。当您缩小屏幕时，侧边栏会消失(就像在移动设备上发生的那样)。我想确保侧边栏消失但用按钮将其恢复。就像本例中的顶部导航一样。这里是代码片段(我认为并不是所有的都很重要)

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Profile</a></li>
        <li><a href="#">Help</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <input type="text" class="form-control" placeholder="Search...">
      </form>
    </div>
  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item</a></li>
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
        <li><a href="">More navigation</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
      </ul>
    </div>

所以 <nav>隐藏在较小的设备上并形成一个菜单按钮

还有一个附带问题，那个咏叹调是什么意思。我看过一些 aria-... 类，但不确定它的作用/含义。

Answer 1

如果您想根据屏幕分辨率显示或隐藏元素，您可以在 CSS 中执行以下操作:

    @media (max-width: 767px) {
      .nav-sidebar {
        display: none;
      }
    }
    @media (min-width: 767px) {
      .nav-sidebar {
        display: block;
      }
    }

仅当屏幕宽度至少为 767px 时，代码才会显示属于 nav-sidebar 类的元素。

您可以在此处找到您正在尝试执行的操作的完整示例:http://bootsnipp.com/snippets/featured/responsive-navigation-menu