引导模板中的奇怪按钮标记

Question

我在基本的bootstrap html template中找到了这个按钮标签（我添加了箭头）

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

它完全不可见（至少对我而言），它似乎没有任何效果（当我点击它时它不会发生任何事情）。

它应该是这样的，它的重点是什么？

Answer 1

按钮在哪里：当您通过放大或使用移动设备访问网页来缩小网页宽度时，可以看到该按钮。

这是什么按钮：该按钮用于切换移动设备上的导航栏下拉列表。

这三条线叠在一起是按钮：

Answer 2

它是智能手机等小型显示器的菜单切换。在大屏幕上它将被隐藏。

Answer 3

作为上述答案的补充。

为了使按钮具有工作功能，您需要加载jquery库，然后加载引导程序jquery库。 这些可以包含在html代码的head标记中，也可以包含在body标记的结尾之前（第二个选项是最佳实践）。 试试这样（使用cdn）：

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>