Html '的用途是什么；数据切换="；“崩溃”；按钮'；在引导导航栏中？

我目前正在学习Bootstrap4，正在研究Navbar部分，有一个问题出现了

<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="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

搜寻

aboce是一个包含在响应灯光主题导航栏中的所有子组件的示例，该导航栏在lg（大）断点处自动折叠。 但是，我无法理解以下部分：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

我知道数据切换是什么。。。但是为什么在这个html模板中必须有一个按钮类型呢？难道你不能将

数据切换部分输入到按钮类正下方的
类中吗？因为我在文档的
nav>部分中看到了使用下拉菜单
，您可以在
元素或
元素中使用数据切换

这个按钮的用途是什么？？打开文件时，我甚至看不到html中的按钮。
我建议您查看：？明白我的意思。但基本上，当您运行您发布的代码时，您看到的是一个可以折叠的导航栏，它非常清楚地表示“导航栏”。在单词“导航栏”旁边，有一个按钮，按下或单击该按钮时，会向您显示代码中的其他选项，如“主页”、“链接”等。因此，基本上，您所说的这个按钮，当您单击它时，您会看到导航栏中的其他项目

现在，关于为什么你看不到它，请缩小你的屏幕，看看它。当屏幕变小时，按钮会显示“导航栏切换图标”，该图标在下面的按钮代码中提到，因此当您单击它时，您将看到导航栏的其他元素，在更大的屏幕上，导航栏的其他元素会直接显示，而无需按钮

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>


我建议你看看：？明白我的意思。但基本上，当您运行您发布的代码时，您看到的是一个可以折叠的导航栏，它非常清楚地表示“导航栏”。在单词“导航栏”旁边，有一个按钮，按下或单击该按钮时，会向您显示代码中的其他选项，如“主页”、“链接”等。因此，基本上，您所说的这个按钮，当您单击它时，您会看到导航栏中的其他项目

现在，关于为什么你看不到它，请缩小你的屏幕，看看它。当屏幕变小时，按钮会显示“导航栏切换图标”，该图标在下面的按钮代码中提到，因此当您单击它时，您将看到导航栏的其他元素，在更大的屏幕上，导航栏的其他元素会直接显示，而无需按钮

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>

根据我的说法，你只需要制作一个简单的HTML页面。添加bootstrap CDN链接并注意它是如何工作的，您可以通过删除按钮并替换为其div来尝试一次

你会知道到底发生了什么。
你告诉我你没有任何按钮，这个按钮会显示在屏幕的小尺寸上。如果你想看到这个按钮，你可以减小浏览器的尺寸。
你也可以参考这个
根据我的说法，你只需要制作一个简单的HTML页面。添加bootstrap CDN链接并注意它是如何工作的，您可以通过删除按钮并替换为其div来尝试一次

你会知道到底发生了什么。
你告诉我你没有任何按钮，这个按钮会显示在屏幕的小尺寸上。如果你想看到这个按钮，你可以减小浏览器的尺寸。
您也可以参考这一个
以下是您的
导航栏
的常规外观


但当屏幕开始缩小时，内容必须放在某个地方才能适应，因此它会转换为：


在右上角你可以看到一个按钮。这正是你要问的。按下此按钮后，将显示所有导航栏内容

因此，基本上，它是一个按钮，允许这种更具响应性的行为，同时以某种方式保持所有内容可用。
以下是您的
导航栏的常规外观


但当屏幕开始缩小时，内容必须放在某个地方才能适应，因此它会转换为：


在右上角你可以看到一个按钮。这正是你要问的。按下此按钮后，将显示所有导航栏内容

因此，基本上，它是一个按钮，允许这种更具响应性的行为，同时以某种方式保持所有内容可用