不确定此按钮类在导航栏的代码中正在做什么

Question

因此，我从getbootstrap.com复制了导航栏的代码，但无法理解按钮的代码。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

该按钮的代码在第3至7行中。由于已经存在定位标记，因此不确定导航栏中的按钮用途是什么。

代码<div class="collapse navbar-collapse" id="navbarNavAltMarkup">的功能也很特别，特别是类'collapse'和'navbar-collapse'。当我删除它们时，它们似乎没有任何区别（尽管我尚未完全实现该网页，但这可能就是原因）。

谢谢！

Answer 1

该按钮适用于中小尺寸的屏幕，它将是“汉堡包”按钮